var site_url = 'http://development.matthew.intunet/intunet-new-site/';
//var nav  = [ '#bespoke', '#ecommerce', '#programming', '#marketing' ];
var img  = [ 'home-culina.jpg', 'home-extracair.jpg', 'home-culina.jpg' ];
var nav  = [ '.client1' ];

$(document).ready(function(){
	
	for ( i = 0; i < nav.length; i++ ) {
		$(nav[i]).bind( 'mouseenter', mMouseOver );
		$(nav[i]).bind( 'mouseleave', mMouseOut );
		$(nav[i]).bind( 'click', mClick );
		$(nav[i]).children('.maincontent').hide();
		$(nav[i]).css({width:'220px'});
		//$(nav[i]).animate({width:'220px'},400);
	}
	
	for ( i = 0; i < nav.length; i++ ) {
		// element with ‘active’ class will  start animation 
		if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
			$(nav[i])
				.animate({ width:'220px'},"fast",
					function(){ 
						$(this)
							.children()
								.animate({width:'220px'},200)
								.animate({width:'220px'},"fast");
						$(this)
							.animate({width:'220px'},"fast")
							.animate({width:'220px'},"fast");
						var parent = this;
						$(this)
							.children()
								.animate( {width:'220px'},"fast",function(){
											$(parent).animate({width:'220px'},"fast");
											//$(parent).css({backgroundImage: 'url(images/'+img[i]+')', backgroundRepeat: 'no-repeat'});
									});
								
					});
		
			break;
		}
	}
}); 

function _getHPos( id )
{
	for ( i = 0; i < nav.length; i++ ){
		if ( '#' + id == nav[i] ){
			return i*(0);
		}
	}	
	
	return 0;
}

function mMouseOver(e)
{
	// element with ‘active’ class will ignore this event and do nothing
	if ( this.className.indexOf('active') >= 0  ){
		return;
	}
	
	$(this)
		// stop any animation that took place before this
		.stop()
		
		// step.1 move up the navigation item a bit
		.animate({ width:'440px'},200,
		
			// this section will be executed after the step.1 is done
			function(){ 
				$(this)
					.children()
						// step. 2 move the white box down
						.animate({},400)
						// step 3. move the white box down
						.animate({},"slow");
				$(this)
					// step 3. move the navigation item down
					.animate({width:'440px'},"fast");
					// step 4. move the navigation item to its final position
					//.animate({height:'155px'},"fast");
				$(this)
					// step 3. move the navigation item down
					.css({width:'440px'});
				// store the parent element id for later usage
				var parent = this;
				$(this)
					.children()
						// step 5. move the white box to its final position
						.animate( {},"fast",
							// this section will be executed after the step.5 is done
							function(){
								// step.6 change the image to its original image	
								//$(parent).css({backgroundImage: 'url(images/'+img[i]+')', backgroundRepeat: 'no-repeat'});
								
							});
			
			})
		.css({cursor: 'pointer'});
		$(this).children('.maincontent').show();
		$(this).children('.maincontent').css({opacity:'0'});
		//$(this).children('.maincontent').css({z-index:'100000000'});
}

function mMouseOut(e)
{			
	// element with ‘active’ class will ignore this event and do nothing
	if ( this.className.indexOf('active') >= 0  ){
		return;
	}
	
	$(this)
		// stop any animation that took place before this
		.stop()
		// step.1 move down navigation item
		.animate({width:'220px'}, "fast", 
			// this section will be executed after the step.1 is done
			function(){
				// step.2 white box move really fast
				$(this).children().animate({}, "fast");
				// step 3. move navigation item up
				$(this).animate( {width:'220px'}, "fast", 
					// this section will be executed after the step.3 is done
					function(){
						// step 4. move navigation item ot its original position
						$(this).animate( {width:'220px'}, "fast",
							// this section will be executed after the step.4 is done
							function(){
								// move white box to its original position, ready for next animation
								$(this).children('.maincontent').hide();
								$(this).children('.maincontent').css({opacity:'0'});
							})
					})
			})
		.css({/*backgroundImage: 'url(images/'+img[i]+')', */cursor: '', backgroundRepeat: 'no-repeat'});
}

function mClick(e)
{
	location.href = $(this).find("a").attr("href");
}