/* Copyright (C) 2007 - 2011 YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

jQuery(function($){
		
	/* Accordion menu */
	$('.menu-accordion').accordionMenu({ mode:'slide' });
	
	var level1colors = [];
	
	$("#menu").find("li.level1").each(function(){
		
		var li = $(this);
		
		for(var item in Warp.Settings.itemColors){
			if(li.hasClass(item)) {
				
				li.addClass(Warp.Settings.itemColors[item]);
				level1colors.push(Warp.Settings.itemColors[item]);
				if(li.hasClass('active')){
					Warp.Settings.color = Warp.Settings.itemColors[item];
					$('#page').addClass(Warp.Settings.itemColors[item]);
				}
			}
		}
	});
	
	var fancyBgColor = null;
	
	/* Dropdown menu */
	$('div#menu').dropdownMenu({ mode: 'height', 
								 fancy: { 
									mode: 'fade', 
									duration: 500,
									onEnter: function(current, index, fancy){
										fancyBgColor = "bg-"+level1colors[index];
										fancy.addClass(fancyBgColor);
									},
									onLeave: function(current, index, fancy) {
										if(fancyBgColor) fancy.removeClass(fancyBgColor);
									}
							   }
	});
	
	/* Morph: level1 items of main menu (tab) */
	var enterColorRed = '#ff0000';
	var enterColorBlue = '#5ae1f0';
	var enterColorPink = '#FF82FF';
	var enterColorOrange = '#f59641';
	var enterColorGreen = '#c3e63c';
	var enterColorYellow = '#ffdc57';
	var enterColorLilac = '#956ce8';
	var enterColorTurquoise = '#45f4d4';
	
	var leaveColor = '#ffffff';

	var menuEnterRed = { 'color': enterColorRed };
	var menuEnterBlue = { 'color': enterColorBlue };
	var menuEnterPink = { 'color': enterColorPink };
	var menuEnterOrange = { 'color': enterColorOrange };
	var menuEnterGreen = { 'color': enterColorGreen };
	var menuEnterYellow = { 'color': enterColorYellow };
	var menuEnterLilac = { 'color': enterColorLilac };
	var menuEnterTurquoise = { 'color': enterColorTurquoise };
	
	var menuLeave = { 'color': leaveColor };
	
	$('div#menu li.red').morph(menuEnterRed, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, '.level1');
	
	$('div#menu li.blue').morph(menuEnterBlue, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, '.level1');
	
	$('div#menu li.pink').morph(menuEnterPink, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, '.level1');
	
	$('div#menu li.orange').morph(menuEnterOrange, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, '.level1');
	
	$('div#menu li.green').morph(menuEnterGreen, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, '.level1');
	
	$('div#menu li.yellow').morph(menuEnterYellow, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, '.level1');
	
	$('div#menu li.lilac').morph(menuEnterLilac, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, '.level1');
	
	$('div#menu li.turquoise').morph(menuEnterTurquoise, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, '.level1');
	
	/* Morph: level2 and deeper items of main menu (drop down) */
	$('div#menu li.red ul.level2 a').morph(menuEnterRed, menuLeave,
		{ transition: 'easeOutExpo', duration: 300},
		{ transition: 'easeInSine', duration: 500 });
	
	$('div#menu li.blue ul.level2 a').morph(menuEnterBlue, menuLeave,
		{ transition: 'easeOutExpo', duration: 300},
		{ transition: 'easeInSine', duration: 500 });
	
	$('div#menu li.pink ul.level2 a').morph(menuEnterPink, menuLeave,
		{ transition: 'easeOutExpo', duration: 300},
		{ transition: 'easeInSine', duration: 500 });
	
	$('div#menu li.orange ul.level2 a').morph(menuEnterOrange, menuLeave,
		{ transition: 'easeOutExpo', duration: 300},
		{ transition: 'easeInSine', duration: 500 });
	
	$('div#menu li.green ul.level2 a').morph(menuEnterGreen, menuLeave,
		{ transition: 'easeOutExpo', duration: 300},
		{ transition: 'easeInSine', duration: 500 });
	
	$('div#menu li.yellow ul.level2 a').morph(menuEnterYellow, menuLeave,
		{ transition: 'easeOutExpo', duration: 300},
		{ transition: 'easeInSine', duration: 500 });
	
	$('div#menu li.lilac ul.level2 a').morph(menuEnterLilac, menuLeave,
		{ transition: 'easeOutExpo', duration: 300},
		{ transition: 'easeInSine', duration: 500 });
	
	$('div#menu li.turquoise ul.level2 a').morph(menuEnterTurquoise, menuLeave,
		{ transition: 'easeOutExpo', duration: 300},
		{ transition: 'easeInSine', duration: 500 });
	
	
	/* Morph: level1 subline of main menu (tab) */
	enterColorRed = '#C8001E';
	enterColorBlue = '#00BED2';
	enterColorPink = '#C800C8';
	enterColorOrange = '#DC5000';
	enterColorGreen = '#78C800';
	enterColorYellow = '#FFC800';
	enterColorLilac = '#6432C8';
	enterColorTurquoise = '#00DCB4';
	
	leaveColor = '#ffffff';

	menuEnterRed = { 'color': enterColorRed };
	menuEnterBlue = { 'color': enterColorBlue };
	menuEnterPink = { 'color': enterColorPink };
	menuEnterOrange = { 'color': enterColorOrange };
	menuEnterGreen = { 'color': enterColorGreen };
	menuEnterYellow = { 'color': enterColorYellow };
	menuEnterLilac = { 'color': enterColorLilac };
	menuEnterTurquoise = { 'color': enterColorTurquoise };
	
	$('div#menu li.red').morph(menuEnterRed, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, 'span.subtitle');
	
	$('div#menu li.blue').morph(menuEnterBlue, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, 'span.subtitle');
			
	$('div#menu li.pink').morph(menuEnterPink, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, 'span.subtitle');
	
	$('div#menu li.orange').morph(menuEnterOrange, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, 'span.subtitle');
	
	$('div#menu li.green').morph(menuEnterGreen, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, 'span.subtitle');
	
	$('div#menu li.yellow').morph(menuEnterYellow, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, 'span.subtitle');
	
	$('div#menu li.lilac').morph(menuEnterLilac, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, 'span.subtitle');
	
	$('div#menu li.turquoise').morph(menuEnterTurquoise, menuLeave,
		{ transition: 'linear', duration: 500},
		{ transition: 'easeInSine', duration: 500 }, 'span.subtitle');
	
	/* Morph: sub menu (left) */
	switch (Warp.Settings.color) {
		case "blue":		var enterColor = '#5ae1f0';
							break;

		case "pink": 		var enterColor = '#FF82FF';
							break;
	 
		case "orange": 		var enterColor = '#f59641';
							break;
	 
		case "green":	 	var enterColor = '#c3e63c';
							break;
						
		case "yellow":		var enterColor = '#ffdc57';
							break;
						
		case "lilac":		var enterColor = '#956ce8';
							break;
						
		case "turquoise":	var enterColor = '#45f4d4';
							break;
	 
		default: 			var enterColor = '#ff0000';
	  }


	var leaveColor = '#ffffff';
	var submenuEnter = { 'color': enterColor};
	var submenuLeave = { 'color': leaveColor};

	$('div#left ul.menu a, div#left ul.menu span.separator').morph(submenuEnter, submenuLeave,
		{ transition: 'easeOutExpo', duration: 300 },
		{ transition: 'easeInSine', duration: 500 });

	var enterColor = '#000000';
	var leaveColor = '#646464';
	var submenuEnter = { 'color': enterColor};
	var submenuLeave = { 'color': leaveColor};

	$('div#right ul.menu a, div#right ul.menu span.separator').morph(submenuEnter, submenuLeave,
		{ transition: 'easeOutExpo', duration: 300 },
		{ transition: 'easeInSine', duration: 500 });

	/* Smoothscroll */
	$('a[href="#page"]').smoothScroller({ duration: 500 });

	/* Match height of div tags */
	$('div.topbox div.deepest').matchHeight(40);
	$('div.bottombox div.deepest').matchHeight(40);
	$('div.maintopbox div.deepest').matchHeight(40);
	$('div.mainbottombox div.deepest').matchHeight(40);
	$('div.contenttopbox div.deepest').matchHeight(40);
	$('div.contentbottombox div.deepest').matchHeight(40);

});