var Harmonica = Class.create(
{
    initialize: function(id, offsetchildmenu) 
    {
        this.harmonica 	= $(id);
        this.contents 	= this.harmonica.childElements();
        this.menuitems 	= new Array();
        this.lastkey	= 0;
        this.firstkey	= 0;
        // paar van te voren in te vullen variabelen.
        this.offsetchildmenu				= offsetchildmenu;
        this.newpos 						= 0;
        this.parentwidth 					= 0;
        this.menumaxwidth 					= 0;
        this.menuheight						= 0;
        this.menuminwidth					= 0;
        this.childmenustartingpoint			= 0;
        this.childitemdistance				= 0;
        
        this.calculateHeightAndWidths();
        
        this.hideAllBrands();
        this.gatherAllMenuItems();
        this.positionMenuItems();
        
        //positionactive;
        this.positionActiveMenuItem();
        this.attachBehaviour();
      
    },
    calculateHeightAndWidths: function()
    {
    	// eerste de breedte, dit is de eerste ul uit navigation
    	var firstul 		= $('navigation').select('ul').first();
    	
    	this.menumaxwidth 	= firstul.getWidth();
    	this.menuheight		= firstul.getHeight();
    	this.parentwidth	= firstul.select('li').first().getWidth();
    	
    	this.childmenustartingpoint = (firstul.getHeight() - this.offsetchildmenu);
    },
    gatherAllMenuItems: function()
    {
    	this.contents.each(function(item, i)
		{
    		var menuitem 	= new MenuItem(item.id.split('_').last());
    		menuitem.name 	= this.stripAndCleanString(item.select('a').first().innerHTML);
    		menuitem.mykey	= i;
    		
    		if(item.select('ul').size() > 0)
    		{
    			menuitem.haschildren = true;
    			menuitem.childrenul = item.select('ul').first().id;
    			var childlist = item.select('ul').first().childElements().each(function(childitem)
				{
    				var childmenuitem = new MenuItem(childitem.id.split('_').last());
    				childmenuitem.name = this.stripAndCleanString(childitem.select('a').first().innerHTML);
    				this.childitemdistance = childitem.getHeight();
    				
    				menuitem.children.push(childmenuitem);
				}.bind(this));
    		}
    		this.lastkey = i;
    		this.menuitems.push(menuitem);
		}.bind(this));
    },
    positionActiveMenuItem: function()
    {
    	this.menuitems.each(function(item)
    	{
    		if($('item_'+item.id).hasClassName('active'))
    		{
    			this.repositionMenuItems(item, false);
    			this.showSubmenu(item, false);
    			// nu nog even de active plaat setten
    			
//    			$(item.name+'_bigpic').show();
    			this.replaceBigPictures(item, false);
    			$('img_'+item.id).src = '/images/'+item.name+'_active.png';
    			
    		}
    	}.bind(this));
    },
    positionMenuItems: function()
    {
    	var flag = false;
    	
    	this.menuitems.each(function(item)
		{   
    		var anchortag = $('item_'+item.id).select('a').first();
    		anchortag.update('');
    		
    		var node = Builder.node('img', { id: 'img_'+item.id, className: 'toggle', src: '/images/'+item.name+'.png'});
    		
    		$('item_'+item.id).setStyle({left: this.newpos+'px'});
    		item.positionx = this.newpos;
    		this.newpos = this.newpos + this.parentwidth;
    		
    		if(item.haschildren)
    		{
    			$('item_'+item.id).select('ul').first().hide();
    		}
    		anchortag.appendChild(node);
    		
		}.bind(this)		
    	);
    	
    },
    repositionMenuItems: function(menuitem, effect)
    {
    	var numbertorepositionright = this.lastkey - menuitem.mykey;
    	var numbertorepositionleft = menuitem.mykey - this.firstkey;

    	var positionxright	= this.menumaxwidth -(numbertorepositionright * this.parentwidth);

    	this.menuitems.each(function(item)
		{
    		if(item.isleft)
    		{
    			// dan moet die naar rechts verschuiven
    			if(item.mykey > menuitem.mykey)
	    		{
	    			item.isleft = false;
	    			
	    			item.positionx = positionxright;
	    		
	    			if(effect)
	    			{
		    			new Effect.Move($('item_'+item.id), 
		    				{
		    				  x: item.positionx, y: 0, mode: 'absolute', duration: 0.7,
		    				  transition: Effect.Transitions.sinoidal
		    				});
	    			}
	    			else
	    			{
	    				$('item_'+item.id).setStyle({left: item.positionx+'px'});
	    			}
    			
	    			positionxright = positionxright + this.parentwidth;
	    		}
    		}
    		else
    		{
    			// dan naar links
    			if(item.mykey <= menuitem.mykey)
	    		{
    				var positionxleft =  this.menuminwidth + (item.mykey * this.parentwidth);
    				
    				item.isleft = true;
    				item.positionx = positionxleft;
    				
    				new Effect.Move($('item_'+item.id), 
    	    				{
    	    				  x: item.positionx, y: 0, mode: 'absolute', duration: 0.7,
    	    				  transition: Effect.Transitions.sinoidal
    	    				});
	    		}
    		}
		}.bind(this));
    },
    hideAllSubmenus: function(menuitem)
    {
    	this.menuitems.each(function(item)
		{
	    	if(!item.childrenul.empty() && item.id != menuitem.id)
	    	{
	    		if($(item.childrenul).getStyle('display') == 'block')
	    		{
	    			Effect.BlindLeft(item.childrenul, { duration: 0.7});
	    		}
	    	}
		});
    },
    showSubmenu: function(item, effect)
    {
    	if(!item.childrenul.empty())
    	{
    		$(item.childrenul).setStyle({left: this.parentwidth+'px'});
    		
//    		if(item.children.size() == 1)
//    		{
//    			alert(this.childmenustartingpoint+' <--> '+this.menuheight+'<-->'+this.childitemdistance+'<-->'+this.offsetchildmenu);
//    			var ulpositiony = this.childmenustartingpoint - this.childitemdistance;
//    		}
//    		else
//    		{
    			var ulpositiony = this.childmenustartingpoint - (item.children.size() * this.childitemdistance);
//    		}

    		var newheight = this.menuheight - ulpositiony;
    		
    		$(item.childrenul).setStyle({paddingTop: ulpositiony+'px'});
    		$(item.childrenul).setStyle({height: newheight+'px'});
    		    		
    		if(effect)
    		{
    			Effect.BlindRight(item.childrenul, { duration: 0.7});
    		}
    		else
    		{
    			$(item.childrenul).show();
    		}
    	}
    },
    hideAllBrands: function()
    {
    	$$('img.brand').each(function(img)
    			{
    				img.hide();
    			}.bind(this));
    },
    replaceBrands: function(item)
    {
    	var imagetoappear = item.name+'_brand';
    	
    	$$('img.brand').each(function(img)
				{
					var opacityimg = img.getStyle('display');
					if(img.id != imagetoappear)
					{
						if(opacityimg != 'none')
						{
							img.hide();
						}
					}
				}
			);
    	
    	var opacityfromimage = $(imagetoappear).getStyle('display');

		if(opacityfromimage == 'none')
		{
			$(imagetoappear).show();
		}
    },
    replaceBigPictures: function(item, effect)
    {
    	var imagetoappear = $(item.name+'_bigpic') ? item.name+'_bigpic' : 'default_bigpic';
    	
    		if($('overlaypic'))
    		{
    	    	if(imagetoappear != 'default_bigpic')
    	    	{
    	    		$('overlaypic').hide();
//    	    		Effect.Appear('overlaypic', { duration: 0.7, from: 1.0, to: 0.0 });
    	    	}
    	    	else
    	    	{
    	    		$('overlaypic').show();
    	    	}
    		}
    	
    	
    		$$('img.grand').each(function(img)
    				{
    					var opacityimg = img.getStyle('opacity');
    					if(img.id != imagetoappear)
						{
    						if(opacityimg != 0)
    						{
    							if(effect)
    							{
    								Effect.Appear(img.id, { duration: 0.7, from: 1.0, to: 0.0 });
    							}
    							else
    							{
    								$(img.id).setStyle({opacity: 0});
    							}
    						}
						}
    				}
    			);
		var opacityfromimage = $(imagetoappear).getStyle('opacity');

		if(opacityfromimage == 0)
		{
			if(effect)
			{
				Effect.Appear(imagetoappear, { duration: 0.7, from: 0.0, to: 1.0 });
			}
			else
			{
				$(img.id).setStyle({opacity: 1});
			}
		}
    },
    attachBehaviour: function()
    {
    	this.menuitems.each(function(item)
		{	
    		Event.observe('img_'+item.id, 'click', this.clickHandler.bindAsEventListener(this, item));
    		Event.observe('img_'+item.id, 'mouseover', this.mouseHandler.bindAsEventListener(this, item));
    		Event.observe('img_'+item.id, 'mouseout', this.mouseHandler.bindAsEventListener(this, item));
    		
		}.bind(this));
    	
    },
    stripAndCleanString: function(string)
    {
    	var reg = new RegExp('[^a-zA-Z0-9]');
    	var tempname = string.gsub(reg, '%');
		var name = tempname.gsub(/%/,'');
		return name.toLowerCase();
    },
    
    clickHandler: function(event, item)
    {
    	event.stop();

    	item.active = true;
    	$('item_'+item.id).select('a').first().blur();
    	
    	if(!$('img_'+item.id).hasClassName('active'))
    	{
			this.menuitems.each(function(menuitem)
			{
				if($('img_'+menuitem.id).hasClassName('active') || $('item_'+menuitem.id).hasClassName('active'))
				{
		    		$('img_'+menuitem.id).removeClassName('active');
		    		$('img_'+menuitem.id).src = '/images/'+menuitem.name+'.png';
				}
			}.bind(this));
			
			event.element().src = '/images/'+item.name+'_active.png';
			event.element().addClassName('active');
			
			this.hideAllSubmenus(item);
			this.repositionMenuItems(item, true);
			this.showSubmenu(item, true);
			this.replaceBigPictures(item, true);
    	}
    	
    },
    mouseHandler: function(event, item)
    {
    	switch(event.type)
    	{
    		case 'mouseover':
    			
    			this.replaceBrands(item);
    			// alle images die hover class hebben behalve deze en diegene die actief is
    			event.element().addClassName('hover');
    			
    			this.menuitems.each(function(menuitem)
				{
    				if('img_'+menuitem.id != event.element().id)	
    				{
    					$('img_'+menuitem.id).removeClassName('hover');	
    						    				
						if(!$('img_'+menuitem.id).hasClassName('active') && !$('item_'+menuitem.id).hasClassName('active'))
	        			{
							$('img_'+menuitem.id).src = '/images/'+menuitem.name+'.png';	
	        			}
        			}
    				
				}.bind(this));
    			
    			event.element().src = '/images/'+item.name+'_active.png';
    			
    		break;
    		
    		case 'mouseout':
    			this.hideAllBrands();
    			// dan moet de image weer op normaal staan behalve als die class active heeft.
    			this.menuitems.each(function(menuitem)
    					{
    						if(!$('img_'+menuitem.id).hasClassName('active') && !$('item_'+menuitem.id).hasClassName('active'))
		        			{
    							$('img_'+menuitem.id).removeClassName('hover');
    							$('img_'+menuitem.id).src = '/images/'+menuitem.name+'.png';
		        			}
    					}.bind(this));
    			
    		break;
    	}
    }
});

var MenuItem = Class.create(
{
	initialize: function(id)
	{
		this.id = id;
		this.name;
		this.replacingimg;
		this.largebgimage;
		this.haschildren 	= false;
		this.childrenul		= '';
		this.children 		= new Array();
		this.positionx;
		this.mykey;
		this.isleft 		= true;
		this.active			= false;
	}
}

);


document.observe("dom:loaded", function()
{
    harmonica = new Harmonica("list_topmenu", 30);
});