// jquery.slider3.js 036

$(document).ready(function() {

	var $browser = $('#browser');
	var $content = $browser.find('.inner');
	var $slider = $content.find('.slider');
	var $result = $(".result-box");
	var breadcrumbPrefix = $('h1.title').html() + " > ";
	var center = $content.width()/2;
	var contentHeight = $browser.find('UL LI A').height();
	
	// slider verhalten einfügen
	$content.attachSlider();
	// ajax loading indikator setzen
	$browser.after('<div id="loading"><img src="' + $.goin.defaults.ajaxLoadingImage + '" alt="Loading …" /></div>');
	// ajax loading indikator
	$('#loading IMG')
		.ajaxStart(function() {$(this).show();})
		.ajaxStop(function() {$(this).hide();})
	.end();
	
	// klick auf eine art ketegorie
	$browser.find('UL LI A').click(function(event) {
		event.preventDefault(); // standard klick verhalten deaktivieren
		var $A = $(this); // referenz auf das geklickte element
		// wenn das element bereits aktiv ist klick abbrechen
		if ($A.hasClass('active')) return;
		setActive.call($A); // geklicktes element optisch selektieren
		// wenn das auswahl element bereits minimiert ist 
		// muss nur noch der slider positioniert werden
		if ($browser.hasClass('collapsed')) {
			// neue slider position anhand des aktiven elements kalkulieren
			var newpos = $slider.slider('value') + $A.offset().left - $('.container').offset().left - 40 - center + $A.width()/2 + 10;
			$slider.slider('moveTo',newpos,0); // den slider auf entsprechende position setzen
		} else {
			$result.find(".no-selection").hide('fast');
			$('.jq-ibx').hideFix(); // den tooltip explizit ausblenden
			// andernfalls muss das element erst noch minimiert werden
			$content.animate({'height':contentHeight + 10},'slow',function() { 
				$browser
					.removeClass("ui-fallback")
					.addClass("ui-slider")
					.addClass("collapsed");
				
				$slider.css('margin-top',contentHeight - 5);
				// neue slider position anhand des aktiven elements kalkulieren
				var newpos = $A.offset().left - $('.container').offset().left - 40 - center + $A.width()/2 + 10;
				$slider.slider('moveTo',newpos,0); // den slider auf entsprechende position setzen
			});
		}
		
		// den neuen titel string erzeugen
		//var breadcrumbs = breadcrumbPrefix + $A.find('strong').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(' > ' + $A.find('strong').text());
		Cufon.refresh('h1.title');
		
		// request paramter aus der url auslesen
		// ajax laden der ergebnisse
		var url;
		if ($.goin.defaults.local)
			url = $.goin.defaults.ajaxBrowserServiceUrl;
		else
		  url = $A.attr('rel');
		$.get(url, function(data) {
			// ergebnis anzeigen und animieren
			$result.find(".product-matrix").slideUp('fast',function() {
				$(this).html(data).slideDown('slow');
				// tooltips neu setzen
				$result.find("LI A").tooltip();
			});
		});
	});
	// optische produkt selection durch css klassen
	function setActive() {
	  	$(this).parent().parent().find('a')
			.removeClass('active')
		$(this).addClass('active');
	}
});
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);
			}
		});
	});
}