var imagesInFilmstrip = 0;
var currentTopImage = 0;
var filmstripImages;

$(document).ready(function()
{
	//$('#settings').accordion({
		//autoheight: false,
		//header: 'h3'
	//});

	filmstripImages = $("#filmstrip li");
	imagesInFilmstrip = filmstripImages.size();
	
	if (imagesInFilmstrip <= 3) {
		$("#imagesUp").hide();
		$("#imagesDown").hide();
	}
	else {
		$("#imagesUp").click(scrollUp);
		$("#imagesDown").click(scrollDown);
	}
	
	initFilmstrip();
	
	$('#productImageLink').fancyZoom({
		directory: '/images/fancyzoom'
	});
	
	// Separate Rechnungsadresse aktivieren
	var rechnungsadresse = $('#rechnungsadresse');
	var height = rechnungsadresse.height();
	
	if($('#fSeparateRechnungsadresse').attr('checked') == true) {
		rechnungsadresse.toggle();
	} else {
		rechnungsadresse.hide().css({ height: 0});
	}
	
	$('#fSeparateRechnungsadresse').click(function() {
		var ortLbl = $('.fRechnungOrt');
		var nameLbl = $('.fRechnungName');
		
		addFormChar(ortLbl);
		addFormChar(nameLbl);
		
		rechnungsadresse.show().animate({ height: height }, { duration: 300 });
	});
	
	$('#fRechnungIsLieferadresse').click(function() {
		rechnungsadresse.animate({ height: 0 }, { 
			duration: 300, complete: function() {
				rechnungsadresse.hide();
			} 
		});
	});
	
	
	
	// Lieferadresse ändern
	if($('#fLieferadresse').is(':checked')) {
		$('#lieferadresse input').removeAttr('readonly');
		$('#lieferadresse .formElement').removeClass('readonly');
		$('#lieferadresse input').removeClass('readonly');
	}
	
	$('#fLieferadresse').click(function() {
		if($(this).is(':checked')) {
			$('#lieferadresse input[type!=checkbox]').removeAttr('readonly');
			$('#lieferadresse .formElement').removeClass('readonly');
			$('#lieferadresse input[type!=checkbox]').removeClass('readonly');
		} else {
			$('#lieferadresse input[type!=checkbox]').attr('readonly', 'readonly');
			$('#lieferadresse .formElement').addClass('readonly');
			$('#lieferadresse input[type!=checkbox]').addClass('readonly');
		}
	});
	
	// Rechnungsadresse ändern
	if($('#fRechnungsadresseAendern').is(':checked')) {
		$('#rechnungsadresse input').removeAttr('readonly');
		$('#rechnungsadresse .formElement').removeClass('readonly');
		$('#rechnungsadresse input').removeClass('readonly');
	}
	
	$('#fRechnungsadresseAendern').click(function() {
		if($(this).is(':checked')) {
			$('#rechnungsadresse input[type!=checkbox]').removeAttr('readonly');
			$('#rechnungsadresse .formElement').removeClass('readonly');
			$('#rechnungsadresse input[type!=checkbox]').removeClass('readonly');
		} else {
			//if($(this).attr('type') != 'checkbox') {
				$('#rechnungsadresse input[type!=checkbox]').attr('readonly', 'readonly');
				$('#rechnungsadresse .formElement').addClass('readonly');
				$('#rechnungsadresse input[type!=checkbox]').addClass('readonly');
			//}
		}
	});
	
	
	$('.bubble').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.trigger', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // reset position of popup box
        popup.css({
          top: -100,
          left: -33,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
  
  
  setRabattBox();
  
  $('#shophilfe .bild a').lightBox();

	shophilfePopup();
});

function shophilfePopup(source, targetId) {
	//$(source).unbind();
	//content = $('#' + targetId).html();
	
	/*$(source).qtip({
		content: content,
		style: {
			name: 'cream'
		}
	});*/
	
	$('#shophilfe span.infoMarked').each(function() {
		var source = $(this);
		
		var id = source.attr('id').split('_');
		
		var content = $('#' + id[1]).html();
	
		if(content != null) {
			source.qtip({
				content: content,
				show: {
  				delay: 0
				},
				hide: 'mouseout',
				delay: 0,
				style: {
				  width: 'auto',
  				name: 'light',
  				tip: {
  					corner: 'bottomMiddle',
  					color: '#E2E2E2',
  					size: {
  						x: 20,
  						y: 9
  					}
  				},
  				classes: {
  					content: 'rabatte'
  				}
				},
				position: {
  				corner: {
  					target: 'topMiddle',
  					tooltip: 'bottomMiddle'
  				}
				}
			});
		}
	});
}

function setRabattBox() {
	$('.rabattBox').each(function() {
  	$(this).qtip({
  		content: $(this).parent().find('.rabatte').html(),
  		show: {
  			delay: 0
  		},
  		hide: 'mouseout',
  		delay: 0,
  		style: {
  			name: 'light',
  			tip: {
  				corner: 'bottomMiddle',
  				color: '#E2E2E2',
  				size: {
  					x: 20,
  					y: 9
  				}
  			},
  			classes: {
  				content: 'rabatte'
  			}
  		},
  		position: {
  			corner: {
  				target: 'topMiddle',
  				tooltip: 'bottomMiddle'
  			}
  		}
  	});
  });
}

function addFormChar(jqueryElement) {
	if(jqueryElement.text().charAt(jqueryElement.text().length-1) != '*') {
		jqueryElement.text(jqueryElement.text() + ' *');
	}
}

function scrollUp()
{
	currentTopImage--;
	$("#filmstrip").animate({
		marginTop: -(currentTopImage * 55)
	}, 500, "linear");
	toggleControls();
}
function scrollDown()
{
	currentTopImage++;
	$("#filmstrip").animate({
		marginTop: -(currentTopImage * 55)
	}, 500, "linear");
	toggleControls();
}

function initFilmstrip()
{
	deactivateScrollButton('up');
	
	if(imagesInFilmstrip <= 3)
	{
		deactivateScrollButton('down');
	}
}

function toggleControls()
{
	if(currentTopImage >= (imagesInFilmstrip - 3))
	{
		deactivateScrollButton("down");
	}
	else if(currentTopImage < (imagesInFilmstrip - 3))
	{
		activateScrollButton("down");
	}
	
	if(currentTopImage == 0)
	{
		deactivateScrollButton("up");
	}
	else if(currentTopImage == 1)
	{
		activateScrollButton('up');
	}
}

function deactivateScrollButton(direction)
{
	var button;
	if(direction == 'up')
	{
		button = $("#imagesUp");
	}
	else
	{
		button = $("#imagesDown");
	}
	
	button.unbind('click');
	button.css('opacity', '0.4');
	button.css('cursor', 'auto')
}
function activateScrollButton(direction)
{
	var button;
	if(direction == 'up')
	{
		button = $("#imagesUp");
		button.bind('click', scrollUp);
	}
	else
	{
		button = $("#imagesDown");
		button.bind('click', scrollDown);
	}
	
	button.css('opacity', '1');
	button.css('cursor', 'pointer')
}

/**
 * @param {string} originalImage Relativer Pfad zum Originalbild
 * @param {string} displayImage Relativer Pfad zum Anzeigebild
 * @param {string} previewImage Relativer Pfad zum 50x50 Vorschaubild
 * @param {string} alternateText Alternativtext des Bildes
 */
function showImage(originalImage, displayImage, previewImage, alternateText)
{		
	$('#productImage').fadeOut(200, function()
	{
		$('#productImage').attr('src', displayImage);
		$('#productImage').attr('alt', alternateText);
		$('#productImage').fadeIn(200);
	})
	
	$('#productImageOriginal').attr('src', originalImage);
	$('#productImageOriginal').attr('alt', alternateText);
	

}

function showOverlay(title, content)
{
	$(document).ready(function()
	{
		$("#overlayTitle").html(title);
		$("#overlayContent").html(content);
	
		$("#overlay").overlay({
			top: 272,
			expose: {
				color: 'black',
				loadSpeed: 200,
				opacity: 0.5
			},
			speed: 'slow',
			api: true
		}).load();
	});
}