jQuery(function() {
	
	if( $(".ui-slider-content").length == 0 ) {
		return;
	}
	var ie6 = false;
	/*@cc_on
	ie6  = navigator.userAgent.toLowerCase().indexOf("msie 6.")!=-1;
	
	@*/
	
	var bg1 = jQuery(".bg-1");
	var bg2 = jQuery(".bg-2");
	
	var left = 0;
	var width = 598;
	
	var list = ["start","firma","grabmale","am-bau","im-garten"];
	var index = 0;
	
	var sliderBg = $(".slider-bg");
	
	
	var template = 
	"<div class='slider-stripe-container'> \
		<div class='slider-stripe stripe-top'></div>\
		<div class='slider-stripe stripe-middle'></div>\
		<div class='slider-stripe stripe-bottom'></div>\
		<div class='slider-text text-top'></div>\
		<div class='slider-text text-bottom'></div>\
	</div>";
	
	var cache = {};
	
	var currentElement = {};
	currentElement.stripeContainer = $(template);
	currentElement.stripe1 = currentElement.stripeContainer.find(".stripe-top");
	currentElement.stripe2 = currentElement.stripeContainer.find(".stripe-middle");
	currentElement.stripe3 = currentElement.stripeContainer.find(".stripe-bottom");
	currentElement.text1 = currentElement.stripeContainer.find(".text-top");
	currentElement.text2 = currentElement.stripeContainer.find(".text-bottom");
	currentElement.stripeContainer.css("z-index",2);
	
	var nextElement = {};
	nextElement.stripeContainer = $(template);
	nextElement.stripe1 = nextElement.stripeContainer.find(".stripe-top");
	nextElement.stripe2 = nextElement.stripeContainer.find(".stripe-middle");
	nextElement.stripe3 = nextElement.stripeContainer.find(".stripe-bottom");
	nextElement.text1 = nextElement.stripeContainer.find(".text-top");
	nextElement.text2 = nextElement.stripeContainer.find(".text-bottom");
	nextElement.stripeContainer.css("z-index",2);
	
	
	initializeElement(currentElement, index);
	initializeElement(nextElement, index+1);
	
	
	
	                                         
	sliderBg.append(currentElement.stripeContainer);
	sliderBg.append(nextElement.stripeContainer);
	
	
	
	currentElement.text1.css({"top":0});
	currentElement.text2.css({"bottom":0});
	currentElement.stripe1.css({"left":0,opacity:1});
	currentElement.stripe2.css({"left":0,opacity:1});
	currentElement.stripe3.css({"left":0,opacity:1});
	
	var topHeight = nextElement.stripe1.height();
	var bottomHeight = nextElement.stripe3.height();
	
	var startCount = 0;
	function startWaiter() {
		startCount++;
		if( startCount == 2 ) {
			
			currentElement.text1.css({"top":cache[list[0]].text1EndTop});
			currentElement.text2.css({"bottom":cache[list[0]].text1EndTop});
			
			
			window.setTimeout(animate,3000);
		}
	}
	waitForReady(index, startWaiter);
	
	waitForReady(index+1, startWaiter);
	
	
	function waitForReady( index, callback ) {
		var key = list[index];
		if( !cache[key].ready ) {
			cache[key].callbacks.push(callback);
		} else {
			callback();
		}
	}
	
	
	index++;
	
	function initializeElement( element, index ) {
		var key = list[index];
		
		
		var needsLoad = false;
		
		if( !cache[key] ) {
			cache[key] = {};
			cache[key].strip = new Image();
			cache[key].stripOverlay = new Image();
			cache[key].text1 = new Image();
			cache[key].text2 = new Image();
			cache[key].callbacks = [];
			
			cache[key].readyCount = 0;
			cache[key].ready = false;
			
			cache[key].strip.onload
			= cache[key].stripOverlay.onload
			= cache[key].text1.onload
			= cache[key].text2.onload = ready;
			
			cache[key].strip.src = "images/slider1/"+key+".jpg";
			cache[key].stripOverlay.src = "images/slider1/"+key+"-overlay.jpg";
			cache[key].text1.src = "images/slider1/"+key+"/text-top.png";
			cache[key].text2.src = "images/slider1/"+key+"/text-bottom.png";
			
			
		}
		
	
		
		element.stripe1.css("backgroundImage","url("+cache[key].stripOverlay.src+")");
		element.stripe2.css("backgroundImage","url("+cache[key].strip.src+")");
		element.stripe3.css("backgroundImage","url("+cache[key].stripOverlay.src+")")
		
		if( ie6 ) {
			element.text1.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+cache[key].text1.src+'\',sizingMethod=\'scale\')');
			element.text2.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+cache[key].text2.src+'\',sizingMethod=\'scale\')');
		} else {
			element.text1.css({"backgroundImage":"url("+cache[key].text1.src+")"});
			element.text2.css({"backgroundImage":"url("+cache[key].text2.src+")"});
		}
		
		element.text1.css({"top":-40,"width":0,"height":0});
		element.text2.css({"bottom":-40,"width":0,"height":0});

		element.stripe1.css({"left":width,opacity:0});
		element.stripe2.css({"left":width,opacity:1});
		element.stripe3.css({"left":-width,opacity:0});
		
		waitForReady(index, function() {
			element.text1.css({"width":cache[key].text1Size.width,"height":cache[key].text1Size.height});
			element.text2.css({"width":cache[key].text2Size.width,"height":cache[key].text2Size.height});
		});
		
		
		function ready() {
			cache[key].readyCount++;
			
			if( cache[key].readyCount == 4 ) {
				
				cache[key].text1Size = {"width":cache[key].text1.width,"height":cache[key].text1.height};
				cache[key].text2Size = {"width":cache[key].text2.width,"height":cache[key].text2.height};
				cache[key].text1EndTop = (topHeight-cache[key].text1Size.height)/2;
				cache[key].text2EndTop = (bottomHeight-cache[key].text2Size.height)/2;
				
				if( cache[key].callbacks.length > 0 ) {
					for( var i=0, length = cache[key].callbacks.length ; i<length ; i++ ) {
						
						cache[key].callbacks[i]();
					}
					cache[key].callbacks.length = 0;
				}
				cache[key].ready = true;
			}
		}
	}
	
	
	function animate() {
		nextElement.stripe1.delay(500).animate({left:0,opacity:1},2000);
		nextElement.stripe2.delay(4000).animate({left:0,opacity:1},2000);
		nextElement.stripe3.delay(500).animate({left:0,opacity:1},2000);
		
		var key = list[index];
	
		
		
		nextElement.text1.delay(7500).animate({top: cache[key].text1EndTop},1000);
		nextElement.text2.delay(9000).animate({bottom: cache[key].text2EndTop},1000,stayTimer);
	}
	
	function stayTimer() {
		window.setTimeout(rotate,3000);
	}
	
	function rotate() {
		var tmp = currentElement;
		currentElement = nextElement;
		nextElement = tmp;
		
		currentElement.stripeContainer.css("z-index",1);
		nextElement.stripeContainer.css("z-index",2);
		
		index = (++index)%list.length;
		initializeElement(nextElement,index);
		waitForReady( index, animate )
	}
	
	
	
});