//////////////////////////////////////////////////////////////////////////////////////
// Powered by                                                                       //
//      __                                             __        __  _              //
//     / /___      ______        ____ ___  ____ ______/ /_____  / /_(_)___  ____ _  //
//    / //_/ | /| / / __ \______/ __ `__ \/ __ `/ ___/ //_/ _ \/ __/ / __ \/ __ `/  //
//   / ,<  | |/ |/ / /_/ /_____/ / / / / / /_/ / /  / ,< /  __/ /_/ / / / / /_/ /   //
//  /_/|_| |__/|__/ .___/     /_/ /_/ /_/\__,_/_/  /_/|_|\___/\__/_/_/ /_/\__, /    //
//               /_/                                                     /____/     //
//                                                                                  //
//                                                            11. August 2010  v1.0 //
//////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////
// Config                           //
//////////////////////////////////////

// Dauer jeder einzelnen Animation (in Sekunden)
var sliderTimeAnimationLength = 1;

// Breite eines einzelnen Elementes (in Pixel)
var sliderWidthOfEachElement = 166;

// Abstand jeder Box zu einander (in Pixel)
var sliderBoxMarginRight = 35;

var sliderMorePixelWidth = 20;

var sliderMorePixelHeight = 20;

///////////////////////////////////////
// Ab hier nichts mehr veraendern!!! //
///////////////////////////////////////

/**
* Werte initialisieren
*
* running => Zeigt an, ob im Moment eine Animation im Gange ist
* slider => Ein direkter Verweis, auf das Slider Objekt
* li => Ein direkter Verweis auf alle ORIGINALEN li Elemente
* liSize => Anzahl der zu animierenden Objekte
* ul => Ein direkter Verweis auf den Listenblock der für die Animation verwendet wird.
* liWidth => Die Breite eines einzelnen Elementes
* act => Das Bild, welches aktuell hervorgehoben ist
* next => Das nächste Bild, welches geladen werden soll
*/
var running = false;
var slider = null;
var li = null;
var liSize = 0
var ul = null;
var liWidth = 0;
var act = 0;
var next = 0;
var imageWidth = 0;
var imageBigWidth = 0;
var imageHeight = 0;
var imageBigHeight = 0;


/**
* generateSliderFromList()
* 
* Erstellt aus der originalen Liste den animierbaren Slider
*/
function generateSliderFromList() {
    
	// Alten Slider ausblenden
	slider.find("ul").css("display", "none");
	
	// Neuen Slider anlegen
	slider.append("<ul id='aniSlider' class='unitPng'></ul>");
	
	
	
	// CSS des Sliders festlegen
	slider.css("width", liWidth*8).css("overflow", "hidden").css("margin-left", "-226px").css("margin-top", "-8px");
	
	ul = jQuery("#aniSlider");
	li.find(".topbox").css("margin-top", (sliderMorePixelWidth/2)+"px");
	li.css("float", "left").css("margin-right", sliderBoxMarginRight+"px");
	
	//for(i = 0; i < 7; i++) { ul.append(jQuery(li[i]).clone()); }
	
	// die letzten drei und die ersten 4 holen
	for(i = 3; i > 0; i--) { ul.append(jQuery(li[li.length-i]).clone()); }
	for(i = 0; i < 4; i++) { ul.append(jQuery(li[i]).clone()); }
	
	imageWidth = 110;//jQuery(jQuery(ul.children()[2]).find("img").parent()).width() - sliderMorePixelWidth;
	imageBigWidth = sliderMorePixelWidth + imageWidth;
	imageHeight = 90;//jQuery(ul.children()[2]).find("img").height() - sliderMorePixelHeight;
	imageBigHeight = sliderMorePixelHeight + imageHeight;
	
	liWidth = imageWidth+(10);
	
	ul.css({margin: "0", marginLeft: (liWidth+30)+"px", padding: "0", "list-style-type": "none"});
	
	jQuery(ul.children()).find("img").css("width", imageWidth+"px").css("height", imageHeight+"px");
	jQuery(slider).find("img").css("width", imageWidth+"px").css("height", imageHeight+"px");
	
	if(!((jQuery.browser.msie) && (jQuery.browser.version*1==6))) {
		jQuery(ul.children()[0]).css("opacity", "0");
		jQuery(ul.children()[3]).find("img").css("width", imageBigWidth+"px").css("height", imageBigHeight+"px");
		jQuery(ul.children()[3]).find(".topbox").css("margin-top", "0px");
		jQuery(ul.children()[3]).css("margin-right", "55px");
		jQuery(ul.children()[6]).css("opacity", "0");
	}
	
	jQuery("#bubble").css("position", "absolute");
	fixBubblePosition();
	
	if(jQuery.browser.msie) {
		jQuery("#aroundSlider").css({height: "170px", width: "772px", position: "relative", overflow: "hidden", marginLeft: "70px", marginTop: "-50px"});
		jQuery("#slider").css("margin-left", "-300px");
		jQuery("#aroundSlider").css("top", "100px");
		if(jQuery.browser.version*1==7) jQuery("#aroundSlider").css("top", "50px");
		ul.css({marginLeft: (liWidth+30)+"px"});
		if(jQuery.browser.version*1==6) {
		  jQuery(ul.children()).css("margin-right", "11px");
		  jQuery(li).css("margin-right", "11px");
		  jQuery("#bubble").css("margin-left", "110px").css("margin-top", "-10px");
		  jQuery(ul.children()).find("a").css("margin-left", "0px");
		}
	}
}

function fixBubblePosition() {
	jQuery("#bubbleFrame").css("width", "auto").css("height","auto");
	
	
	sliderContentWidth = 460;
	positionAdjust = 15;
	
	textWidth = jQuery("#bubbleText").width();
	textHeight = jQuery("#bubbleText").height();
	
	jQuery("#bubbleFrame").css("width", textWidth).css("height",textHeight);
	bubbleXOffset = 0;
	if((jQuery.browser.msie) && (jQuery.browser.version*1==7)) // Wenn MSIE 7, dann nach etwas links verschieben. MSE
		bubbleXOffset = 90;
	
	if(!((jQuery.browser.msie) && (jQuery.browser.version*1==6)))
		jQuery("#bubble").css("margin-left", (sliderContentWidth-(textWidth/2)-bubbleXOffset) + "px").css("margin-top", positionAdjust-(textHeight) + "px");
}

function moveList(toRight) {
  if(!running) {
	  running = true;
	  window.setTimeout("activateButtons()", sliderTimeAnimationLength*1000 + 200);
	  animateTooltip(toRight);
	  var direction = 1;
	  var vis = true;
	  var ele = 0;
	  next = act-4;
	  if(next < 1) next = liSize + next;
	  if(next == liSize) next = 0;
	  to = 2*liWidth+60;
	  leftAnimate = 1;
	  rightAnimate = 0;
	  
	  if(toRight) {
		direction = -1;
		leftAnimate = 0;
	    rightAnimate = 1;
		to = 0;
		ele = 1;
		next = act+4;
		if(liSize - next <= 0) next = -1 * (liSize - next);
	  }

	  jQuery(ul).animate({
							marginLeft: to
						}, sliderTimeAnimationLength * 1000, function() {moveComplete(toRight); });
		if(!((jQuery.browser.msie) && (jQuery.browser.version*1==6))) // Wenn MSIE 6, dann nicht vergrößern
		  { 				
	  jQuery(ul.children()[ele]).animate({
									opacity: leftAnimate
								}, sliderTimeAnimationLength * 1000);
	  
	  jQuery(ul.children()[ele + 5]).animate({
									opacity: rightAnimate
								}, sliderTimeAnimationLength * 1000);
		// Hier wird das mittlerste Bild animiert.
	  
		  jQuery(ul.children()[3]).find("img").animate({
										width: imageWidth+"px",
										height: imageHeight+"px"
									}, sliderTimeAnimationLength * 1000);
		  
	  jQuery(ul.children()[3]).animate({
									marginRight: "35px"
								}, sliderTimeAnimationLength * 1000);
								
	  jQuery(ul.children()[3]).find(".topbox").animate({
									marginTop: (sliderMorePixelWidth/2) +"px"
								}, sliderTimeAnimationLength * 1000);
								
	  jQuery(ul.children()[(-1) * direction + 3]).find(".topbox").animate({
									marginTop: "0px"
								}, sliderTimeAnimationLength * 1000);
							
	  jQuery(ul.children()[(-1) * direction + 3]).animate({
									marginRight: "55px"
								}, sliderTimeAnimationLength * 1000);
	  
	  jQuery(ul.children()[(-1) * direction + 3]).find("img").animate({
									width: imageBigWidth+"px",
									height: imageBigHeight+"px"
								}, sliderTimeAnimationLength * 1000);
		}					
  }
}

function moveComplete(toRight) {
  if(toRight) {
	if(!((jQuery.browser.msie) && (jQuery.browser.version*1==6))) {
	  ul.append(jQuery(li[next]).clone().css("opacity", "0"));
	}
	else {
	  ul.append(jQuery(li[next]).clone());
	}
	jQuery(ul.children()[0]).remove();
	ul.css("margin-left", (liWidth + 30));

	act++;
	if(act > liSize-1) act = 0;
  }
  else {  
    if(!((jQuery.browser.msie) && (jQuery.browser.version*1==6))) {
	  ul.prepend(jQuery(li[next]).clone().css("opacity", "0"));
	}
	else {
	  ul.prepend(jQuery(li[next]).clone());
	}
	ul.css("margin-left", (liWidth + 30));
	jQuery(ul.children()[7]).remove();
	
	act--;
	if(act < 0) act = liSize - 1;
  }
}

function initSlider() {

	slider = jQuery("#slider");
	li = $("li", slider);
	liSize = li.size();
	liWidth = sliderWidthOfEachElement+sliderBoxMarginRight;
	
	jQuery("#btnRight").click(function() {
        moveList(true);
    });
	
	jQuery("#btnLeft").click(function() {
        moveList(false);
    });
}

function animateTooltip(toRight) {
    if(toRight) element = 4;
	else element = 2;
    if(jQuery.browser.msie) {
		jQuery("#bubble").css("visibility", "hidden");
		jQuery("#bubbleText").html(jQuery(ul.children()[element]).find("img").attr("title"));
		fixBubblePosition();
		window.setTimeout("animateTooltipBack()", sliderTimeAnimationLength * 1000);
	}
	else {
		jQuery("#bubble").animate({
				opacity: 0,
				top: '20px'
		}, (sliderTimeAnimationLength * 1000 / 2 - 150), function() {
				  jQuery("#bubbleText").html(jQuery(ul.children()[element]).find("img").attr("title"));
				  fixBubblePosition();
				  
				  window.setTimeout("animateTooltipBack()", 300);
				});
	}
}
	
function animateTooltipBack() {
	if(jQuery.browser.msie) {
		jQuery("#bubble").css("visibility", "visible");
	}
	else {
		jQuery("#bubble").animate({
				opacity: 1,
				top: '0px'
			}, sliderTimeAnimationLength * 1000 / 2 - 150);
	}
}

function activateButtons() {
	running = false;
}

$(document).ready(function() {
	initSlider();
	generateSliderFromList();
});