  $(document).ready(function(){
 
    $(".backpack").hover(
        function(){$(this).attr('src','inc/img/backpack2.png')},
        function(){$(this).attr('src','inc/img/backpack.png')
    });
    $(".rugzakpos").hover(
        function(){$(".rugzakpos .backpack").attr('src','inc/img/backpack2.png')},
        function(){$(".rugzakpos .backpack").attr('src','inc/img/backpack.png')
    });
    $("#xtra1").hover(
        function(){$("#xtra1 .xtra1").attr('src','inc/img/xtra1-h.jpg')},
        function(){$("#xtra1 .xtra1").attr('src','inc/img/xtra1.jpg')
    });
    lastBlock = $("#a1");
    maxWidth = 400;
    minWidth = 112;	
	$(".rugzakpos").hide();
	$(lastBlock).find(".rugzakpos").show();

    $("ul li div").click(
      function(){
	  $(".rugzakpos").hide();
        $(lastBlock).animate({width: minWidth+"px", queue:false}, 400, 'swing');
		$(this).animate({width: maxWidth+"px", queue:false}, 400, function(){ $(this).find(".rugzakpos").show(); } );
		lastBlock = this;
		$("#slogan").text("Straight to the point!");
      }
    );
	
	var myFile = document.location.toString(); 
	if (myFile.match('#')) { 
	// if match goto tab 
	id = myFile.split('#').pop(); 
		$("ul li div."+id).click();
	} 

	/* Rugzakje item toevoegen */
	var $el = null;
	$('.rugzakpos').click(function(){
		$el = $(this);
		$.post(
			'back.pack',
			{ id: $(this).find('img').attr('id'), func: 'add' },
			function(data, textStatus){  
				$el.html("<strong>Dit item is toegevoegd!</strong>");
			},
			'json'
		);
	});
	
	/* Rugzakje legen */

	$('.emptybp').click(function(){
		$el = $(this);
		$.post(
			'back.pack',
			{ func: 'clear' },
			function(data, textStatus){		
				$el.parent().parent().remove();
			},
			'json'
		);
	});
	
    $('#anim img').css({'width':'505px'}).stop().animate({'opacity':'1.0','width':'-=100px','top':'0px','left':'0px'},5000);
    
    slideShow(1);
});
var images = {1: 'left_01.jpg', 2: 'left_02.jpg', 3:'left_03.jpg' }
function slideShow(img){
	new_img = (img < 3 ? img+1 : 1);
    $img = $('<img src="intro/'+images[img]+'" alt="" title="" style="position:absolute"/>').hide();
	$('#holder').append($img);
    $('#holder img:last').css({'height':'635px'}).fadeIn("slow").stop().animate({'opacity':'1.0','height':'-=200px','top':'0px','left':'0px'},5000,function(){if($('#holder img').length > 1){$('#holder img:first').remove()}});
    setTimeout('slideShow('+new_img+')', 7000);
}
/*
var images = {1: 'left_01.jpg', 2: 'left_02.jpg', 3:'left_03.jpg' }
function slideShow(img){
	new_img = (img < 3 ? img+1 : 1);
	$('#left').css('background-image', 'url(inc/img/'+images[img]+')').
	find('#holder').hide().css('background-image', 'url(inc/img/'+images[new_img]+')').fadeIn('slow');
	setTimeout('slideShow('+new_img+')', 5000);
}
*/
