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

(function($){

	$(document).bind('ready', 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);

	});

})(jQuery);