var currentLeinwandTeaser = 1;
var currentLeinwandTab = 1;

var productWidth1 = 0;
var productWidth2 = 0;
var productWidth3 = 0;

var wrap1 = null;
var wrap2 = null;
var wrap3 = null;

var leinwaende1 = null;
var leinwaende2 = null;
var leinwaende3 = null;

var teaserTimeout = null;
var numTeaser = 3;
var autoBlendTime = 5000;
var blentTime = 750;

var clickScrollWidth = 20;

$(document).ready(function()
{
	wrap1 = $(".handlewrapper1");
	wrap2 = $(".handlewrapper2");
	wrap3 = $(".handlewrapper3");
	
	leinwaende1 = $(".leinwandItems1");
	leinwaende2 = $(".leinwandItems2");
	leinwaende3 = $(".leinwandItems3");	
	
    $("#teaserdot1").click(function () {
		clearTimeout(teaserTimeout);
		fadeToLeinwand(1);
		return false;
    });
    $("#teaserdot2").click(function () {
		clearTimeout(teaserTimeout);
		fadeToLeinwand(2);
		return false;
    });
    $("#teaserdot3").click(function () {
		clearTimeout(teaserTimeout);
		fadeToLeinwand(3);
		return false;
    });
	
    $("#tabSwitch1").click(function () {
		switchToTab(1);
		return false;
    });
    $("#tabSwitch2").click(function () {
		switchToTab(2);
		return false;
    });
    $("#tabSwitch3").click(function () {
		switchToTab(3);
		return false;
    });

	productWidth1 = $(".leinwandItems1").innerWidth() - $('div.#leinwandGallery1').outerWidth();
	productWidth2 = $(".leinwandItems2").innerWidth() - $('div.#leinwandGallery2').outerWidth();
	productWidth3 = $(".leinwandItems3").innerWidth() - $('div.#leinwandGallery3').outerWidth();

	$("#slideLeft1").dblclick(function () {
		clickSlider (-clickScrollWidth, wrap1, leinwaende1);
		return false;
    });	
    $("#slideLeft1").click(function () {
		clickSlider (-clickScrollWidth, wrap1, leinwaende1);
		return false;
    });
    $("#slideRight1").dblclick(function () {
		clickSlider (clickScrollWidth, wrap1, leinwaende1);
		return false;
    });
    $("#slideRight1").click(function () {
		clickSlider (clickScrollWidth, wrap1, leinwaende1);
		return false;
    });
	
	$("#slideLeft2").dblclick(function () {
		clickSlider (-clickScrollWidth, wrap2, leinwaende2);
		return false;
    });	
    $("#slideLeft2").click(function () {
		clickSlider (-clickScrollWidth, wrap2, leinwaende2);
		return false;
    });
    $("#slideRight2").dblclick(function () {
		clickSlider (clickScrollWidth, wrap2, leinwaende2);
		return false;
    });
    $("#slideRight2").click(function () {
		clickSlider (clickScrollWidth, wrap2, leinwaende2);
		return false;
    });	
	
	$("#slideLeft3").dblclick(function () {
		clickSlider (-clickScrollWidth, wrap3, leinwaende3);
		return false;
    });	
    $("#slideLeft3").click(function () {
		clickSlider (-clickScrollWidth, wrap3, leinwaende3);
		return false;
    });
    $("#slideRight3").dblclick(function () {
		clickSlider (clickScrollWidth, wrap3, leinwaende3);
		return false;
    });
    $("#slideRight3").click(function () {
		clickSlider (clickScrollWidth, wrap3, leinwaende3);
		return false;
    });	
	
 	$(function() {
		$(".handlewrapper1").slider({
			orientation: 'horizontal',
			range: 0,
			max: productWidth1,
			value: 0,
			animate: true,
			slide: refreshSwatch1,
			change: refreshSwatch1
		});
	});
	
	$(function() {
		$(".handlewrapper2").slider({
			orientation: 'horizontal',
			range: 0,
			max: productWidth2,
			value: 0,
			animate: true,
			slide: refreshSwatch2,
			change: refreshSwatch2
		});
	});	

	$(function() {
		$(".handlewrapper3").slider({
			orientation: 'horizontal',
			range: 0,
			max: productWidth3,
			value: 0,
			animate: true,
			slide: refreshSwatch3,
			change: refreshSwatch3
		});
	});	

	teaserTimeout = window.setTimeout(autofade, autoBlendTime);	
});

function clickSlider(speed, wrapper, leinwaende)
{
	var pos = wrapper.slider("value");
	var max = wrapper.slider('option', 'max');
	
	if (speed > 0)
	{
		if (pos < max)
		{
			pos += speed
			
			if (pos > max)
			{
				pos = max;
			}
			wrapper.slider('value',pos);
			leinwaende.css("left", '-' + pos + 'px');
		}
	}		
	else
	{
		if (pos > 0)
		{
			pos += speed
			
			if (pos < 0)
			{
				pos = 0;
			}
			wrapper.slider('value',pos);
			leinwaende.css("left", '-' + pos + 'px');
		}	
	}
}

function refreshSwatch1() {
	var pos = wrap1.slider("value");
	leinwaende1.css("left", '-' + pos + 'px');
}

function refreshSwatch2() {
	var pos = wrap2.slider("value");
	leinwaende2.css("left", '-' + pos + 'px');
}

function refreshSwatch3() {
	var pos = wrap3.slider("value");
	leinwaende3.css("left", '-' + pos + 'px');
}	


function switchToTab(numTab)
{
	//console.debug("switchToTab: " + numTab);
	if (numTab == currentLeinwandTab)
	{
		return;
	}
		
	var newTabName = "#leinwandGallery" + numTab.toString();
	var oldTabName = "#leinwandGallery" + currentLeinwandTab.toString();
	var tab1 = "#tabWrap1";
	var tab2 = "#tabWrap2";
	var tab3 = "#tabWrap3";

//	$(newTabName).css('display', 'block');
//	$(oldTabName).css('display','none');

	$(newTabName).css('visibility', 'visible');
	$(oldTabName).css('visibility','hidden');

	switch (numTab)
	{
		case 1:
			$(tab1).removeClass();
			$(tab1).addClass('leinwandTab1_1');
			$(tab2).removeClass();
			$(tab2).addClass('leinwandTab2_1');
			$(tab3).removeClass();
			$(tab3).addClass('leinwandTab3_1');
		break;
				
		case 2:
			$(tab1).removeClass();
			$(tab1).addClass('leinwandTab1_2');
			$(tab2).removeClass();
			$(tab2).addClass('leinwandTab2_2');
			$(tab3).removeClass();
			$(tab3).addClass('leinwandTab3_2');
		break;
				
		case 3:
			$(tab1).removeClass();
			$(tab1).addClass('leinwandTab1_3');
			$(tab2).removeClass();
			$(tab2).addClass('leinwandTab2_3');
			$(tab3).removeClass();
			$(tab3).addClass('leinwandTab3_3');
		break;
	}
	currentLeinwandTab = numTab;		
}


function autofade()
{
	var newTeaser = currentLeinwandTeaser + 1;
	if (newTeaser > numTeaser)
	{
		newTeaser = 1;
	}
	
	fadeToLeinwand(newTeaser);
	teaserTimeout = window.setTimeout(autofade, autoBlendTime);
}

function fadeToLeinwand(numLeinwand)
{
	if (currentLeinwandTeaser == numLeinwand)
	{
		return;
	}

	var newLayerName = '#r1layer' + numLeinwand.toString();
	var oldLayerName = '#r1layer' + currentLeinwandTeaser.toString();
	var newDotName = '#teaserdot' + numLeinwand.toString();
	var oldDotName = '#teaserdot' + currentLeinwandTeaser.toString();
		
	if (numLeinwand > currentLeinwandTeaser)
	{
		if (numLeinwand > currentLeinwandTeaser + 1)
		{
			for (var x = currentLeinwandTeaser + 1; x < numLeinwand; x++)
			{
				var disableLayerName = '#r1layer' + x.toString();
				$(disableLayerName).fadeOut("fast");
			}
		}

		$(newLayerName).fadeIn("fast");
		$(oldLayerName).fadeOut(blentTime);
	}
	else
	{
		$(newLayerName).fadeIn("slow");
	}
		
	$(newDotName).addClass('current');
	$(oldDotName).removeClass('current');

	currentLeinwandTeaser = numLeinwand;
}