// jquery.slider.js 036

$(document).ready(function(){

	// global ajax loading indicator
	$('#browser')
		.after('<div id="loading"><img src="' + $.goin.defaults.ajaxLoadingImage + '" alt="Loading …" /></div>');
	$('#loading IMG')
		.ajaxStart(function() {$(this).show();})
		.ajaxStop(function() {$(this).hide();})
	.end();
	
	
	// images des aktiv statuses cachen
	function preload($img) {
		$img.each(function() {
			var src = this.src.replace( /\.png$/, '_on.png' );
			$('<img />').attr('src', src);
		});
	}
	preload($("#browser LI A IMG"));
	
	
	// optische produkt selection durch css klassen
	function selectProduct() {
	  	$(this).parent().parent().find('a')
			.removeClass('active');
		$(this).parent().parent().parent().find('a')
			.removeClass('active');
		$(this).addClass('active');
	}
	
	
	/* 
	$('#browser ul li a img').hover(
		function() {
			this.src = this.src.replace( /\.png$/, '_on.png' );
		},
		function() {
			this.src = this.src.replace( /_on\.png$/, '.png' );
		}
	);*/
	var onimage = function( src ){ 
		return src.replace( /\.png$/, '_on.png' ); 
	}
	var offimage = function( src ){ 
		return src.replace( /_on\.png$/, '.png' );
	}
	
	
	var breadcrumbPrefix = $('h1.title').html() + " > ";
	//$('h1.title .sIFR-alternate').html() + " > ";
	var url = $.goin.defaults.ajaxBrowserServiceUrl;
	var $prevTarget = null; // referenz auf das zuletzt geklickte element
	var $slider = $('#browser .inner .slider');
	
	
	
	
	// dynamische höhe des elements
	// NEU! Höhe dynamisch abgreifen
	//var animateToHeight = $('#browser ul li a').height();
	
	
	
	
	
	// klick auf eine art kategorie
	$('#browser ul li a').click(function(event)
	{
		event.preventDefault(); // standard klick verhalten deaktivieren
		var $target = $(this); // referenz auf das geklickte element
		// wenn das element bereits aktiv ist klick abbrechen
		if ($target.hasClass('active')) return;
		// altes highlight zurücksetzen
		if ($prevTarget != null) {
			var img = $prevTarget.find('IMG');
			img.attr('src', offimage(img.attr('src')));	
		}
		// neues highlight setzen
		var img = $target.find('IMG');
		img.attr('src', onimage(img.attr('src')));
		$prevTarget = $target; // referenz auf geklicktes element spiegeln
		selectProduct.call($target); // geklicktes element optisch selektieren
		var rel = $target.attr('rel'); // rel tag auslesen und speichern
		//var typ = $.parseQuery(this.href);
		//$.debug(typ);
		// wenn das auswahl element bereits minimiert ist 
		// muss nur noch der slider positioniert werden
		if ($("#browser.collapsed").length > 0 ) {
			// neue slider position anhand des aktiven elements kalkulieren
			//var newpos = $slider.slider('value') - $target.offset().left + 60 + $('#browser .inner').width()/2 - $target.width()/2 - 10;
			var newpos = $slider.slider('value') + $target.offset().left - $('.container').offset().left - 40 - $('#browser .inner').width()/2 + $target.width()/2 + 10;
			$slider.slider('moveTo',newpos,0);
		} else {
			$(".result-box .no-selection").hide('fast');
			
			// NEU! Höhe dynamisch abgreifen
			var animateToHeight = $target.height();
			// andernfalls muss das element erst noch minimiert werden
			$("#browser:not(.collapsed) .inner").animate({'height': animateToHeight + 10},'slow',function(){ 
				$("#browser")
					.removeClass("ui-fallback")
					.addClass("ui-slider")
					.addClass("collapsed");
				// neue slider position anhand des aktiven elements kalkulieren
				//var newpos = -$target.offset().left + 60 + $('#browser .inner').width()/2 - $target.width()/2 - 10;
				//$.goin.debug($('.container').offset().left);
				$slider.css('margin-top',animateToHeight - 5);
				var newpos = $target.offset().left - $('.container').offset().left - 40 - $('#browser .inner').width()/2 + $target.width()/2 + 10;
				// den slider auf entsprechende position setzen
				$slider.slider('moveTo',newpos,0);
			});
		}
		// den neuen titel string erzeugen
		//var breadcrumbs = breadcrumbPrefix + $target.html();
		// entspprechendes sIFR element mit neuem text aktualisieren
		//sIFR.replacements['.main .title'][0].replaceText(breadcrumbs.toUpperCase());
		
		
		
		
		// CUFON
		if (!$('h1.title SPAN.current').length > 0)
			$('h1.title').append('<span class="current"></span>');
		$('h1.title SPAN.current').html(' > ' + $target.text());
		Cufon.refresh('h1.title');
		
		
		
		
		// ajax laden der ergebnisse
		$.get(url + rel, function(data){
			// ergebnis anzeigen und animieren
			$(".result-box .product-matrix").slideUp('fast',function(){
				$(this).html(data).slideDown('slow');
				$(".result-box LI A").tooltip();
			});
		});
	});
});
$(window).ready(function(){
	/* 
		slider 
		note: darf erst initialisiert werden wenn alle bilder geladen sind
		dies ist erst bei window ready der fall
	*/
	$('#browser .inner').attachSlider();
	
	//$('.slider', container).data("maxValue.slider",2000); 
	//$('.slider', container).slider("moveTo", 80, 1);
	//$('.slider',container).slider('moveTo','250px');
	//$('#browser .inner .slider').slider('moveTo','250px',0);
	//$.goin.debug(newpos);
});



jQuery.parseQuery = function(querystring) {
	var qsReg = new RegExp("[?][^#]*","i");
	hRef = unescape(querystring);
	var qsMatch = hRef.match(qsReg);
	//removes the question mark from the url 
	qsMatch = new String(qsMatch);
	qsMatch = qsMatch.substr(1, qsMatch.length -1);
	//split it up 
	var rootArr = qsMatch.split("&");
	for (var i=0;i<rootArr.length;i++) {
		var tempArr = rootArr[i].split("=");
		if(tempArr.length ==2) {
			tempArr[0] = unescape(tempArr[0]);
			tempArr[1] = unescape(tempArr[1]);
			this[tempArr[0]]= tempArr[1];
		}
	}
}
jQuery.fn.attachSlider = function() { 
	return this.each(function() { 
		var $outer = jQuery(this);
		var $inner = $outer.find('UL');
		//inner.after('<div class="slider"><div></div><div class="handle"><div></div></div></div>');
		var contentWidth = 0;
		$inner.find('LI').each(function() {
			if ($(this).hasClass('divider'))
				contentWidth += 23;
			else
				contentWidth += $(this).width();
		});
		contentWidth = contentWidth - $outer.width(); // container breite subtrahieren
		
		jQuery('.slider', $outer).slider({
			minValue: 0,
			maxValue: contentWidth,
			handle: '.handle',
			stop: function (event, ui) {
				$inner.animate({'left': ui.value * -1}, 500);
			},
			slide: function (event, ui) {
				$inner.css('left', ui.value * -1);
			}
		});
	});
}