$(document).ready(function(){
   	
	// fonts
	$('.fancy_title').lettering();
	$('.combo').lettering('words').children('span').lettering();
		
	$('#nav a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate(
				{backgroundPosition:"(0 -100px)"}, 
				{duration:500})
			})
		.mouseout(function(){
			$(this).stop().animate(
				{backgroundPosition:"(0 0)"}, 
				{duration:500})
			})
	
	
	$('#casa a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate(
				{backgroundPosition:"(-105px 0)"}, 
				{duration:400})
			})
		.mouseout(function(){
			$(this).stop().animate(
				{backgroundPosition:"(0 0)"}, 
				{duration:800})
			})

	$('button')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate(
				{backgroundPosition:"(258px 140px)"}, 
				{duration:800})
			})
		.mouseout(function(){
			$(this).stop().animate(
				{backgroundPosition:"(0 0)"}, 
				{duration:800})
			})


	$('.projects section h4:nth-child(4)').css('padding-top', '12px');

	$('.about p:even').css('padding','20px 0');
	$('.about p:first-child').css('padding-top','0');
	$('.about footer p').css('padding-top', '40px');
	$('.about footer a').css({'padding-top':'40px', 'color':'#999999'});
	$('#contact-form p:nth-child(4)').css('width','100%');


	/* expanding menu */
	$(function() {
	var $menu				= $('#ei_menu > ul'),
		$menuItems			= $menu.children('li'),
		$menuItemsImgWrapper= $menuItems.children('a'),
		$menuItemsPreview	= $menuItemsImgWrapper.children('.ei_preview'),
		totalMenuItems		= $menuItems.length,
	
		ExpandingMenu 	= (function(){
			var current				= 4,
			anim				= true,
			validCurrent		= function() {
				return (current >= 0 && current < totalMenuItems);
			},
			init				= function() {
				if(validCurrent())
					configureMenu();

				initEventsHandler();
			},
			configureMenu		= function() {
				var $item	= $menuItems.eq(current);
				if(anim)
					slideOutItem($item, true, 900, 'easeInQuint');
				else{
					$item.css({width : '400px'})
					.find('.ei_image')
					.css({left:'0px', opacity:1});

						$menuItems.not($item)
								  .children('.ei_preview')
								  .css({opacity:0.2});
				}
			},
			initEventsHandler	= function() {

				$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
					var $this 	= $(this).parent(),
					idx		= $this.index();

					if(current === idx) {
						slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
						current = -1;
					}
					else{
						if(validCurrent() && current !== idx)
								slideOutItem($menuItems.eq(current), false, 250, 'jswing');

						current	= idx;
							slideOutItem($this, true, 250, 'jswing');
					}
					return false;
				});
			},
				openItem			= function(idx) {
					$menuItemsImgWrapper.eq(idx).click();
				},

			slideOutItem		= function($item, dir, speed, easing, mLeave) {
				var $ei_image	= $item.find('.ei_image'),

				itemParam	= (dir) ? {width : '400px'} : {width : '75px'},
				imageParam	= (dir) ? {left : '0px'} : {left : '75px'};


				if(dir)

					$menuItemsPreview.stop()
				.animate({opacity:0.1}, 1000);
				else if(mLeave)
					$menuItemsPreview.stop()
				.animate({opacity:1}, 1500);

					/* the <li> expands or collapses */
				$item.stop().animate(itemParam, speed, easing);
					/* the image (color) slides in or out */
				$ei_image.stop().animate(imageParam, speed, easing, function() {
						/*
						if opening, we animate the opacity to 1,
						otherwise we reset it.
						*/
					if(dir)
						$ei_image.animate({opacity:1}, 2000);
					else
						$ei_image.css('opacity', 0.2);
				});
			};

			return {
				init 		: init,
				openItem	: openItem
			};
		})();
		
	/*
	call the init method of ExpandingMenu
	*/
	ExpandingMenu.init();
	}); 


 
});