/*---------------------------------------------------------*/
/* MOOTOOLS-Megadropdown for solarlux                      */
/* contens Software, AHE 2011/06                           */
/*---------------------------------------------------------*/
window.addEvent('domready', function(){
	
	//declare variables and some page elements
	var dropstage = $('dropstage');
	var menuholder1 = $('menuholder1');
	var menuholder2 = $('menuholder2');
	var menuholder3 = $('menuholder3');
	var menuholder4 = $('menuholder4');
	var flashstage = $('flash');
	
	/*------------------------------------------------*/
	/*following code is meant to run once on page load*/
	
	//Pick up servicenavigation for a targetgroup
	function getServicenavi (targetgroupsel){
		var makeRequest = new Request.HTML({
			url: fetchurl+targetgroupsel+'/includes/navigation/service/'+targetgroupsel+'.cfm',
			update:$('servicenavi_'+targetgroupsel),
			async:false
		}).send();
	};
			
	//Pick up special object for a targetgroup
       function getSpecialObjects(targetgroupsel){
		var makeRequest = new Request.HTML ({
			url: fetchurl+targetgroupsel+'/includes/navigation/special/special-include-'+targetgroupsel+'.cfm',
			update:$('featureimage_'+targetgroupsel),
			async:false
		}).send();
	};
	
	//fetch service navigations for target groups
	getServicenavi('pub');
	getServicenavi('arc');
	getServicenavi('spe');
	getServicenavi('bui');
	//fetch special objects for target groups
	getSpecialObjects('pub');
	getSpecialObjects('arc');
	getSpecialObjects('spe');
	getSpecialObjects('bui');
	
	/*end of code which runs once on page load        */
	/*------------------------------------------------*/
	
	
	/*------------------------------------------------*/
	/*             megadropdown class                 */

	var megadropdown = new Class({
		Implements: [ Options,Events ],
		options:{
			element:'',
			target: dropstage,
			firstlevel: '',
			feature:'',
			targetgroupsel:'',
			specialdelay:500
		},

		initialize: function initialize(options){
			this.setOptions(options);
			//hide megadropdown on mouse out.
			$('menustage').addEvents({
				mouseleave:function mouseleave() {
					if(flashstage){
						flashstage.getElements('div[id^=flashcontainer]').show();
						flashstage.getElements('div[class=shadow]').show();
					}
					dropstage.hide();
					$$('.menuholder').removeClass('active');
				}
			});
		},
				
		show: function show(){
			this.options.target.show();
			//hide flash stage
			if(flashstage){
				flashstage.getElements('div[id^=flashcontainer]').hide();
				flashstage.getElements('div[class=shadow]').hide();
			}
			this.options.target.innerHTML = this.options.firstlevel;

			//always set first level product items active
			$('3337').addClass('active');
			
			//hide projects sublayer
			if($('level2_3449')){$('level2_3449').hide();}

			// show feature, servicenavi and prepare html-structure for adjacent levels
			this.switchonfeature(this.options.targetgroupsel);
			this.showservicenavi(this.options.targetgroupsel);
			this.addnextlevel();
			
			//init tabstate to "not active"
			$$('.menuholder').removeClass('active');
		},
		
		hide: function hide(){
			//destroy dropdowns content
			this.options.target.innerHTML = '';
		},
		
		
		/*------------------------------------------------*/
		/*             custom functions                   */

		//prepare html-Structure for navi-levels 2-4 when mouse hovers over lvl 1
		addnextlevel: function addnextlevel(){
			var self = this;
			$$('#level1 ul li').addEvents({
				mouseenter:function mouseenter(){
					//remove "active states" of all list items and links of first and second level
					$$('#level1 ul li').removeClass('active');
					$$('#level1 ul li a').removeClass('active');
					self.options.target.getElements('div[id^=level2_] ul li').removeClass('active');
					self.options.target.getElements('div[id^=level2_] ul li a').removeClass('active');
					
					//set the current menu item's state to active
					this.addClass('active');
					this.getElements('a').addClass('active');

					//hide all remaining level2 layers
					self.options.target.getElements('div[id^=level2_]').hide();
					
					//show the correct level2 layer
					$('level2_'+this.id).show();
					$('level3').hide();
					

					//show the correct feature image if it isn't already displayed and empty systemimage, levels 3 and 4
					self.switchonfeature(self.options.targetgroupsel);
					$('systemimage').innerHTML = '';
					$('level3').innerHTML = '';
					$('level4').innerHTML = '';
				}
			});
			
			//hovering over level 2, after a delay, shows levels 3 and 4.
			this.options.target.getElements('div[id^=level2_] ul li').addEvents({
				mouseenter:function mouseenter(){
					//empty systemimage and level4
					$('systemimage').innerHTML = '';
					$('level4').innerHTML = '';
					
					var myID = this.id;
					
					//remove active style from all elements in level 2
					self.options.target.getElements('div[id^=level2_] ul li').removeClass('active');
					self.options.target.getElements('div[id^=level2_] ul li a').removeClass('active');

					//set current navigation item in level2 to active
					this.addClass('active');
					this.getElements('a').addClass('active');
					
					//delayed invocation of switchofffeature function
					self.delayswitch = (function delayswitch(){self.switchofffeature(myID);}).delay(self.options.specialdelay);
					this.store('mouseenter:timer',true);
				},
				mouseleave:function mouseleave(){
					
					//set current item active
					this.addClass('active');
					this.getElements('a').addClass('active');
					
					//reset delay counter
					self.delayswitch = $clear(self.delayswitch);
				}
			}); 
		},
		
		//show featured product
		switchonfeature: function switchonfeature(targetgroupsel){
			
			$('systemimage').innerHTML = '';
			$('featureimage').innerHTML = ''; 			
			//fetch preloaded html for feature image
			$('featureimage').innerHTML = $('featureimage_'+targetgroupsel).innerHTML;
			
			//display feature image
			$('featureimage').show();
			
			//hide levels 3 and 4
			$('submenudiv').show();
			$('level3').hide();
			$('level4').hide();
		},

		//show service navigation
		showservicenavi: function showservicenavi(targetgroupsel){
			$('servicenavi').innerHTML = $('servicenavi_'+targetgroupsel).innerHTML;
		},

		//hides special object and prepares stage for level 3 and 4.
		switchofffeature: function switchofffeature(id){
			
			//empty featureimage
			$('featureimage').innerHTML = '';
			
			//set delay to 0, delay appears only for the first time after the targetgroup is switched
			this.options.specialdelay = 0;

			//fill in data for level 3
			$('level3').innerHTML = eval("$('level3_'+id+'_'+this.options.targetgroupsel)").innerHTML;
			$('level3').show();
			$('level4').show();
			
			var self = this;

			$$('#level3 ul li').addEvents({
				mouseenter:function mouseenter(){
					//reset system image
					$('systemimage').innerHTML = '';

					//remove active state of all level3 menu items
					$$('#level3 ul li').removeClass('active');
					$$('#level3 ul li a').removeClass('active');
					
					///activate state of current level3 menu item
					this.addClass('active');
					this.getElements('a').addClass('active');
					
					//display prepared level 4 items
					$('level4').innerHTML = eval("$('level4_'+this.id+'_'+self.options.targetgroupsel)").innerHTML;
					
					//add events on level4 items
					$$('#level4 ul li').addEvents({
						mouseenter:function mouseenter(){
							
							//remove active state of all level4 menu items
							$$('#level4 ul li').removeClass('active');
							$$('#level4 ul li a').removeClass('active');

							//activate state of current level4 menu item
							this.addClass('active');
							this.getElements('a').addClass('active');
							
							//fetch and display a system-element
							self.switchonsystem(this.id);
						},
						mouseleave:function mouseleave(){
							
							//activate state of current level4 menu item
							this.addClass('active');
							this.getElements('a').addClass('active');
						}
						
					});
				},
				mouseleave:function mouseleave(){
					
					//activate state of current level3 menu item
					this.addClass('active');
					this.getElements('a').addClass('active');
				}
				
			});
		},
		//show system teaser
		switchonsystem: function switchonsystem(path){
			var makeRequest = new Request.HTML ({
				url: fetchurl+this.options.targetgroupsel+'/'+path+'.cfm',
				update:$('systemimage'),
				onComplete:function(response){$('systemimage').show();}
			}).send();
		}
	});
	/*          end megadropdown class                */
	/*------------------------------------------------*/
	
	
	/*------------------------------------------------*/
	/*        prepare tabs for dropdown               */
	
	//Privatkunden
	menuholder1.addEvents({
		mouseenter:function mouseenter() {
			pubmenu = new megadropdown({
				element: menuholder1,
				firstlevel: $('level1_pub').innerHTML,
				targetgroupsel:"pub"
			});
			pubmenu.show();
		},
		mouseleave:function mouseleave(){
			this.addClass('active');
		}
	});
	
	//Architekten
	menuholder2.addEvents({
		mouseenter:function mouseenter() {
			arcmenu = new megadropdown({
				element: menuholder2,
				firstlevel: $('level1_arc').innerHTML,
				targetgroupsel:"arc"
			});
			arcmenu.show();
		},
		mouseleave:function mouseleave(){
			this.addClass('active');
		}
	});
	
	//Fachhandel
	menuholder3.addEvents({
		mouseenter:function mouseenter() {
			spemenu = new megadropdown({
				element: menuholder3,
				firstlevel: $('level1_spe').innerHTML,
				targetgroupsel:"spe"
			});
			spemenu.show();
		},
		mouseleave:function mouseleave(){
			this.addClass('active');
		}
	});
	
	//Wohnungsunternehmen
	if($('menuholder4')){
		menuholder4.addEvents({
			mouseenter:function mouseenter() {
				buimenu = new megadropdown({
					element: menuholder4,
					firstlevel: $('level1_bui').innerHTML,
					targetgroupsel:"bui"
				});
				buimenu.show();
			},
			mouseleave:function mouseleave(){
				this.addClass('active');
			}
		});
	}
	/*       end prepare tabs for dropdown            */
	/*------------------------------------------------*/

});