$(function(){
	var picturearray = [
				{image : 'images/01.jpg', url: 'produktion_tv-spot_WWF01.html',title: '<b>TV Spot <br/>WWF <br/>"Zum Leben geboren"</b> <br/><span style="font-style: italic">Click image to view video</span>'},
				{image : 'images/02.jpg', url: 'postproduktion_imagetrailer_Bravia01.html', title: '<b>Imagetrailer <br/>SONY <br/>"Bravia"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/03.jpg', url: 'postproduktion_imagetrailer_Audi01.html', title: '<b>Imagetrailer <br/>AUDI <br/>"R10"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/04.jpg', url: 'produktion_musikvideo_Kensington01.html', title: '<b>Musikvideo <br/>Kensington Road <br/> "Tired Man"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/05.jpg', url: 'produktion_imagetrailer_Bluray01.html', title: '<b>Imagetrailer <br/>BluRay</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/06.jpg', url: 'produktion_tv-spot_VW01.html', title: '<b>TV Spot (Spec) <br/>"VW Smile"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/07.jpg', url: 'produktion_musikvideo_Admirals01.html', title: '<b>Musikvideo <br/>The Admirals <br/> "Schei&szlig;e Sexy"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/08.jpg', url: 'produktion_imagetrailer_Redbull01.html', title: '<b>Imagetrailer <br/>RED BULL <br/>"X-Fighters"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/09.jpg', url: 'postproduktion_tv-spot_Audi02.html', title: '<b>TV Spot <br/>AUDI <br/>"A4 TDI Power"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/10.jpg', url: 'produktion_musikvideo_Schiller01.html', title: '<b>Musikvideo <br/>Schiller mit Anggun <br/>"Always You"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/11.jpg', url: 'produktion_imagetrailer_Oase01.html', title: '<b>Imagetrailer <br/>BASF <br/>"Oase"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				
				{image : 'images/13.jpg', url: 'produktion_tv-spot_Aids01.html', title: '<b>TV Spots <br/>"AIDS Kampagne 2010"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/14.jpg', url: 'produktion_tv-spot_VW02.html', title: '<b>TV Spot (Spec) <br/>"VW Smile"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/15.jpg', url: 'produktion_tv-spot_VW03.html', title: '<b>TV Spot (Spec) <br/>"VW Smile"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/16.jpg', url: 'produktion_tv-spot_Sinalco01.html', title: '<b>TV Spot <br/>SINALCO<br/> "Dance"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/17.jpg', url: 'produktion_konzertfilm_Schiller02.html', title: '<b>Konzertfilm <br/>Schiller <br/>"Heimathafen"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/18.jpg', url: 'produktion_tv-spot_Rockchristmas01.html', title: '<b>TV Spot <br/>UNIVERSAL MUSIC <br/>"Rock Christmas"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/19.jpg', url: 'produktion_EPK_Orlowsky01.html', title: '<b>EPK <br/>David Orlowsky Trio <br/>"Chronos"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/20.jpg', url: 'produktion_imagetrailer_Gourmeo01.html', title: '<b>Imagefilm <br/>GOURMEO.COM <br/>"Die besten Restaurants"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/21.jpg', url: 'postproduktion_imagekampagne_Audi03.html', title: '<b>Imagekampagne <br/>AUDI <br/>"Sinfonie"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/22.jpg', url: 'produktion_werbetrenner_n24.html', title: '<b>Werbetrenner <br/>N24 <br/></b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/23.jpg', url: 'produktion_musikvideo_Schiller01.html', title: '<b>Musikvideo <br/>Schiller mit Anggun <br/>"Always You"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/24.jpg', url: 'produktion_imagetrailer_Gourmeo01.html', title: '<b>Imagefilm <br/>GOURMEO.COM <br/>"Die besten Restaurants"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/25.jpg', url: 'postproduktion_imagefilm_Warsteiner01.html', title: '<b>Imagefilm  <br/>WARSTEINER<br/>"Das Wahre bewahren"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/26.jpg', url: 'postproduktion_tv-spot_BMW01.html', title: '<b>TV Spot <br/>BMW <br/>"Erfahrung"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/27.jpg', url: 'postproduktion_imagefilm_Bosch01.html', title: '<b>Imagetrailer <br/>BOSCH <br/>"Opus Green"</b> <br/><span style="font-style: italic"> Click image to view video</span>'},
				{image : 'images/28.jpg', url: 'produktion_werbetrenner_n24.html', title: '<b>Werbetrenner <br/>N24 <br/></b> <br/><span style="font-style: italic"> Click image to view video</span>'},
			
			]
	picturearray.sort(function() {return 0.5 - Math.random()}) //Array elements now scrambled

	$.fn.supersized.options = {  
		startwidth: 1024,  
		startheight: 576,
		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: 1,
		slide_interval: 10000,
	 	slides : picturearray
			};
	
    $('#supersized').supersized();
    
   $("a.gallery").fancybox({
			'width': 1040,
			'height': 600,
			'margin': 0,
			'padding': 10,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
			'hideOnOverlayClick': false,
			'showCloseButton': true,
            'type': 'iframe',
			'titlePosition':'inside'
			});
   
    

	var $lefty = $("#controls-wrapper");
    $lefty.delay(600).animate({left: parseInt($lefty.css('left'),0) == 0 ? -$lefty.outerWidth() : 0});
	
	var $bottom = $("#balken");
    $bottom.delay(600).animate({bottom: parseInt($bottom.css('bottom'),0) == 10 ? -$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"); });
	$(".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"); });
	
});



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 = $("#balken");
    $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 = $("#balken");
    $bottom.animate({bottom: parseInt($bottom.css('bottom'),10) == 0 ? -$bottom.outerHeight() : 0});
    
    panelHidden = true;
}