var readystate = 1;

function assignImages(i)
{
		url = "images/" + i + ".png";
		$('#menu > li').css({'background-image': 'url(' + url + ')'});
}

function readNewPage(urlstr,tardiv)
{
	var querystring = "";
		 $.ajax({
		   type: "GET",
		   url: urlstr,
		   data: querystring,
		   success: function(html){	
				$("#" + tardiv).html(html);	
		   }
	 });		
}

function readAnchor()
{
	var myFile = document.location.toString();
	if (myFile.match('#')) { // the URL contains an anchor
	  // click the navigation item corresponding to the anchor
	  var myAnchor = myFile.split('#')[1];
	  return myAnchor;
	} 
}


function toBone()
{
	//setTimeout('$("#menuWrapper").fadeOut(300);',2000);
	//setTimeout("$('#menuWrapper').animate({	opacity: 0.01	  });",1300);
	return true;
}

function recoverState()
{
	readystate = 1;
}

function fadeInPage()
{
	var elementCount = $("body").find(".vertraging").length;		   
	if (elementCount>0) {
		setTimeout("appearPage(" + elementCount + ",0);",600);
	}		
}

jQuery.fn.fadeInn = function(speed, callback) { 
    return this.animate({opacity: 'show'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 

function appearPage(elementCount,clicker)
{
	if (elementCount>0) {
		if (clicker>0) {
			$('#bg' + clicker).trigger('click');
		}
		for (var i=0;i<elementCount;i++) 
		{			
			$("body .vertraging:eq(" + i + ")").fadeInn(i*400);		
		}
	}	
}

function toggleBackEffect()
{
		$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0);	
		$('#nav1').stop().animate({backgroundPosition:"(0 0)"},400);
		$('#nav2').stop().animate({backgroundPosition:"(-332px 0)"},300);
		$('#nav3').stop().animate({backgroundPosition:"(-664px 0)"},200);	
}

function switchFoto(url)
{
		$('#menu > li').css({'background-image': 'url(' + url + ')'});
		toggleBackEffect();	
}

function move(dir,item,current){	
	$("#nav li a").removeClass('active');
	var url = readAnchor();
	$("#mycontent").html();
	readNewPage(url + '.html','mycontent');
	if(dir){
		$('#nav1').stop().animate({backgroundPosition:"(0 0)"},400);
		$('#nav2').stop().animate({backgroundPosition:"(-332px 0)"},300);
		$('#nav3').stop().animate({backgroundPosition:"(-664px 0)"},200,function(){
				setTimeout('$(".switchablecontent").fadeInn(600);',700);
		});
	}
	else{
		$('#nav2').stop().animate({backgroundPosition:"(-332px 0)"},400);
		$('#nav1').stop().animate({backgroundPosition:"(0 0)"},600,function(){
			$(".switchablecontent").fadeInn(300);
		});						
		$('#nav3').stop().animate({backgroundPosition:"(-664px 0)"},600);
	}	
	$("#nav li a:eq(" + current + ")").addClass('active');	
	setTimeout("recoverState();",1000);
}
$().ready(function() {	
				   

				   
	$(function() {
                /* position of the <li> that is currently shown */
                var current = 0;				
				var loaded  = 0;
				var imgCount = $("body").find("img").length;	
				for(var i = 1; i <imgCount; ++i)
					$('<img />').load(function(){
						++loaded;
						if(loaded){
							$('#nav a').click(function(e){
								if (readystate==0) return;
								readystate = 0;
								var $this = $(this);
								assignImages($this.parent().index()+1);
								/* if we hover the current one, then don't do anything */
								
								if($this.parent().index() == current)
								{
									readystate = 1;
									return;
								}								
								
								$(".switchablecontent").hide();
								

								/* item is bg1 or bg2 or bg3, depending where we are hovering */
								var item = e.target.id;
								current = $this.parent().index();

									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
										$(this).find('li').hide();
									});

									if(item != 'bg100'){
										$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5 bg6 bg7 bg8 bg9').addClass(item);
										setTimeout('move(1,\'' + item + '\',\'' + current + '\');',100);									
									} else {
									/* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
									$('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5 bg6 bg7 bg8 bg9').addClass(item);
										move(0,item,current);
									}

								
								/* change the current element */
								
								$('#content').removeClass('bg1 bg2 bg3 bg4 bg5 bg6 bg7 bg8 bg9').addClass(item);
								/* let's make the overlay of the current one appear */
							   
								$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
									$(this).find('li').fadeInn();
								});
							});
						}	
					}).attr('src', 'images/'+i+'.png');
						

            });



});