$(function(){
	var photoarray = [
				{image : 'http://cdn.heijmerikx.com/frontpage/0.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/1.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/2.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/3.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/4.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/5.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/6.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/7.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/8.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/9.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/10.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/11.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/12.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/13.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/15.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/16.jpg'},
				{image : 'http://cdn.heijmerikx.com/frontpage/17.jpg'}
			]
	photoarray.sort(function() {return 0.5 - Math.random()}) //Array elements now scrambled

	$.fn.supersized.options = {  
		startwidth: 1024,  
		startheight: 683,
		vertical_center: 1,
		slideshow: 1,
		navigation: 1,
		thumbnail_navigation: 0,
		transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
		pause_hover: 0,
		slide_counter: 0,
		slide_captions: 0,
		slide_interval: 5000,
	 	slides : photoarray
			};
	
    $('#supersized').supersized();
    
    $("a.fancy").fancybox({
    		'transitionIn'	:	'elastic',
    		'transitionOut'	:	'elastic',
    		'speedIn'		:	600, 
    		'speedOut'		:	200, 
    		'overlayShow'	:	true,
    		'overlayColor'  :	'#000'
    	});
    
	var $lefty = $("#controls-wrapper");
    $lefty.delay(600).animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0});
                
    var $bottom = $("#logo");
    $bottom.delay(600).animate({bottom: parseInt($bottom.css('bottom'),10) == 0 ? -$bottom.outerHeight() : 0});
    
	var panelHidden = false;
	
	$(window).resize(function() {
        if (!$panelHidden) 
            $('#panel-1, #panel-2, #panel-3, #panel-4, #panel-5, #panel-6').css({'top': '-100%'});
    });
    
    $('.scroll-pane').jScrollPane();

	$(".btn-1").click(function() { showPanel("1"); loadgallery(); });
	$(".btn-2").click(function() { showPanel("2"); });
	$(".btn-3").click(function() { showPanel("3"); });
	$(".btn-4").click(function() { showPanel("4"); });
	$(".btn-5").click(function() { showPanel("5"); });
	$(".btn-6").click(function() { showPanel("6"); });
	
	$(".close-1").click(function() { hidePanel("1"); });
	$(".close-2").click(function() { hidePanel("2"); });
	$(".close-3").click(function() { hidePanel("3"); });
	$(".close-4").click(function() { hidePanel("4"); });
	$(".close-5").click(function() { hidePanel("5"); });
	$(".close-6").click(function() { hidePanel("6"); });

	//$('#portfolio').tabs();
	
});

function loadgallery() {
	//$.get('portfolio_portret.php', function(data) {
	//  $('#portfolio').html(data);
	//});
	$.ajax({
	  url: "portfolio_portret.php",
	  context: document.body,
	  success: function(data) {
	      $('#portfolio').html(data);
	      
	      $("a.fancy").fancybox({
	      		'transitionIn'	:	'elastic',
	      		'transitionOut'	:	'elastic',
	      		'speedIn'		:	600, 
	      		'speedOut'		:	200, 
	      		'overlayShow'	:	true,
	      		'overlayColor'  :	'#000'
	      	});
	      	
	      $('.scroll-pane').jScrollPane();
	    }
	});
}

function hidePanel(k)
{
    var $topy = $("#panel-" + k);
    $topy.animate({top: parseInt($topy.css('top'),10) == 0 ? -$topy.outerHeight() : 0});
      
    var $lefty = $("#controls-wrapper");
    $lefty.delay(600).animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0});
          
    var $bottom = $("#logo");
    $bottom.delay(600).animate({bottom: parseInt($bottom.css('bottom'),10) == 0 ? -$bottom.outerHeight() : 0});
      
    panelHidden = false;
}

function showPanel(k)
{
    var $topy = $("#panel-" + k);
    $topy.delay(600).animate({top: [ parseInt($topy.css('top'),10) == 0 ? -$topy.outerHeight() : 0, 'easeOutCirc' ]});
    
    var $lefty = $("#controls-wrapper");
    $lefty.animate({left: [ parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0, 'easeOutCirc' ]});
    
    var $bottom = $("#logo");
    $bottom.animate({bottom: parseInt($bottom.css('bottom'),10) == 0 ? -$bottom.outerHeight() : 0});
    
    panelHidden = true;
}