var site_url = '';
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];

var nav_ie55 = ($.browser.msie && $.browser.version == '5.5');
var nav_ie6 = ($.browser.msie && $.browser.version == '6.0');

var navigation_nav_image = 'App_Themes/RyanFetzTheme/images/nav.png';
var navigation_nav_over_image = 'App_Themes/RyanFetzTheme/images/nav-over.png';

if (jQuery.browser.msie && (nav_ie55 || nav_ie6)) {
    navigation_nav_image = 'App_Themes/RyanFetzTheme/images/nav.gif';
    navigation_nav_over_image = 'App_Themes/RyanFetzTheme/images/nav-over.gif';
}

$(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++ ) {
        if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
	        $(nav[i])
		        .animate({ backgroundPosition:'(' + _getHPos( $(nav[i]).attr('id') ) +'px -30px}'},"fast",
			        function(){ 
				        $(this)
					        .children()
						        .animate({backgroundPosition:'(0px -40px)'},20)
						        .animate({backgroundPosition:'(0px -20px)'},"fast");
				        $(this)
					        .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")
					        .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 30px)'},"fast");
				        var parent = this;
				        $(this)
					        .children()
						        .animate( {backgroundPosition:'(0px -45px)'},"fast",function(){
									        $(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 30px)'},"fast");
									        $(parent).css({backgroundImage: 'url('+navigation_nav_image+')'});
							        });
			        });
	        break;
        }
    }
}); 

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

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

function mMouseOver(e){
	// element with ‘active’ class will ignore this event and do nothing
	if ( this.className.indexOf('active') >= 0  ){
		return;
	}

	$(this)
		.stop()                                                                                     // stop any animation that took place before this
		.css({backgroundImage: 'url('+navigation_nav_over_image+')',cursor: 'pointer'})             // step 1. change the image file
		.animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",               // step.2 move up the navigation item a bit
			function(){                                                                             // this section will be executed after the step.2 is done
				$(this)
					.children()
						.animate({backgroundPosition:'(0px -40px)'},20)                             // step. 3 move the white box down
						.animate({backgroundPosition:'(0px -20px)'},"fast");                        // step 4. move the white box down
				$(this)
					.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")     // step 4. move the navigation item down
					.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 30px)'},"fast");    // step 5. move the navigation item to its final position
				var parent = this;                                                                  // store the parent element id for later usage
				$(this)
					.children()
						.animate( {backgroundPosition:'(0px -45px)'},"fast",                        // step 5. move the white box to its final position
							function(){                                                             // this section will be executed after the step.5 is done
								$(parent).css({backgroundImage: 'url('+navigation_nav_image+')'});  // step.6 change the image to its original image
							});
			});
}

function mMouseOut(e){			
	// element with ‘active’ class will ignore this event and do nothing
	if ( this.className.indexOf('active') >= 0  ){
		return;
	}

	$(this)
		.stop()                                                                                                 // stop any animation that took place before this
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast",                           // step.1 move down navigation item
			function(){                                                                                         // this section will be executed after the step.1 is done
				$(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");                          // step.2 white box move really fast
				$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast",           // step 3. move navigation item up 
					function(){                                                                                 // this section will be executed after the step.3 is done
						$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",   // step 4. move navigation item ot its original position
							function(){                                                                         // this section will be executed after the step.4 is done
								$(this).children().css({ backgroundPosition:'0px -60px'});                      // move white box to its original position, ready for next animation
							})
					})
			})
		.css({backgroundImage: 'url('+navigation_nav_image+')', cursor: ''});
}

function mClick(e){
	location.href = $(this).children().children().attr('href');;
}