var frames =  new Array('step_p01','step_p01_001','step_p01_002','step_p01_003','step_p01_004','step_p01_005','step_p01_006','step_p01_007','step_p02','step_p02_001','step_p02_002','step_p02_003','step_p02_004','step_p02_005','step_p02_006','step_p03','step_p03_001','step_p03_002','step_p03_003','step_p03_004','step_p03_005','step_p03_006','step_p03_007');
var frames_cursor = 0;
var actual_frame='';
var maintimer;
var movie = new Object();
movie['cursor']=0;
movie['frames']=  new Array('step_p01,step_p01_001','step_p01_002','step_p01_003','step_p01_004','step_p01_005','step_p01_006','step_p01_007','step_p02','step_p02_001','step_p02_002','step_p02_003','step_p02_004','step_p02_005','step_p02_006','step_p03','step_p03_001','step_p03_002','step_p03_003','step_p03_004','step_p03_005','step_p03_006','step_p03_007');

// image preloader
var cache = [];
(function($) {
  
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

jQuery.preLoadImages('img/image_teaser_specialized_01.jpg', 'img/image_teaser_specialized_02.jpg','img/image_teaser_specialized_03.jpg','img/image_teaser_specialized_04.jpg','img/image_teaser_specialized_05.jpg','img/image_teaser_specialized_06.jpg','img/image_teaser_maiwald_01.jpg','img/image_teaser_maiwald_02.jpg','img/image_teaser_maiwald_03.jpg','img/image_teaser_maiwald_04.jpg','img/image_teaser_maiwald_05.jpg','img/image_teaser_maiwald_06.jpg','img/image_teaser_skeletonsea_01.jpg','img/image_teaser_skeletonsea_02.jpg','img/image_teaser_skeletonsea_03.jpg','img/image_teaser_skeletonsea_04.jpg','img/image_teaser_skeletonsea_05.jpg','img/image_teaser_skeletonsea_06.jpg','img/image_teaser_skeletonsea_07.jpg');

$(document).ready( function(){
pageinit();
$('#btn_pdf').hover(function(){
	$('#btn_pdf').attr('src','img/button_portfolio_eng_over.gif')
},function(){
	$('#btn_pdf').attr('src','img/button_portfolio_eng_off.gif')
});
$('#btn_mail').hover(function(){
	$('#btn_mail').attr('src','img/button_email_eng_over.gif')
},function(){
	$('#btn_mail').attr('src','img/button_email_eng_off.gif')
});
$('#btn_acro').hover(function(){
	$('#btn_acro').attr('src','img/button_acrobat_eng_over.gif')
},function(){
	$('#btn_acro').attr('src','img/button_acrobat_eng_off.gif')
});

$('.pagedot').hover(function(){
$('#'+this.id).css('background-image','url("img/button_dot_on.gif")');
},function(){
	if (actual_frame!=this.id){
		$('#'+this.id).css('background-image','url("img/button_dot_off.gif")');
	}

dynFooter();
});
//attach resize handler to stick footer at bottom
$(window).scroll(dynFooter)
$(window).resize(dynFooter)


function dynFooter(){
	var winHeight = parseInt($(window).height())-30;  
	var docHeight = window.innerHeight - 30;
	var scrollTop = window.scrollTop;
	if ((winHeight) > 840){
		$('#footer').css('top',(winHeight-$("#footer").height())+'px');
		}else{
		$('#footer').css('top','840px');
		}
		//$('#displaytitle').html(winHeight);
}

$('.pagedot').click(function(){
	$("div[class^='p']").css('background-image','url("img/button_dot_off.gif")');

	$('#'+this.id).removeClass('pagedot').addClass('pagedotselected');
	$('#'+this.id).css('background-image','url("img/button_dot_on.gif")');
	//call function
	eval('step_'+this.id+'()');
})
$('#mainleftarea').hover(function(){
	$('#mainleft').stop().animate({left:0},300);
},function(){
	$('#mainleft').stop().animate({left:-60},300);
});

$('#mainleftarea').click(function(){
	allFrames('stop','');
	var actualFrame = movie['cursor'];
	actualFrame-=1;
	if (actualFrame<0)actualFrame=movie['frames'].length-1;
	movie['cursor']=actualFrame;
	eval(movie['frames'][movie['cursor']]+'()');

});

$('#mainrightarea').click(function(){
	allFrames('stop','');
	var actualFrame = movie['cursor'];
	actualFrame+=1;
	if (actualFrame>=movie['frames'].length)actualFrame=0;
	movie['cursor']=actualFrame;
	eval(movie['frames'][movie['cursor']]+'()');
});

$('#mainrightarea').hover(function(){
	$('#mainright').stop().animate({left:66},300);
},function(){
	$('#mainright').stop().animate({left:134},300);
});
step_p01();
// eof onReady
});

function setPageDot(which){
// all others off
$("div[class^='p']").css('background-image','url("img/button_dot_off.gif")');
	$("#"+which).css('background-image','url("img/button_dot_on.gif")');
	actual_frame=which;
}

function pageinit(){
	allFrames('stop','');
	//$('#mainteaser').css('opacity',0);
	$('#mainoffscreen1').css('opacity',0.0);
	$('#mainoffscreen2').css('opacity',0.0);
	$('#mainoffscreen3').css('opacity',0.0);
}
// blend two div elem1 out, elem2
function blendDiv(elem1,elem2,mask,time){
	elem2.animate({opacity:1.0},time);
	elem1.css('opacity',0);
}
// wait do nothing
function idle(time,next){
	if(maintimer)clearTimeout(maintimer);
	maintimer = setTimeout(next,time);
}

// animation part
// init page 01
function step_p01(){
	setPageDot('p01');
	$('#displaytitle').html("Konzeption und Gestaltung des Summer Fashion Katalogs");
	allFrames('stop','');
	allFrames('off',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	allFrames('origin',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	$('#mainoffscreen3').stop().animate({
		opacity: 0.00},500);
	$('#mainoffscreen1 > img').attr('src','img/image_teaser_specialized_01.jpg');
	$('#mainoffscreen1').animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=0;
			idle(1500,step_p01_002);
	});
}

function step_p01_002(){
	
	// load offscreen img
	$('#mainoffscreen2 > img').attr('src','img/image_teaser_specialized_02.jpg');
	$('#mainoffscreen2').stop().animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=2;
			idle(3000,step_p02);
	});
	
}


// init page 02
function step_p02(){
	setPageDot('p02');
	$('#displaytitle').html("Corporate Design, Print Design, Corporate Website, 3D-Branding");
	allFrames('stop','');
	allFrames('off',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	allFrames('origin',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	$('#mainoffscreen3').stop().animate({
		opacity: 0.00},500);
	$('#mainoffscreen1 > img').attr('src','img/image_teaser_maiwald_01.jpg');
	$('#mainoffscreen1').animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=0;
			idle(1500,step_p02_002);
	});
}

function step_p02_002(){
	
	// load offscreen img
	$('#mainoffscreen2 > img').attr('src','img/image_teaser_maiwald_02.jpg');
	$('#mainoffscreen2').stop().animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=2;
			idle(3000,step_p03);
	});
	
}
// init page 03
function step_p03(){
	setPageDot('p03');
	$('#displaytitle').html("Corporate Design, Print Design und Web Design");
	allFrames('stop','');
	allFrames('off',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	allFrames('origin',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	
	$('#mainoffscreen3').stop().animate({
		opacity: 0.00},500);

	$('#mainoffscreen1 > img').attr('src','img/image_teaser_uniserv_01.jpg');

	$('#mainoffscreen1').animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=0;
			idle(1500,step_p03_002);
	});
}

function step_p03_002(){
	
	// load offscreen img
	$('#mainoffscreen2 > img').attr('src','img/image_teaser_uniserv_02.jpg');
	$('#mainoffscreen2').stop().animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=2;
			idle(3000,step_p04);
	});
	
}
// init page 04
function step_p04(){
	setPageDot('p04');
	$('#displaytitle').html("Communicational Design");
	allFrames('stop','');
	allFrames('off',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	allFrames('origin',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	$('#mainoffscreen3').stop().animate({
		opacity: 0.00},500);
	$('#mainoffscreen1 > img').attr('src','img/image_teaser_skeletonsea_01.jpg');
	$('#mainoffscreen1').animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=0;
			idle(1500,step_p04_002);
	});
}

function step_p04_002(){
	
	// load offscreen img
	$('#mainoffscreen2 > img').attr('src','img/image_teaser_skeletonsea_02.jpg');
	$('#mainoffscreen2').stop().animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=2;
			idle(3000,step_p05);
	});
	
}
// init page 05
function step_p05(){
	setPageDot('p05');
	$('#displaytitle').html("Naming und Corporate Design im Rahmen des Markenlaunches");
	allFrames('stop','');
	allFrames('off',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	allFrames('origin',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	$('#mainoffscreen3').stop().animate({
		opacity: 0.00},500);
	$('#mainoffscreen1 > img').attr('src','img/image_teaser_vitanova_01.jpg');
	$('#mainoffscreen1').animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=0;
			idle(1500,step_p05_002);
	});
}

function step_p05_002(){
	
	// load offscreen img
	$('#mainoffscreen2 > img').attr('src','img/image_teaser_vitanova_02.jpg');
	$('#mainoffscreen2').stop().animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=2;
			idle(3000,step_p06);
	});
	
}
// init page 06
function step_p06(){
	setPageDot('p06');
	$('#displaytitle').html("Integrierte Markenrealisierung: Produkt Design, Naming, Corporate Design, Web- und Printrealisation");
	allFrames('stop','');
	allFrames('off',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	allFrames('origin',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	$('#mainoffscreen3').stop().animate({
		opacity: 0.00},500);
	$('#mainoffscreen1 > img').attr('src','img/image_teaser_soccerpoles_01.jpg');
	$('#mainoffscreen1').animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=0;
			idle(1500,step_p06_002);
	});
}

function step_p06_002(){
	
	// load offscreen img
	$('#mainoffscreen2 > img').attr('src','img/image_teaser_soccerpoles_02.jpg');
	$('#mainoffscreen2').stop().animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=2;
			idle(3000,step_p07);
	});
	
}
// init page 07
function step_p07(){
	setPageDot('p07');
	$('#displaytitle').html("Konzeption und Gestaltung des neuen Corporate Designs");
	allFrames('stop','');
	allFrames('off',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	allFrames('origin',['mainimg','mainoffscreen1','mainoffscreen2','mainoffscreen3']);
	$('#mainoffscreen3').stop().animate({
		opacity: 0.00},500);
	$('#mainoffscreen1 > img').attr('src','img/image_teaser_mps_01.jpg');
	$('#mainoffscreen1').animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=0;
			idle(1500,step_p07_002);
	});
}

function step_p07_002(){
	
	// load offscreen img
	$('#mainoffscreen2 > img').attr('src','img/image_teaser_mps_02.jpg');
	$('#mainoffscreen2').stop().animate({
		opacity: 1.00},1000,function(){
			movie['cursor']=2;
			idle(3000,step_p01);
	});
	
}

function allFrames(cmd,params){
	switch (cmd){
		case 'stop' :
			clearTimeout(maintimer);
			$('#mainimg').stop(true, false);
			//$('#mainteaser').stop(true, false);
			$('#mainoffscreen1').stop(true, false);
			$('#mainoffscreen2').stop(true, false);
			$('#mainoffscreen3').stop(true, false);
			break;
		case 'off' :
			for (id in params){
				$('#'+params[id]).css('opacity',0.0);
			}
			break;
		case 'origin' :
			for (id in params){
				$('#'+params[id]).css('top',0);
				$('#'+params[id]).css('left',0);
			}
			break;
		default :
		
	}
}

function stopAll(){
	clearTimeout(maintimer);
	$('#mainimg').stop(true, true)
	//$('#mainteaser').stop(true, true)
	$('#mainoffscreen1').stop(true, true)
	$('#mainoffscreen2').stop(true, true)
	$('#mainoffscreen3').stop(true, true)

}