// JavaScript Document


$(document).ready(function() {
	$(document).pngFix();
    $('#animation #smallImgBox #image1').css({width:'150px', left:'0px', top:'0px'});
    $('#animation #smallImgBox #image2').css({width:'150px', left:'0px', top:'0px'});
    $('#animation #smallImgBox #image4').css({width:'150px', left:'0px', top:'0px'});
	/*alert('hier');
    /*var schalter	=	true
	 * 
	 * 
	 * 
	
	// test =  30
	
	$('#hiddenDiv').css('width', test+"px");
	
	$('#hiddenDiv').css('width');
	
	
	$('#animation #bigImgBox .bigImg').animate({
						height:'+$('#hiddenDiv').css('width')
	                    width:'150px', 
	                    marginLeft:'-210px', 
	                    marginTop:'-30px'
	                }, 1000);
	
	function makeBlend(teller) {
	//	$('#bigTellerIMG').attr('src', 'bigTeller'+teller+'.jpg');
		//var name	=	'#biggieTeller'+teller;
		//if()
		//alert(teller);
		//alert($('#big_'+teller).css('display'));
		if (schalter) {
			schalter	=	false;
			if ($('#big_0').css('display') == 'block') {
				$('#big_0').fadeOut(1500, function(){
					$('#big_' + teller).fadeIn(1500,function(){schalter = true});
				});
			}
			if ($('#big_1').css('display') == 'block') {
				$('#big_1').fadeOut(1500, function(){
					$('#big_' + teller).fadeIn(1500,function(){schalter = true});
				});
			}
			if ($('#big_2').css('display') == 'block') {
				$('#big_2').fadeOut(1500, function(){
					$('#big_' + teller).fadeIn(1500,function(){schalter = true});
				});
			}
			
			if ($('#big_3').css('display') == 'block') {
				$('#big_3').fadeOut(1500, function(){
					$('#big_' + teller).fadeIn(1500, function(){schalter = true});
				});
			}
		}
	}*/
	
	/*
	$("#little_0").hover(
	  function () {},
	  function () {
			$('#littletans_0').show();		  		  
			$('#little_0').hide();
	  }
	);
	$("#little_0").click(function(){
			makeBlend("0");
		}
	)
	$("#little_1").hover(
	  function () {},
	  function () {
			$('#littletans_1').show();		  		  
			$('#little_1').hide();
	  }
	);
	$("#little_1").click(function(){
			makeBlend("1");
		}
	)
	$("#little_2").hover(
	  function () {},
	  function () {
			$('#littletans_2').show();		  		  
			$('#little_2').hide();
	  }
	);
	$("#little_2").click(function(){
			makeBlend("2");
		}
	)
	$("#little_3").hover(
	  function () {},
	  function () {
			$('#littletans_3').show();		  		  
			$('#little_3').hide();
	  }
	);
	$("#little_3").click(function(){
			makeBlend("3");
		}
	)
	
	$("#littletans_0").hover(
	  function () {
			$('#little_0').show();		  		  
			$('#littletans_0').hide();  
		 },
	  function () {}
	);
	$("#littletans_1").hover(
	  function () {
			$('#little_1').show();		  		  
			$('#littletans_1').hide();  
		 },
	  function () {}
	);
	$("#littletans_2").hover(
	  function () {
			$('#little_2').show();		  		  
			$('#littletans_2').hide();  
		 },
	  function () {}
	);
	$("#littletans_3").hover(
	  function () {
			$('#little_3').show();		  		  
			$('#littletans_3').hide();  
		 },
	  function () {}
	);
	*/
	
	
	
	
	/*
	$("#little_2").hover(
	  function () {
		$('#teller3').show();
		$('#blend_teller3').hide();		  		
	  },
	  function () {
		$('#blend_teller3').show();		  		  
		$('#teller3').hide();
	  }
	);
	$("#teller4Div").hover(
	  function () {
		$('#teller4').show();
		$('#blend_teller4').hide();		  		
	  },
	  function () {
		$('#blend_teller4').show();		  		  
		$('#teller4').hide();
	  }
	);*/

	/*$("#scroller").simplyScroll({
			autoMode: 'loop',
			speed: '3'
	});*/       
});



function closeTeller() {
/*	$('#bigTellerHeadline').fadeOut('fast');
	$('#bigTellerText1').fadeOut('fast');	
	$('#bigTellerText2').fadeOut('fast');	
	$('#bigTellerText3').fadeOut('fast');	
	$('#bigTellerText4').fadeOut('fast');		
	$('#bigTeller').fadeOut('fast');	
	$('#teller1').fadeIn('slow');
	$('#teller2').fadeIn('slow');		
	$('#teller3').fadeIn('slow');
	$('#teller4').fadeIn('slow');							
*/	
}
var bool	=	true;
var akt		=	3;

function fadeTextAnimation(mapId){
	$('#txt3').fadeOut(500, function(){
    	$('#txt'+mapId).fadeIn(500, function(){ 
    		$('#txt'+mapId).attr('id','txtTmp')
    		$('#txt3').attr('id','txt'+mapId);
    		$('#txtTmp').attr('id','txt3');
    	});
    });
}

function clickPlateAnimation(mapId) {
	if(bool){
		bool	=	false;
	    var smallImgSrc = $('#animation #smallImgBox #image' + mapId).attr('src');
	    var bigImgSrc = $('#animation #bigImgBox .bigImg').attr('src');
	    switch(mapId) {
	        case 1:
	            	$('#animation #bigImgBox .bigImg').animate({
	                    width:'150px', 
	                    left:'10px', 
	                    top:'105px'
	                }, 1000);
	            	fadeTextAnimation(mapId);
	                
	                $('#animation #smallImgBox #image' + mapId).animate({
	                    width:'400px', 
	                    left:'200px', 
	                    top:'45px'
	                }, 1000, function(){
	                    $('#animation #bigImgBox .bigImg').attr('src', smallImgSrc).css({width:'400px', left:'210px', top:'150px'});
	                    $('#animation #smallImgBox #image' + mapId).attr('src', bigImgSrc).css({width:'150px', left:'0px', top:'0px'});   
	                    bool	=	true;
	                    	                    
	                });
	                
	            break;
	        case 2:
	            $('#animation #bigImgBox .bigImg').animate({
	                    width:'150px', 
	                    left:'180px', 
	                    top:'105px'
	                }, 1000);
	            	fadeTextAnimation(mapId);
	                $('#animation #smallImgBox #image' + mapId).animate({
	                    width:'400px', 
	                    left:'30px', 
	                    top:'45px'
	                }, 1000, function(){
	                    $('#animation #bigImgBox .bigImg').attr('src', smallImgSrc).css({width:'400px', left:'210px', top:'150px'});
	                    $('#animation #smallImgBox #image' + mapId).attr('src', bigImgSrc).css({width:'150px', left:'0px', top:'0px'});   
	                    bool	=	true;
	                });
	            break;
	        case 4:
	            $('#animation #bigImgBox .bigImg').animate({
	                    width:'150px', 
	                    left:'520px', 
	                    top:'105px'
	                }, 1000);
	            	fadeTextAnimation(mapId);
	                $('#animation #smallImgBox #image' + mapId).animate({
	                    width:'400px', 
	                    left:'-310px', 
	                    top:'45px'
	                }, 1000, function(){
	                    $('#animation #bigImgBox .bigImg').attr('src', smallImgSrc).css({width:'400px', left:'210px', top:'150px'});
	                    $('#animation #smallImgBox #image' + mapId).attr('src', bigImgSrc).css({width:'150px', left:'0px', top:'0px'});   
	                    bool	=	true;
	                });
	            break;
	    }
	}    
}