/**
 * @COPS
 * v. 1.0
 */

// id de chaque élément du menu  
var nav  = [ '#navhome', '#navgotta', '#navdjs', '#navconcepts', '#navcontact' ];  
$(document).ready(function(){
	setBkgPos();
	
	for ( i = 0; i < nav.length; i++ ) {
		$(nav[i]).bind( 'mouseover', mMouseOver );
		$(nav[i]).bind( 'mouseout', mMouseOut );
		$(nav[i]).bind( 'click', mClick );
	}
	
	for ( i = 0; i < nav.length; i++ ) {
		// l'animation commence avec l'element qui possède la class active
		if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
			$(nav[i])
				.animate({backgroundPosition:'(' + _get2HPos( nav[i] ) +'px -30px}'},"fast",
					function(){ 
						$(this)
							.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 5px)'},"fast")							
							.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px -30px)'},"fast");
						var parent = this;
						$(this)
							.animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px 2px)'},"fast",function(){
											$(parent).animate({backgroundPosition:'(' + _getHPos( this.id ) +'px -122px)'},"fast");
											$(parent).css({backgroundImage: 'url(images/navMenu.jpg)'});
									});
					});
			break;
		}
	}
}); 

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

function _get2HPos( id )
{
	for ( i = 0; i < nav.length; i++ ){
		if ( id == nav[i] ){
			return i*(-151);
		}
	}	
	
	return 0;
}



function setBkgPos()
{
	for ( i = 0; i < nav.length; i++ ){
		$(nav[i]).css({backgroundPosition: i*(-151) + 'px -30px'});
	}
}

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.2 move up the navigation item a bit
		.animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px 5px}'},"fast",
			// this section will be executed after the step.2 is done
			function(){ 
				$(this)
					// step 4. move the navigation item down
					.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px -88px)'},"fast")
					.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px -81px)'},"fast")
					;
				// store the parent element id for later usage
			
			});
}

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({backgroundPosition:'(' + _getHPos( this.id ) +'px -88px )'}, "fast", 
			// this section will be executed after the step.1 is done
			function(){
				// step 3. move navigation item up
				$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px 12px)'}, "fast", 
					// this section will be executed after the step.3 is done
					function(){
						// step 4. move navigation item ot its original position
						$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -35px)'}, "fast");
						$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -30px)'}, "fast");
							// this section will be executed after the step.4 is done
					})
			})
		.css({backgroundImage: 'url(images/navMenu.jpg)', cursor: ''});
}

function mClick(e)
{
	location.href = this.id;
}