/**
 * Javascript for current project
 */ 

function handleSubmit (event, form)
{
		var curEvent = event;
		if ( curEvent.keyCode == 13 ) {
			var curForm = form;
    		//alert(curForm.formname.value+' ingestuurd met de enter knop');
    		if ( curForm.formname.value == 'Emailaanvraag' ) {
				verifyForm(curForm.formname.value, '');
			} else {
    			curForm.submit();
			}
		}
}
  
function wmhgAdvertiser( src, action )
{
	if ( action == "over" ) {
		src.className+=" webfxmouseover";
	} else if (action == "out" ) {
		src.className=src.className.replace(new RegExp(" webfxmouseover\\b"), "");
	}	
}

var Zoekform = new Class({

    initialize: function(  ) {
    	this.categorieselect = document.getElement( 'select[name=categorie]' );
        this.landselect = document.getElement( 'select[name=land]' );
        this.regioselect = document.getElement( 'select[name=regio]' );
        this.plaatsselect = document.getElement( 'select[name=plaats]' );
        this.eigenschappen = $$('#zoekenformulier .eigenschappen input.checkbox');
        
        this.categorieselect.addEvent( 'change', function() {
        	this.getCountries( this.categorieselect.get('value') );        	
        }.bindWithEvent(this) );
        
        this.landselect.addEvent( 'change', function() {
            this.getRegios( this.categorieselect.get('value'), this.landselect.get('value') );
        }.bindWithEvent(this) );
        
        this.regioselect.addEvent( 'change', function() { 
            this.getPlaces( this.categorieselect.get('value'), this.landselect.get('value'), this.regioselect.get('value') );
        }.bindWithEvent(this) );

        this.plaatsselect.addEvent( 'change', function() {
        	this.updateResultCount( );
        }.bindWithEvent(this) );
        
        this.eigenschappen.each( function( checkbox ) {
        	checkbox.addEvent( 'click', function() {
        		this.updateResultCount( );
        	}.bindWithEvent( this ));
        }.bind( this ) );
        
		if ( this.landselect.get( "value" ) == "" )
			this.regioselect.set( "disabled", true );
			
		if ( this.regioselect.get( "value" ) == "" )
			this.plaatsselect.set( "disabled", true );

		this.regioselect.set( "disabled", this.regioselect.children.length <= 1 );
		this.plaatsselect.set( "disabled", this.plaatsselect.children.length <= 1 );		
    },
    
    getCountries: function( categorie ) {
    	var jsonRequest = new Request.JSON({url: baseurl+"ajax", 
    		onSuccess: function(jsonObject){
    			this.fillSelect( this.landselect, jsonObject.result );
    			this.regioselect.empty();
    			this.regioselect.set( "disabled", true );
    			this.plaatsselect.empty();
    			this.plaatsselect.set( "disabled", true );
    			
    			// 1 land, deze mag meteen geselecteerd worden en regio's ophalen
    			if ( jsonObject.result.length == 1 )
    			{
    				this.landselect.set( "value", jsonObject.result[0] );
    				this.getRegios( categorie, jsonObject.result[0] );
    			}
    			// multi countries, update the result counter
    			else    				
    				this.updateResultCount( );
    	}.bind(this)}).get({ 'rs':'getCountryByCategory', 'een':escape(categorie) });
    },
    
    getRegios: function ( category, country ) {        	
    	var jsonRequest = new Request.JSON({url: baseurl+"ajax", 
    		onSuccess: function(jsonObject){
    			this.fillSelect( this.regioselect,jsonObject.result );
    			this.plaatsselect.empty();
    			this.plaatsselect.set( "disabled", true );
    			this.updateResultCount( );
    	}.bind(this) }).get({ 'rs':'getRegionByCountry', 'een': escape(category), 'twee':escape(country) });
    },
    
    getPlaces: function ( category, country, region ) {
    	var jsonRequest = new Request.JSON({url: baseurl+"ajax", 
    		onSuccess: function(jsonObject){
    			this.fillSelect( this.plaatsselect, jsonObject.result );
    			this.updateResultCount( );
    	}.bind(this) }).get({ 'rs':'getPlacesByRegion', 'een': escape(category), 'twee': escape(country), 'drie':escape(region) });
    },
    
    getCheckedEigenschappen: function( )
    {
    	var eresult = "";
    	
    	this.eigenschappen.each( function( checkbox ) {    		
    		if ( checkbox.checked )
    			eresult += checkbox.get( "name" ) + "|";   		
    	}.bind( this ) );
    	
    	return eresult;
    },
    
    fillSelect: function ( target, data ) {
        target.empty();
		target.appendChild( new Element( 'option', {value:"", html:""} ) );
		         
		// regular array containing the data
		if ( $type( data ) == "array" )
		{
	        for ( i = 0; i < data.length; i++ )
	        	if ( data[i] != null )
		            target.appendChild(
		                new Element('option', {value:data[i], html:data[i]} )
		            );
		}
		// hash keyed array - using optgroups
		else 
		{
			new Hash( data ).each( function( value, key ) {
				
				var opt = target.appendChild( new Element( 'optgroup', {"label": key} ) );
				
				new Hash( value ).each( function( v2, k2 ) {
					opt.appendChild( new Element( 'option', {"value":k2,"html":v2} ));
				});
			});			
		}
	    
		if ( data != null )
			target.set( "disabled", data.length==0 );
    },
    
    updateResultCount: function( )
    {
    	if ( this.request != null )
    	{
    		this.request.cancel();
    		this.request = null;
    	}
    	
    	this.request = new Request.JSON({url: baseurl+"ajax", 
    		onSuccess: function(jsonObject) {
    			$('aantalresultaten').set( "html", "(" + jsonObject.result + ")");
    	}.bind(this) });

    	this.request.post({ 
    		'rs':'getSearchResultCount', 
    		'een': escape(this.categorieselect.get('value')), 
    		'twee': escape(this.landselect.get('value')), 
    		'drie': escape(this.regioselect.get('value')),
    		'vier': escape(this.plaatsselect.get('value')),
    		'vijf': this.getCheckedEigenschappen()
    	});
    }

});
  

/**
 * Kaart en Omgeving tabs
 */
var KaartEnOmgeving = new Class({
	
	initialize: function( tabs, slideable ) {
	
		this.tabs = tabs;
		this.slideable = slideable;
		
		this.tabbedpane = new ApolairTabbedPane();
		this.tabbedpane.addTabs( tabs );
	
		this.initLabels( );
		this.initSlideable( );
		this.initTabs();
	},
	
	initSlideable: function( )
	{
		if ( !this.slideable )
			return;
		
		this.slide = new Fx.Slide( document.getElement( '.tabs' ) );
		this.close = $('tabbedpanel').getElement( '.labels .close' );	
		this.close.addEvent( 'click', this.slideClose.bindWithEvent( this ) );
	},
	
	initLabels: function( )
	{
		// determine the maximum width of the labels area
		this.labels = $('tabbedpanel').getElement( '.labels' );
		var maxLabelWidth = this.labels.getSize().x;
		
		// create placeholder for each row of the labels
		var row = new Element( 'div', {"class":"labelsrow"} ).inject( this.labels, 'top');
				
		// add tabs to the placeholder until it's filled up
		var totalLabelWidth = 0;
		var index = 1;
		this.tabs.each( function( tab ) { 
			
			totalLabelWidth += tab.getLabelSize().x;
			
			if ( maxLabelWidth < totalLabelWidth )
			{
				totalLabelWidth = tab.getLabelSize().x;
				index = 1;
				row = new Element( 'div', {"class":"labelsrow"} ).inject( this.labels, 'top');
			}
			
			tab.label.addClass( "tabindex" + index++ );
			tab.label.inject( row );
		}.bind( this ));
	},
	
	initTabs: function( )
	{
		this.tabs.each( function( tab ) {
			// show this tab
			tab.addEvent( "activate", function( event ) {			
				tab.label.addClass( "tabactive" );
				tab.tab.setStyle( "display", "block" );
				this.slideOpen();
			}.bindWithEvent( this ));
			
			// hide this tab
			tab.addEvent( "deactivate", function( event ) {
				tab.label.removeClass( "tabactive" );
				tab.tab.setStyle( "display", "none" );
			}.bindWithEvent( this ));
		}.bind( this ));
	},
	
	start: function( )
	{
		if ( this.slideable && Cookie.read( "wmhglokatieomgeving" ) == "dicht" )
		{
			this.close.setStyle( "visibility", "hidden" );
			this.slide.hide();
		}
		else
		{
			this.tabs[0].activate();
		}
	},
	
	slideOpen: function( )
	{
		if ( !this.slideable || this.slide.open )
			return;
		
		// ie 7 en lager
		if ( Browser.Engine.trident && Browser.Engine.version <= 5 )
		{
			this.slide.show();
			this.close.setStyle( "visibility", "visible" );
			Cookie.write( "wmhglokatieomgeving", null, {path: "/", duration: 1000000} );			
		}
		else
		{		
			this.slide.slideIn().chain( function( ) {
				this.close.setStyle( "visibility", "visible" );
				Cookie.write( "wmhglokatieomgeving", null, {path: "/", duration: 1000000} );
			}.bind( this ));
		}
	},
	
	slideClose: function( )
	{
		if ( !this.slideable || !this.slide.open )
			return;
		
		if ( Browser.Engine.trident && Browser.Engine.version <= 5 )
		{
			this.slide.hide();
			this.close.setStyle( "visibility", "hidden" );
			Cookie.write( "wmhglokatieomgeving", "dicht", {path: "/", duration: 1000000} );
			this.tabbedpane.deactivateActiveTab();			
		}
		else
		{
			this.slide.slideOut().chain( function() {
				this.close.setStyle( "visibility", "hidden" );
				Cookie.write( "wmhglokatieomgeving", "dicht", {path: "/", duration: 1000000} );
				this.tabbedpane.deactivateActiveTab();
			}.bind( this ));
		}
	}
	
	
});


function initHeaderTabs( )
{
	var tabs = $$( ".menuenprojecten .menu a" );
	
	tabs.each( function( tab ) {
		
		if ( tab.hasClass( "tabactive" ) )
			return;
		
		tab.fx1 = new Fx.Morph( tab.getElement( ".bg" ), {duration:'short'} );
		tab.fx2 = new Fx.Morph( tab, {duration:'short'} );
		
		tab.addEvents({
			"mouseover": function( event ) {
				this.fx1.cancel().start({
					"height": 35
				});
				this.fx2.cancel().start({
					"marginTop": 0
				});
			
			}.bindWithEvent( tab ),
			
			"mouseout": function( event ) {
				this.fx1.cancel().start({
					"height": 25

				});
				this.fx2.cancel().start({
					"marginTop": 10
				});
			}.bindWithEvent( tab )
		});
		
	});
}


function initPanoramioLayout( )
{
	// initialize mouseover auteur
	var container = document.getElement( '.panoramio .normal' );
	var author = container.getElement( '.auteur' );
	
	// initialize tween effect and hide label
	var myFx = new Fx.Tween( author, {property: 'opacity'});
	myFx.set( 0 );
	
	// initialize events
	container.addEvents({
		
		"mouseover": function( event ) {
			myFx.cancel().start( 1 );
		},
		"mouseout": function( event ) {
			myFx.cancel().start( 0 );
		}
	});	
}


function showPanoramioPhoto( photo_file_url, photo_url, owner_url, owner_name, photo_title )
{
	var container = document.getElement( '.panoramio .normal' ); 
	var linkElm = container.getElement( 'a' );
	var imgElm = linkElm.getElement('img');
	var overlay = container.getElement( 'div.fotolader' );
	var author = container.getElement( 'div.auteur a' );
	
	// update image
	imgElm.loaded = false;
	linkElm.set( "href", photo_url );
	imgElm.set( "src", photo_file_url );
	imgElm.set( "alt", photo_title );
	imgElm.set( "title", photo_title );
	author.set( "href", owner_url );
	author.set( "html", owner_name );
	
	// initialize delay for loading image tekst
	var myDelay = function( ) {
		if ( !imgElm.loaded ) overlay.setStyle( "display", "block" );
	}.delay( 200 );
	
	// hide overlay when img is loaded
	if ( ! imgElm.loaderInitialized )
	{
		imgElm.addEvent( "load", function( event ) {
			this.loaded = true;
			
			// add a fade effect to the overlay
			var myFx = new Fx.Tween( overlay, {property: 'opacity'});
			myFx.start(1,0)
			 	.chain( function() {  
			 		overlay.setStyle( "display", "none" );
			 		overlay.setStyle( "opacity", 1 );			    	
			}); 
		}.bindWithEvent( imgElm ));
		imgElm.loaderInitialized = true;
	}
}