/**
 * Faq Slider
 */
 
var MyFolder = new Class({
	
	initialize: function( selector, currentHash ) {
		
		this.open = null;

		$$( selector ).each( function( elm ) {

			elm.setStyle( "display", "block" );
		
			// create slide fx
			var myFx = new Fx.Slide( elm.getElement( ".beschrijving" ) );
			
			// add onclick event			
			elm.getElement( ".titel" ).addEvent( "click", function( e ) {
				
				// close the current slide				
				if ( this.open != null )
				{
					this.open.slideOut();
					this.open = null;
				}
				
				// remove all opened classes
				$$( selector + ".opened" ).each( function( elmOpen ) {
					elmOpen.removeClass( "opened" );
				});
				
				// open the selected slide
				if ( myFx.open == false ) {
					myFx.toggle();
					elm.addClass( "opened" );
					this.open = myFx;
				}	
				
			}.bindWithEvent( this ) );
		
			// hide current slides
			if ( elm.getElement( "a.anchor" ).getAttribute( "name" ) != currentHash	&& !elm.hasClass( "opengeklapt" ) )
				myFx.hide();
			else
			{
				elm.addClass( "opened" );
				this.open = myFx;
			}
		
		}.bind( this ));
		
		if ( currentHash != null )
			window.location.hash = "#" + currentHash;
	}		
});

/**
 * Home Personages/Rollen
 */
function initHomeRollen( ) {
	$$(".personages .rol img").each( function( elm ) {
		var morph = new Fx.Morph(elm, {duration: 'short'} );
	
		elm.addEvent( "mouseover", function( e ) {
			morph.cancel();
			morph.start({
				borderLeftWidth: '0px',
				borderTopWidth: '0px'							
			});
		});
		
		elm.addEvent( "mouseout", function ( e ) {
			morph.cancel();
			morph.start({
				borderLeftWidth: '7px',
				borderTopWidth: '6px'							
			});
		});
	});				
}

/**
 * Inschrijf formulier
 */
var InschrijfFormulier = new Class({
	
	initialize: function( form ) {
		
		this.form = form;
		this.soortbedrijf = form.getElement( "select[name=soortaccount]" );
		this.naamlabel = form.getElement( "input[name=bedrijfsnaam]" ).getParent().getPrevious().getElement( "b" );
		this.logolabel = form.getElement( "input[name=bedrijfslogo]" ).getParent().getPrevious().getElement( "b" );
		this.bekendselect = form.getElement( "select[name=bekendvia]" );
		this.bekendtext = form.getElement( "textarea[name=bekendanders]" );

		// initailize skins
		this.skins = form.getElement( "select[name=skin]" );
		this.skins.addClass( "skinselector" );		

		// create events		
		this.soortbedrijf.addEvent( "change", function( e ) {
			this.toggleArtiest();
		}.bindWithEvent( this ));
		
		this.skins.addEvent( "change", function( e ) {
			this.toggleSkins();
		}.bindWithEvent( this ));

		this.bekendselect.addEvent( "change", function( e ) {
			this.toggleBekendVia();
		}.bindWithEvent( this ));
		
		this.bekendtext.addEvent( "keydown", function( e ) {
			var maxchars = this.bekendtext.get( "maxchars" );
			var length = this.bekendtext.get( "value" ).length;
			
			if ( e.key == "backspace" || e.key == "delete" )
				return;
			
			if ( length >= maxchars )
				e.stop();			

		}.bindWithEvent( this ));

		this.img = new Element( "img", {
			'width': 100,
			'height': 100,
			'alt': 'Template Skin',
			'class': 'skinimage'
		}).inject( this.skins, 'after' );
		
		// initialize defaults
		this.toggleArtiest();	
		this.toggleSkins();
		this.toggleBekendVia();
	},
	
	toggleArtiest: function( ) {
		if ( this.soortbedrijf.get( "value" ) == "Artiest" ) {
			this.naamlabel.set( "html", "Artiestennaam:" );
			this.logolabel.set( "html", "Avatar:" );
		}
		else
		{
			this.naamlabel.set( "html", "Bedrijfsnaam:" );
			this.logolabel.set( "html", "Bedrijfslogo:" );
		}
	},
	
	toggleSkins: function( ) {
		this.img.set( "src", baseurl+"img/websiteskins/"+this.skins.get( "value" )+"-1.jpg" );		
	},
	
	toggleBekendVia: function( ) {
		if ( this.bekendselect.get( "value" ) == "Anders namelijk:" )
			this.bekendtext.getParent().setStyle( "display", "block" );
		else
			this.bekendtext.getParent().setStyle( "display", "none" );
		
	}
}); 

/**
 * Set default text for text input fields
 */
function setDefaultFormContent( element, text, classname ) {				

	for ( elm = element; elm != null; elm = elm.getParent() )
		if ( elm.nodeName == "FORM" ) 
		{
			elm.addEvent( "submit", function( e ) {
				if ( element.get( "value" ) == text )
					element.set( "value", "" );
			});
			break;
		}

	// set the default text into the input field
	if ( element.get( "value" ) == "" || element.get( "value" ) == text )
	{
		element.addClass( classname );
		element.set( "value", text );
	}

	// add the focus event to clear the input field
	element.addEvent( "focus", function( e ) {
		new Event( e ).stop();		
		if ( element.get( "value" ) == text ) element.set( "value", "" );
		element.removeClass( classname ); 
	});
	
	// add the blur event to reset the input field
	element.addEvent( "blur", function( e ) {
		new Event( e ).stop();
		if ( element.get( "value" ) == "" || element.get( "value" ) == text )
		{
			element.addClass( classname );
			element.set( "value", text );
		}		
	});
}

/**
 * Create tooltip of the content of the given elements. Will use 
 * the tooltips as container and linktxt as trigger
 * 
 * @param linktxt string
 * @param tooltips hash
 */
function createFormTooltip( linktxt, tooltips )
{
	var showing = null;
	
	// loop over all tooltips
	tooltips.each( function( tooltip ) {
		
		// create necessary components
		var text = tooltip.get("html");		
		var hover = new Element( "a", {"html": linktxt, "class": "tooltiplink"} );
		var layover = new Element( "div", {"html": text,"class":"tooltipbody"} );
		var timeout = null;		
		
		// configure layover
		layover.fade('hide');
		layover.setStyle( "display", "block" );
		
		// empty current tooltip content
		tooltip.empty();		
		
		var holder = tooltip.getParent().getPrevious().getChildren()[1];
		
		// add components to element
		layover.inject( holder );
		hover.inject( holder );
		holder.addClass( "tooltip" );
		
		
		// position the tooltip
		layover.position( {
			"relativeTo": hover,
			"position": 'upperRight',
			"edge": 'bottomLeft',
			"offset": { x:0, y:-10 }
		});
		
		// add triggers
		hover.addEvent( "mouseover", function() {
			// clear fade timeout
			if ( timeout != null )
			{
				$clear( timeout );
				timeout = null;
			}		
			
			// hide the current visible tooltips
			if ( showing != null && showing != this )
				showing.fade('hide');
			
			this.fade('show');
			showing = this;
		}.bindWithEvent( layover ) );
		
		hover.addEvent( "mouseout", function() {
			timeout = function ( ) {
				showing = null;
				this.fade('out');
			}.bind( this ).delay( 1500 );
		}.bindWithEvent( layover ) );
		
	});
}


/**
 * Ajax form verify
 */
var FormValidate = new Class({
	
	initialize: function( formname )
	{
		this.formname = formname;
		this.form = $(formname);
		this.elements = this.form.getElements( "input, select, textarea" );
		this.submitbutton = this.form.getElement( "input[type=submit]" );
		
		// add hidden variable to notify the handler of the javascript
		this.javascript = new Element( 'input', {
			"type": "hidden",
			"name": "formoutput",
			"value": "javascript"
		}).inject( this.form );
		
		this.addhooks();
	},
	
	addhooks: function( )
	{
		this.elements.each( function( elm ) {
			elm.addEvents( {
				"keydown": function( e ) {
					if ( e.key == "enter" ) this.form.fireEvent( "submit" );					
				}.bindWithEvent( this ),
				"focus": function( e ) {
					this.hidefeedback();
				}.bindWithEvent( this )
			});
		}.bind( this ) );
		
		this.form.addEvent( "submit", function( e ) {
			// stop the submit event
			e.stop();
			// verify the form input
			this.verify();			
		}.bindWithEvent( this ) );
	},
	
	showfeedback: function( message )
	{
		// create feedback if not available
		if ( this.feedback == null )
			this.feedback = new Element( "div", {"class": "feedback"} ).inject( this.form, 'top' ); 

		this.feedback.set( "html", message );
		this.feedback.setStyle( "visibility", "visible" );
	},
	
	hidefeedback: function( )
	{
		if ( this.feedback != null )
			this.feedback.setStyle( "visibility", "hidden" );
	},
	
	hidesubmit: function( )
	{		
		this.submitbutton.setStyle( "display", "none" );
		
		if ( this.submittext == null )
			this.submittext = new Element( "div", {"html":"Het formulier wordt verwerkt..."}).inject( this.submitbutton, 'after' );
		
		this.submittext.setStyle( "display", "block" );
	},
	
	showsubmit: function( )
	{
		this.submittext.setStyle( "display", "none" );
		this.submitbutton.setStyle( "display", "block" );
	},
	
	adduploaddata: function( )
	{
		this.filedata = new Array();
		
		// check file elements
		this.form.getElements( "input[type=file]" ).each( function( elm ) {
			
			 			
			if ( elm.value != null && elm.value != "" )
			{
				var fileinput = new Element( 'input', {
					"type": "hidden",
					"name": elm.get( "name" ),
					"value": elm.get( "value" )
				}).inject( this.form );
				
				this.filedata.extend( [fileinput] );
			}
			
		}.bind( this ));
	},
	
	removeuploaddata: function( )
	{
		if ( this.filedata != null )
		{
			this.filedata.each( function( elm ) {				
				elm.dispose();				
			}.bind( this ));			
		}
		
		this.filedata = null;
	},
	
	verify: function( )
	{	
		this.hidefeedback(); 
		this.hidesubmit();			
		this.adduploaddata();
		
		this.form.set('send', {
                method: 'post',
                data: this.form, 
                evalResponse: false, 
                onFailure: function( xhr ) {
					this.handleResult( null );
				}.bind( this ),	
                onSuccess: function( responseText, responseXML ) {						
					jsonObj = JSON.decode( responseText, true );
					this.handleResult( jsonObj );
				}.bind( this )			
        });
        this.form.send(this.action);  

	},
	
	handleResult: function( jsonObj )
	{
		this.removeuploaddata();
		
		// submit failed
		if ( jsonObj == null )
		{
			this.showsubmit();
			return;
		}
		
		// error message
		if ( jsonObj.error )
		{
			this.showsubmit();
			
			// show feedback
			this.showfeedback( jsonObj.error.message );
			
			// scroll feedback into view
			var coordinates = this.feedback.getCoordinates( );						
			var myFx = new Fx.Scroll(window, { 
				offset: { 'x': 0, 'y': coordinates.top - 200 }
			}).toTop();
			return;
		}
		
		// form succes
		this.javascript.set( "value", "" );
		this.form.submit();
	}
});

function setPositionFixed( element )
{
	var myFx = new Fx.Tween( element );	                       
	var opos = null;
	
	window.addEvent( "scroll", function( event ) {
		var wscroll = window.getScroll();
		
		if ( opos == null )
			opos = element.getCoordinates();
		
		if ( wscroll.y > opos.top )
		{
			myFx.cancel();
			myFx.start( 'top', wscroll.y - opos.top + 42 );
		}	
		else
		{
			myFx.cancel();
			myFx.start( 'top', '42' );
		}
	});
}