var debug = false;

$().ready(function() {

	// Fancybox

	//$("a.fancybox").fancybox({ 'zoomSpeedIn': 0, 'zoomSpeedOut': 0, 'overlayShow': true });

	$('div#produkt-morepics > a').mouseover(function() {
		large_pic  = $(this).attr('href');
		//medium_pic = large_pic.replace(/\/large\//, '/medium/');
		medium_pic = large_pic + '&size=180';

		$('div#produkt-mainpic > a > img').attr('src', medium_pic);
		$('div#produkt-mainpic > a').attr('href', large_pic);

		$('div#produkt-morepics > a img').addClass("alphered");
		if ($(this).children('img').is('alphered') === false) {
			$(this).children('img').removeClass("alphered");
		}
		//$(this).children("img").addClass("alphered");

	});


	// ------------------------------------------------------------
	// Produktinfo Zubehoer Switcher

	$("#button-b-anzeigen").click(function(){
		$("#zubehoer").css({display:  "none"});
		$(".zubehoer-dl").css({display:  "none"});
		$("#produktinhalt").css({display:  "block"});
		$("#produkttools").css({display:  "block"});
		$(".zubehoer-pb").css({display:  "block"});

		$("#produktbeschreibung").css({background:  "#D1D4D6 url(images/produkte/icon-produktbeschreibung.png) no-repeat scroll 158px 10px;"});
		$("#produktzubehoer").css({background:  "#EDEFF0 url(images/produkte/icon-produktzubehoer.png) no-repeat scroll 150px 10px"});

	});

	$("#button-z-anzeigen").click(function(){
		$("#produktinhalt").css({display:  "none"});
		$(".zubehoer-pb").css({display:  "none"});
		$("#produkttools").css({display:  "none"});
		$("#zubehoer").css({display:  "block"});
		$(".zubehoer-dl").css({display:  "block"});

		$("#produktbeschreibung").css({background:  "#EDEFF0 url(images/produkte/icon-produktbeschreibung.png) no-repeat scroll 158px 10px;"});
		$("#produktzubehoer").css({background:  "#D1D4D6 url(images/produkte/icon-produktzubehoer.png) no-repeat scroll 150px 10px"});
	});

	// TABELLEN-SLIDER
	// ---------------

	// Viewport erstellen
	$('ul.wrapper_for_columns').wrap('<div class="viewport_for_columns"></div>');

	// Tabellen-Wrapper absolut positionieren
	$('ul.wrapper_for_columns').css('position', 'absolute');

	// Buttons zum Schliessen der einzelnen Tabellen wieder anzeigen
	$('ul.wrapper_for_columns div.table-header img').show();

	// Slider anzeigen
	$('div.scroll_navigation').show();

	// jeder info tabelle eine id geben
	$("div.innerinfotabelle div.viewport_for_columns ul li table").each(function() {
		id = $(this).parent().parent().parent().parent().parent().parent().parent().attr('id').replace(/[^a-z0-9]/, '');
		id = id + $(this).attr('class').replace(/[^a-z0-9]/, '');

		$(this).attr('id', id);
	});

	// Fuer jedes Produkt...
	$("div.innerinfotabelle").each(function(i) {

		// Maximal verfuegbare Breite
		var max_width = $(this).width();
		//log(max_width);

		// Breite der statischen Tabelle auf der linken Seite
		var infotabelle_width = $(this).find('#left_table').width();
		//log(infotabelle_width);

		// Breite + Hoehe des Viewports auf der rechten Seite berechnen
		var viewport_for_columns_width = (max_width - infotabelle_width-1);
		var viewport_for_columns_height = $(this).find('table.infotabelle').height();
		log("--- viewport_for_columns_width = " + viewport_for_columns_width);

		// Breite + Hoehe dem Viewport zuweisen
		$(this).find('div.viewport_for_columns').width(viewport_for_columns_width).height(viewport_for_columns_height).css('overflow', 'hidden');

		// SLIDER
		//var slider = new Object;

		var slider = {};

		//log(i+1);

		// die Scrollbar
		slider.scrollbar = $('div#slider-bar'+(i+1));
		log(slider.scrollbar);

		// die Slider-Bar
		slider.bar = $('div#slider-bar'+(i+1)+' div.indicator');
		log(slider.bar);
		slider.bar_pos = 0;

		// Das zu slidende Objekt
		slider.wrapper_for_columns = $(this).find('ul.wrapper_for_columns');
		log(slider.wrapper_for_columns);
		slider.wrapper_for_columns.pos = 0;
		slider.wrapper_for_columns.pos_max = 0;
		
		var wrapper_for_columns_width = $(this).find('ul.wrapper_for_columns').width();

		slider.viewport = $(this).find('div.viewport_for_columns');
		//log(slider.viewport);

		//	die Info-Tabellen
		slider.columns = $(this).find('ul.wrapper_for_columns li table');
		//log(slider.columns);
		
		// Slider nicht anzeigen, wenn genug Platz da ist
		columns_width = 0;
		slider.columns.each(function(column_index, column) {
			columns_width += $(column).width();
		});
		log(columns_width);
		log(viewport_for_columns_width);
		if (columns_width < viewport_for_columns_width 
				|| wrapper_for_columns_width > viewport_for_columns_width) {
			slider.scrollbar.parents('.ih-rechts').hide();
			$(this).find('div.table-header img').hide();
			return;
		}

		// Werte fuer Slider ermitteln
		slidevalues = set_slidevalues(slider);
		//log(slidevalues);

		// die Slide-Schaltflaechen fuer rechts und links
		slider.slider_left = $('div#slider-bar'+(i+1)).siblings('div.slider-pfeile').find('a.slide_left');
		log(slider.slider_left);
		//slider.slider_left.hide();
		slider.slider_left.click(function(){
			slide_step(slider,'left');
			return false;
		});

		slider.slider_right = $('div#slider-bar'+(i+1)).siblings('div.slider-pfeile').find('a.slide_right');
		log(slider.slider_right);
		slider.slider_right.click(function(){
			slide_step(slider,'right');
			return false;
		});

		slide(slider);

		// die Toggle-Funktion der Tabellen
		bind_table_toggle(slider);

		//return false;

	});

});

function slide(slider) {
	// Hoehe der hoechsten Spalte
	var max_li_height = slider.columns.height();
	//log("max_li_height = "+max_li_height);

	// Hoehe aller Spalten auf Hoehe der hoechsten Spalte setzen
	slider.columns.height(max_li_height);
	log("slider.columns.height() = "+slider.columns.height());

	// Hoehe des Vieports auf Hoehe der hoechsten Spalte setzen
	slider.viewport.height(max_li_height);

	slider.scrollbar.slider({
		min: 0,
		max: slider.wrapper_for_columns.pos_max,

		handle: slider.bar,

		stop: function (event, ui) {
			log('### slidestop() ###');

			/*log('slider.bar_pos_new = '+slider.bar_pos_new);

			if (slider.bar_pos_new != $(this).slider('value')) {
				log('slider.bar_pos = '+slider.bar_pos);
				slider.bar_pos = slider.bar_pos_new;
				log('slider.bar_pos = '+slider.bar_pos);
			}*/
			//slider.wrapper_for_columns.animate({'left' : ui.value * -1}, 500);

			slider = set_slidevalues(slider);
		},

		slide: function (event, ui) {
			log("### slide() ###");
			log('slider.wrapper_for_columns.pos_max = '+slider.wrapper_for_columns.pos_max);

			slider.bar_pos = ui.value;
			log('slider.bar_pos = '+slider.bar_pos);

			// Beim Sliden ueber die Schaltflaechen animieren
			if (slider.slide_step) {
				slider.wrapper_for_columns.animate({'left' : slider.bar_pos * -1}, { easing:'linear', duration:300 });
			}
			else{
				slider.wrapper_for_columns.css('left', slider.bar_pos * -1);
			}
			delete(slider.slide_step);
		}
	});

	// Work around webkit rendering bug
	if ($.browser.safari || $.browser.opera) {
		$('table.infotabelle').each(function(i, table) {
			$(table).width($(table).width() - 1);
		});
	}
}

function slide_step(slider,direction) {
	log('### slide_right() ###');

	log('slider.bar_pos = '+slider.bar_pos);
	log('slider.slidevalues.step_width = '+slider.slidevalues.step_width);

	if (direction == 'left') {
		slider.wrapper_for_columns.pos = slider.bar_pos - slider.slidevalues.step_width;
	}
	else {
		slider.wrapper_for_columns.pos = slider.bar_pos + slider.slidevalues.step_width;
	}

	log('slider.wrapper_for_columns.pos = '+slider.wrapper_for_columns.pos);

	slider.slide_step = true;
	slider.scrollbar.slider("moveTo", slider.wrapper_for_columns.pos);

	return false;

}

// [unused]
function update_slider(slider) {
	log('### update_slider() ###');
	//new_slider_pos = slider_pos;

	log('slider.bar_pos_new = '+slider.bar_pos_new);

	//slider_.slider("moveTo", new_slider_pos);
	log('slider.bar_pos = '+slider.bar_pos);

}

// Ermitteln der Wrapper-Breite als Funktion,
// weil Tabellen ausgeblendet werden koennen,
// und sich die Breite somit dynamisch veraendern kann
function set_slidevalues(slider, table_which_will_be_shown) {
	if (!table_which_will_be_shown) table_which_will_be_shown = '';

	log('### set_slidevalues() ###');

	//log(typeof(slider.slidevalues));
	if (typeof(slider.slidevalues) === 'undefined') {
		slider.slidevalues = {};
	}

	// Gesamtbreite aller Spalten
	slider.slidevalues.li_width = 0;

	slider.columns.each(function() {
		// Ist die Tabelle sichtbar?
		var sametable = false;
		if (table_which_will_be_shown && $(this).attr('id') == table_which_will_be_shown.attr('id')) sametable = true;

		if ($(this).css('display') != 'none' || sametable) {
			slider.slidevalues.li_width = slider.slidevalues.li_width + $(this).width();
		}
	});
	log("li_width = "+slider.slidevalues.li_width);

	// Breite des Wrappers auf Gesamtbreite setzen
	slider.wrapper_for_columns.width(slider.slidevalues.li_width);
	log('*** Breite des Wrappers = '+slider.wrapper_for_columns.width());

	// Maxmiale Position des zu slidenden Objektes = Wrapper-Breite - Viewport-Breite
	slider.wrapper_for_columns.pos_max = slider.wrapper_for_columns.innerWidth() - slider.viewport.outerWidth();
	log('slider.wrapper_for_columns.pos_max = '+slider.wrapper_for_columns.pos_max);

	// Schrittweite fuer Pfeile
	slider.slidevalues.step_width = (slider.slidevalues.li_width / slider.columns.length);
	log('slider.slidevalues.step_width = '+slider.slidevalues.step_width);

	// All UI options can be changed with this syntax.
	// $(selectior).data("option.plugin",value);
	// $("#slider").data("max.slider",125);

	//log(typeof(slider.scrollbar.data));
	// Ist der Slider bereits initialisiert?
	if (typeof(slider.scrollbar.data) == 'function') {
		slider.scrollbar.data("max.slider", slider.wrapper_for_columns.pos_max);
	}
	else {
		log("(slider.scrollbar.data ist noch keine Funktion");
	}

	return slider;

}

function bind_table_toggle(slider) {
	log('### bind_table_toggle() ###');

	// Die Schaltflaechen ueber dem Slider SOWIE deren Pendants im Kopf der Tabelllen
	var table_toggle_buttons = slider.scrollbar.parents('div.infohead').parent("div").find("div.ih-rechts div > img, div.table-header > img");
	//log(table_toggle_buttons);

	table_toggle_buttons.each(function(index, current_obj) {
		var current_class = $(this).attr('class');

		// Die jeweilige Tabelle
		var target_table = slider.wrapper_for_columns.find('table.'+current_class);
		//log(target_table);

		// Die Schaltflaeche fuer die jeweilige Tabelle
		var toggle_button = slider.scrollbar.parents('div.infohead').parent("div").find("div.ih-rechts div > img."+current_class);
		//log(toggle_button);

		$(this).bind(
			'click', {
				toggle_button: toggle_button,
				target_table: target_table,
				slider: slider
			},
			toggle_table
		);

	});

}

function toggle_table(event) {
	log('### toggle_table() ###');

	var toggle_button = event.data.toggle_button;
	var target_table = event.data.target_table;
	var slider = event.data.slider;

	var img_path = toggle_button.attr("src");

	//log(target_table.css('display'));

	if (target_table.css('display') == 'none') { // tabelle anzeigen
		toggle_button.attr("src", img_path.replace(/\.png/, '-over.png'));
		set_slidevalues(slider, target_table);
		
		if ($.browser.safari) {
			target_table.show();
		} else {
			target_table.show('slow');
		}
	}
	else { // Tabelle verstecken
		// anzahl maximal darzustellenden tabellen
		var tbl = target_table.parent().parent().children('li').children('table.infotabelle');

		// zaehlen, wieviele tabellen zum zeitpunkt des klicks nicht angezeigt werden
		var invisible_count = 0;
		tbl.each(function() {
			if ($(this).css("display") == 'none') {
				invisible_count++;
			}
		});

		// tabelle nur verstecken, wenn es nicht die letzte sichtbare ist
		//if ((invisible_count +1 ) < tbl.length) {
			toggle_button.attr("src", img_path.replace(/\-over.png/, '.png'));
			
			if ($.browser.safari) {
				target_table.hide();
				set_slidevalues(slider);
			} else {
				target_table.hide('slow', function() {
					set_slidevalues(slider);
					//update_slider(slider);
				});
			}
		//}
	}

}

function log(what, msg_type) {
	if (debug === true) {
		if (typeof(what) != 'undefined') {
			try {
				if (typeof(msg_type) != 'undefined') {
					eval("console." + msg_type + "(what)");
				}
				else {
					console.debug(what);
				}
			}
			catch (err) {
				//alert(what);
			}
		}
	}
}