/**
 * @author mk
 */
var globalTimer = 5500;
var globalWaitingTimer = 2*globalTimer;
var waitingTimerK;
var waitingTimerW;
var timePfeilK1;
var timePfeilK2;
var timePfeilW1;
var timePfeilW2;

jq(document).ready(function(){
	//Initialisierung der Animation
	defaultKinder();
	window.setTimeout(KinderToWissen, globalTimer);

	jq("#col1_quad a.col1_quadlink").mouseenter(function(){
		defaultKinder();
    }).mouseleave(function(){
    	defaultKinder();
    	KinderToWissen();
    });

	jq("#col2_quad a.col2_quadlink").mouseenter(function(){
		defaultWissen();
	}).mouseleave(function(){
		defaultWissen();
		WissenToKinder();
	});

});

//Default Status der Quadrate wiederherstellen
//Kinder-Style aktiv
function defaultWissen(){
	stopAllAnimations();
	jq('#col1_quad').css('backgroundColor', '#FFFFFF');
	jq('#col1_quad').css('borderColor', '#B9B9B9');
	jq('#imageKinder').hide();
	jq('#col1_text').hide();
	jq('#linkKinder').css('color','#E2001A');
	jq('#col1Pfeil').css('opacity','1');
	jq('#col1Pfeil').attr('src','start_btn_arrow_red_big.gif');

	jq('#imageWissen').css('opacity','1');
	jq('#imageWissen').show();
	jq('#col2_text').css('opacity','1');
	jq('#col2_text').show();
	jq('#col2_quad').css('backgroundColor', '#004A99');
	jq('#col2_quad').css('borderColor', '#004A99');
	jq('#linkWissen').css('color','#FFFFFF');
	jq('#col2Pfeil').css('opacity','1');
	jq('#col2Pfeil').attr('src','start_btn_arrow_white_small.gif');
}

//Default Status der Quadrate wiederherstellen
//Wissen-Style aktiv
function defaultKinder(){
	stopAllAnimations();
	jq('#col1_quad').css('backgroundColor', '#FFE100');
	jq('#col1_quad').css('borderColor', '#FFE100');
	jq('#imageKinder').css('opacity','1');
	jq('#imageKinder').show();
	jq('#col1_text').css('opacity','1');
	jq('#col1_text').show();
	jq('#linkKinder').css('color','#003C7C');
	jq('#col1Pfeil').css('opacity','1');
	jq('#col1Pfeil').attr('src','start_btn_arrow_blue_small.gif');

	jq('#imageWissen').hide();
	jq('#col2_text').hide();
	jq('#col2_quad').css('backgroundColor', '#FFFFFF');
	jq('#col2_quad').css('borderColor', '#B9B9B9');
	jq('#linkWissen').css('color','#003C7C');
	jq('#col2Pfeil').css('opacity','1');
	jq('#col2Pfeil').attr('src','start_btn_arrow_blue_big.gif');
}

//Animation vom Kinder-Style zum Wissen-Style
function KinderToWissen(){
  //Aendern der Farbe im linken Quadrat
  jq('#col1_quad').animate( {
	backgroundColor: '#FFFFFF',
    borderColor: '#B9B9B9'
  }, globalTimer );
  //Ausblenden des linken Bildes
  jq('#imageKinder').fadeOut(globalTimer);
  //Ausblenden des rechten Text
  jq('#col1_text').fadeOut(globalTimer);
  //Aendern der Farbe des Quadrattextes
  jq('#linkKinder').animate( {
	color: '#E2001A'
  }, globalTimer);
  //Austauschen der Pfeilgrafik
  jq('#col1Pfeil').animate({ opacity: "0"}, globalTimer/2);
  timePfeilK1 = window.setTimeout(function(){
	  jq('#col1Pfeil').attr('src','start_btn_arrow_red_big.gif')
	  				 .animate( { opacity: "1"}, globalTimer/2);
  },globalTimer/2);

  //Rechtes Bild einblenden
  jq('#imageWissen').fadeIn(globalTimer);
  //Rechten Text einblenden
  jq('#col2_text').fadeIn(globalTimer);
  //Aendern der Farbe im rechten Quadrat
  jq('#col2_quad').animate( {
  	backgroundColor: '#004A99',
  	borderColor: '#004A99'
  }, globalTimer );
  //Aendern der Farbe des Quadrattextes
  //Austauschen der Pfeilgrafik
  jq('#linkWissen').animate( {
	color: '#FFFFFF'
  }, globalTimer);
  jq('#col2Pfeil').animate( { opacity: "0"}, globalTimer/2);
  timePfeilK2 = window.setTimeout(function(){
	  jq('#col2Pfeil').attr('src','start_btn_arrow_white_small.gif')
	  				 .animate( { opacity: "1"}, globalTimer/2);
  },globalTimer/2);

  //verzoegerter Aufruf der Funktion WissenToKinder
  waitingTimerK = window.setTimeout(WissenToKinder, globalWaitingTimer);
}

//Animation vom Wissen-Style zum Kinder-Style
function WissenToKinder(){
	//Aendern der Farbe im linken Quadrat
	jq('#col1_quad').animate( {
	  backgroundColor: '#FFE100',
      borderColor: '#FFE100'
    }, globalTimer );
	//Linkes Bild einblenden
	jq('#imageKinder').fadeIn(globalTimer);
	//Linker Text einblenden
	jq('#col1_text').fadeIn(globalTimer);
	//Aendern der Farbe des Quadrattextes
	jq('#linkKinder').animate( {
	  color: '#003C7C'
	}, globalTimer);
	//Austauschen der Pfeilgrafik
	jq('#col1Pfeil').animate({ opacity: "0"}, globalTimer/2);
	timePfeilW1 = window.setTimeout(function(){
		  jq('#col1Pfeil').attr('src','start_btn_arrow_blue_small.gif')
		  				 .animate( { opacity: "1"}, globalTimer/2);
	  },globalTimer/2);

	//Ausblenden des rechten Bildes
	jq('#imageWissen').fadeOut(globalTimer);
	//Ausblenden des rechten Texts
	jq('#col2_text').fadeOut(globalTimer);
	//Aendern der Farbe im rechten Quadrat
	jq('#col2_quad').animate( {
  	  backgroundColor: '#FFFFFF',
  	  borderColor: '#B9B9B9'
	}, globalTimer );
	//Aendern der Farbe des Quadrattextes
	jq('#linkWissen').animate( {
	  color: '#003C7C'
	}, globalTimer);
	//Austauschen der Pfeilgrafik
    jq('#col2Pfeil').animate( { opacity: "0"}, globalTimer/2);
    timePfeilW2 = window.setTimeout(function(){
		  jq('#col2Pfeil').attr('src','start_btn_arrow_blue_big.gif')
		  				 .animate( { opacity: "1"}, globalTimer/2);
	  },globalTimer/2);

	//verzoegerter Aufruf der Funktion KinderToWissen
    waitingTimerW = window.setTimeout(KinderToWissen, globalWaitingTimer);
}

//Stoppt alle Animationen und alle erstellten Timer
function stopAllAnimations(){
	jq('#col1_quad').stopAll();
	jq('#imageKinder').stopAll();
	jq('#col1_text').stopAll();
	jq('#linkKinder').stopAll();
	jq('#col1Pfeil').stopAll();
	jq('#imageWissen').stopAll();
	jq('#col2_text').stopAll();
	jq('#col2_quad').stopAll();
	jq('#linkWissen').stopAll();
	jq('#col2Pfeil').stopAll();
	window.clearTimeout(waitingTimerK);
	window.clearTimeout(waitingTimerW);
	window.clearTimeout(timePfeilK1);
	window.clearTimeout(timePfeilK2);
	window.clearTimeout(timePfeilW1);
	window.clearTimeout(timePfeilW2);

	jq('#imageKinder').css('opacity','1');
	jq('#col1_text').css('opacity','1');
	jq('#imageWissen').css('opacity','1');
	jq('#col2_text').css('opacity','1');
}