// JavaScript Document

$.fn.image = function(src, f){
    return this.each(function(){
      $("<img />").appendTo(this).each(function(){
         this.src = src;
         this.onload = f;
      });
    });
}

$(document).ready(function(){
	var preloader_white = '<img src="templates/ross/images/loading-white.gif" class="preloader" />';				   
	
	// Funktion zum Ausblenden des Popups
	function closePopup()
	{
		$("select").show();
		$("#popup").fadeOut("def", function(){
			$(this).remove();									
		});	
	}
	
	// Funktion zum rein- und rauszoomen der Bilder-Popups
	function zoomFunc(zoom, zoom_factor, scale_factor, anfasser_height, detail_width, detail_height)
	{
		var zoom_value = zoom*zoom_factor; // Die übergebene Zoomstufe (1-3)
		var navigator_width = $("#image-navigator").width(); // Die an das Miniaturbild angepasste Breite des Navigator-Fensters
				
		if (zoom_value==0) // Zum verhindern, dass durch Null geteilt wird
		{
			zoom_value = 1;	
		}
		
		var extra_width = (detail_width*zoom_value) - 400; // Berechnen der Größe des Containment-Containers
		var extra_height = (detail_height*zoom_value) - 400; // Berechnen der Größe des Containment-Containers
		$("#image-detail .containment").css({ // Der Containment-Container wird passend Verschoben und Vergrößert
			top: -extra_height,
			left: -extra_width,
			width: extra_width+(detail_width*zoom_value),
			height: extra_height+(detail_height*zoom_value)						
		});
				
		$("#image-navigator .anfasser").css({ // Der Anfasser im Navigator wird passend Verschoben und Vergrößert
			top: (150-(anfasser_height/zoom_value))/2,
			left: (navigator_width-(anfasser_height/zoom_value))/2,
			width: (anfasser_height/zoom_value), 
			height: (anfasser_height/zoom_value)
		});
		$("#image-detail img").css({width:(detail_width*zoom_value), height:(detail_height*zoom_value)}); // Das Bild im Slider wird vergrößert
		
		var position = $("#image-navigator .anfasser").position();
		var detail_x = (position.left * scale_factor * zoom_value) * (-1); // Der Slider wird auf der x-Achse zentriert
		var detail_y = (position.top * scale_factor * zoom_value) * (-1); // Der Slider wird auf der y-Achse zentriert
		
		$("#image-detail .slider").css({top: detail_y, left: detail_x}); // Der Slider wird an die neue Position verschoben
	}
	
	function loadImageDetailPopup(target, firstOpened)
	{
		// Hier wird per ajax die Seite popup_image.php geladen
		$("#image-detail-container").load(target+' .content', function(){	
			var detail_image_src = $("#image-detail .slider img").attr('src');
			var foo = Math.round(Math.random()*100);
			
			$("#image-detail .slider img").remove();
			$("#image-detail .slider").image(detail_image_src+"?rand="+foo, function(){
														   
				if (firstOpened==true)
				{
					$("#system-window").fadeIn("def"); // Wenn das Popup das erste Mal geladen wird, wird das Popup eingefaded
				}
				
				$("select").hide(); // Die select-Felder werden versteckt ( der IE 6 hat Probleme die hinter das Popup zu packen )
				setImageDetailPopup(); // Die click-Funktionen für das Popup werden gesetzt
				
				var detail_width = $("#image-detail img").width(); // Die Breite des Bildes
				var detail_height = $("#image-detail img").height(); // Die Höhe des Bildes
				var scale_factor = detail_height/150; // Der Faktor zum umrechnen auf die Größe des Navigators
				var move_interval = ""; // Die Interval-Variable für die oben-, rechts-, unten-, links-Buttons
				var zoom = 0; // Die erste Zoomstufe
				var zoom_max = 3; // Die maximale Zoomstufe
				var zoom_factor = 1.5; // Der Faktor der Zoom-Vergrößerung
				var extra_width = detail_width - 400; // Die Breite des Containment-Containers
				var extra_height = detail_height - 400; // Die Höhe des Containment-Containers
				
				$("#image-detail").prepend('<div class="containment"></div>'); // Der Containment-Container wird angehängt
				$("#image-detail .containment").css({
					position: 'absolute',
					top: -extra_height,
					left: -extra_width,
					width: extra_width+detail_width,
					height: extra_height+detail_height
				});
				
				$("#image-detail .bt-bottom").mousedown(function(){ // Funktion zum Scrollen nach unten
					move_interval = setInterval(function(){
						var current_position = $("#image-detail .slider").position();
						var zoom_value = zoom * zoom_factor;
						
						if ((current_position.top-5)+$("#image-detail .slider").height()>400)
						{
							if (zoom_value==0)
							{
								zoom_value = 1;	
							}
							
							var anfasser_x = ((current_position.left-5) / (scale_factor * zoom_value)) * (-1);
							var anfasser_y = ((current_position.top-5) / (scale_factor * zoom_value)) * (-1);
							
							$("#image-detail .slider").css({top: current_position.top-5});
							$("#image-navigator .anfasser").css({top: anfasser_y});
						}
					}, 10);
				}).mouseup(function(){
					clearInterval(move_interval);	
				});
				
				$("#image-detail .bt-left").mousedown(function(){ // Funktion zum Scrollen nach links
					move_interval = setInterval(function(){
						var current_position = $("#image-detail .slider").position();
						var zoom_value = zoom * zoom_factor;
						
						if ((current_position.left+5)<0)
						{
							if (zoom_value==0)
							{
								zoom_value = 1;	
							}
							
							var anfasser_x = ((current_position.left-5) / (scale_factor * zoom_value)) * (-1);
							var anfasser_y = ((current_position.top-5) / (scale_factor * zoom_value)) * (-1);
							
							$("#image-detail .slider").css({left: current_position.left+5});
							$("#image-navigator .anfasser").css({left: anfasser_x});
						}
					}, 10);
				}).mouseup(function(){
					clearInterval(move_interval);	
				});;
				
				$("#image-detail .bt-top").mousedown(function(){ // Funktion zum Scrollen nach oben
					move_interval = setInterval(function(){
						var current_position = $("#image-detail .slider").position();
						var zoom_value = zoom * zoom_factor;
						
						if ((current_position.top+5)<0)
						{
							if (zoom_value==0)
							{
								zoom_value = 1;	
							}
							
							var anfasser_x = ((current_position.left-5) / (scale_factor * zoom_value)) * (-1);
							var anfasser_y = ((current_position.top-5) / (scale_factor * zoom_value)) * (-1);
							
							$("#image-detail .slider").css({top: current_position.top+5});	
							$("#image-navigator .anfasser").css({top: anfasser_y});
						}
					}, 10);
				}).mouseup(function(){
					clearInterval(move_interval);	
				});
				
				$("#image-detail .bt-right").mousedown(function(){ // Funktion zum Scrollen nach rechts
					move_interval = setInterval(function(){
						var current_position = $("#image-detail .slider").position();
						var zoom_value = zoom * zoom_factor;
						
						if ((current_position.left-5)+$("#image-detail .slider").width()>400)
						{
							if (zoom_value==0)
							{
								zoom_value = 1;	
							}
							
							var anfasser_x = ((current_position.left-5) / (scale_factor * zoom_value)) * (-1);
							var anfasser_y = ((current_position.top-5) / (scale_factor * zoom_value)) * (-1);
							
							$("#image-detail .slider").css({left: current_position.left-5});
							$("#image-navigator .anfasser").css({left: anfasser_x});
						}
					}, 10);
				}).mouseup(function(){
					clearInterval(move_interval);
				});
						
				// Hier wird der Bildname des Großen Bilder ausgelesen und anhand diesem der Navigator angelegt			
				var current_image = $("#image-path").html();
				var sId = Math.round(Math.random()*100); // Ein hook zum austricksen der Cache-Funktion vom Internet Explorer
				current_image = 'http://ross.itm-design.com/images/product_images/popup_images/' + current_image; // Pfad  zum Bild
				$("#image-navigator").append(preloader_white); // Der Preloader wird angehängt
				$("#image-navigator").image('http://ross.itm-design.com/templates/ross/scripts/ajax.php?action=detail-navigator&image='+current_image+'&sId='+sId, function(){																														
					var new_width = $("#image-navigator img:not(.preloader)").width(); // Die neue Breite des Navigator-Fensters
					$("#image-navigator .preloader").remove();	// Der Preloader wird wieder entfernt
									
					$("#image-navigator").animate({width: new_width}, "fast", function(){ // Das Navigator-Fenster wird in die neue Breite Skaliert
						var image_height_factor = 400/detail_height; // Der Faktor um wie viel das Bild größer als das Detail-Fenster ist
						var anfasser_height = 150 * image_height_factor; // Die neue Breite und Höhe des Anfassers
						
						$("#image-detail .zoom-in").click(function(){ // Zoom-In
							if (zoom<3)
							{
								zoom++;	
								zoomFunc(zoom, zoom_factor, scale_factor, anfasser_height, detail_width, detail_height);
							}
							
							if (zoom>0)
							{
								$("#image-detail .zoom-out").show();	
							}
							
							if (zoom==2)
							{
								$("#image-detail .zoom-in").hide();	
							}
						});
						
						$("#image-detail .zoom-out").click(function(){ // Zomm-Out
							if (zoom>0)
							{
								zoom--;	
								zoomFunc(zoom, zoom_factor, scale_factor, anfasser_height, detail_width, detail_height);
							}
							
							if (zoom<3)
							{
								$("#image-detail .zoom-in").show();	
							}
							
							if (zoom==0)
							{
								$("#image-detail .zoom-out").hide();	
							}
						});
																					   
						$("#image-navigator img").fadeIn("fast"); // Das miniatur-Bild im Navigator wird eingeblendet
						$("#image-navigator").append('<div class="anfasser"></div>'); // Der Anfasser wird angehängt
						$("#image-navigator .anfasser").css({width: anfasser_height, height: anfasser_height}); // Der Anfasser bekommt die neue Breite und Höhge
						$("#image-navigator .anfasser").draggable({ containment: 'parent' }); // Der Anfasser wird draggable gemacht und als Bewegungs-Einschränkung wird das Eltern-Objekt benutzt
						
						$('#image-navigator .anfasser').bind('drag', function(event, ui) { // Wird der Anfasser bewegt, bewegt sich auch das Detail-Bild
							var position = $(this).position();
							var zoom_value = zoom * zoom_factor;
							
							if (zoom_value==0)
							{
								zoom_value = 1;	
							}
							
							var detail_x = (position.left * scale_factor * zoom_value) * (-1);
							var detail_y = (position.top * scale_factor * zoom_value) * (-1);
							
							$("#image-detail .slider").css({top: detail_y, left: detail_x});
						});
						
						$("#image-detail .slider").draggable({ containment: '#image-detail .containment'}); // Wird das Detail-Bild bewegt, bewegt sich auch der Anfasser
						$('#image-detail .slider').bind('drag', function(event, ui) {
							var position = $(this).position();
							var zoom_value = zoom * zoom_factor;
							
							if (zoom_value==0)
							{
								zoom_value = 1;	
							}
							
							var detail_x = (position.left / (scale_factor * zoom_value)) * (-1);
							var detail_y = (position.top / (scale_factor * zoom_value)) * (-1);
							
							$("#image-navigator .anfasser").css({top: detail_y, left: detail_x});
						});
					});
				});
			});
																	 
			$("#image-detail-close .link").click(function(){
				closePopup();										
			});	
		});
	}
						   
	function setImageDetailPopup()
	{
		$(".popup").click(function(){
			var target = $(this).attr('href');
								   
			if ($("#image-detail-container").length>0) // Es wird geprüft, ob das Popup bereits geöffnet ist
			{
				// Ist das Popup bereits vorhanden wird nur der Inhalt ausgeblendet und der aktualisierte Inhalt geladen
				
				$("#image-detail-container .content").fadeOut("def", function(){
					$(this).remove();
					
					loadImageDetailPopup(target, false);
				});
			} else {
				// Wird das Popup das erste mal geöffnet wird ein neuer Container erstellt
				
				$("#system-window").hide();
				$("#system-window").append('<div id="popup"><div id="image-detail-container"></div></div>');
				
				loadImageDetailPopup(target, true);
			}
								   
			return false;						   
		});
	}
	
	function contactform()
	{
		$("#kontaktformular .contact_text, #kontaktformular .contact_textarea").focus(function(){
			$(this).addClass('focus');
		});	
		
		$("#kontaktformular .contact_text, #kontaktformular .contact_textarea").blur(function(){
			$(this).removeClass('focus');
		});	
		
		var language = $("#kontaktformular label:first").html();
		
		if (language=='Vorname:<em>*</em>') {
			var mailformplus = $("#kontaktformular").validate({
				rules: {
					Vorname: "required",
					Nachname: "required",
					"E-Mail-Adresse": "required email",
					Nachricht: "required",
					"Telefon-Nr": "number"
				},
				messages: {
					Vorname: "Bitte geben Sie Ihren Vornamen ein.",
					Nachname: "Bitte geben Sie Ihren Nachnamen ein.",
					"E-Mail-Adresse": {
						required: "Bitte geben Sie Ihre E-Mail-Adresse ein.",
						email: "Ihre Eingabe muss vom Format name@meinedomain.de sein."
					},
					Nachricht: "Bitte geben Sie eine Nachricht ein.",
					"Telefon-Nr": {
						number: "Sie d&uuml;rfen nur Zahlen eingeben."	
					}
				},
				//errorLabelContainer: "#messageBox",
				//wrapper: "li",
				errorPlacement: function(error, element) {
					error.appendTo(element.parent("td").find(".messageBox"));
				},
				errorClass: "invalid"
			});
		} else {
			var mailformplus = $("#kontaktformular").validate({
			rules: {
				Vorname: "required",
				Nachname: "required",
				"E-Mail-Adresse": "required email",
				Nachricht: "required",
				"Telefon-Nr": "number"
			},
			messages: {
				Vorname: "Please enter your first name.",
				Nachname: "Please enter your surname.",
				"E-Mail-Adresse": {
					required: "Please enter your E-Mail-Address.",
					email: "Your input must be like yourname@yourdomain.com."
				},
				Nachricht: "Please enter a message.",
				"Telefon-Nr": {
					number: "You are only allowed to enter numbers."	
				}
			},
			//errorLabelContainer: "#messageBox",
			//wrapper: "li",
			errorPlacement: function(error, element) {
				error.appendTo(element.parent("td").find(".messageBox"));
			},
			errorClass: "invalid"
		});	
		}
	}
	
	function colorPicker() {
		if ($("#farbfelder").length>0){
			$("#farbfelder .farbfeld").css({
				cursor: 'pointer'
			});
			
			/*$("#farbfelder .farbfeld").hover(function(){
				$(this).not('.active').css({
					opacity: 1			
				});
			}, function(){
				$(this).not('.active').css({
					opacity: 0.5			
				});													
			});*/
			
			$("select[name=id[1]]").after('<div id="showcolor"></div>');
			var re = new RegExp('[0-9]+');
			var m = re.exec($("select[name=id[1]]").find("option:selected").html());
			var selectColorId = m;
			var color = $("#color-"+selectColorId).css('backgroundColor');
				
			$("#showcolor").css({backgroundColor: color});
			
			
			$("select[name=id[1]]").change(function(){
				var re = new RegExp('[0-9]+');
				var m = re.exec($(this).find("option:selected").html());
				var selectColorId = m;
				
				var color = $("#color-"+selectColorId).css('backgroundColor');
				
				$("#showcolor").css({backgroundColor: color});
			});
			
			$("#farbfelder .farbfeld").click(function(){
				var colorId = $(this).attr('id');
				var color = $(this).css('backgroundColor');
				colorId = colorId.replace('color-', '');
				
				$("#farbfelder .farbfeld").removeClass('active');
				
				$(this).addClass('active');
				
				$("#showcolor").css({backgroundColor: color});
				
				$("select[name=id[1]] option").each(function(){
					var re = new RegExp('[0-9]+');
					var m = re.exec($(this).html());
					var selectColorId = m;
											
					if (selectColorId == colorId) {
						$(this).attr({
							selected: 'selected'			 
						});
						//alert('match'+selectColorId);
					} 
				});
			});
		}
	}
	
	function createColorboxes() {
		var appendBoxes = false;
		if($("select[name=id[1]]").length!=0) {
			$("#short-description").append('<div id="farbfelder"></div>');
			appendBoxes = true;
		}
		
		$("select[name=id[1]] option").each(function(){
			var re_color = new RegExp('rgb\((.*)\)');
			var re_id = new RegExp('[0-9]+');
			var c_option = $(this).html();
			var color = re_color.exec(c_option);
			var id = re_id.exec(c_option);
			
			if (color!=null) {
				c_option = c_option.replace(color[0], '');
			}
			
			$(this).html(c_option);
			
			if (appendBoxes && color!=null) {
				$("#farbfelder").append('<div id="color-'+id+'" class="farbfeld" style="background: '+color[0]+';">&nbsp;</div>');	
			}
			
			//alert(id);
		});
		if (appendBoxes) {
			$("#farbfelder").append('<div class="clear-left"></div>');
		}
	}
	
	function calcPrice(inhalt, orig_price, price_pattern) {
		var	price_found = inhalt.match(price_pattern);
		
		if (inhalt.match(price_pattern)) {
			price_found = price_found[0].replace(',','.');
			
			var item_price = parseFloat(price_found);
			
			new_price = orig_price+item_price;
		} else {
			new_price = orig_price;
		}
		
		new_price = new_price.toString();
		new_price = new_price.replace('.', ',');
		
		$(".row .price").html(''+new_price+' EUR');		
	}
	
	/* Funktionsaufrufe */
	
	if ($(".row .price").length>0){	
		var orig_price = $(".row .price").html();
		var price_pattern = /[0-9]*,[0-9][0-9]/;
		var price_found = orig_price.match(price_pattern);
		price_found = price_found[0].replace(',','.');
		orig_price = parseFloat(price_found);
		
		if ($("select[name=id[2]]").length>0) {
			$("select[name=id[2]]").change(function(){
				var id = $(this).find('option:selected').val();
				var inhalt = $(this).next('.price-add-subtract').find('.'+id).html();

				calcPrice(inhalt, orig_price, price_pattern);
			});
			
			calcPrice($("select[name=id[2]]").next('.price-add-subtract div:first').html(), orig_price, price_pattern);
		}
	}
	
	var old_input_val = '';
	$("input").not('.input_submit').focus(function(){
		old_input_val = $(this).val();							  
		$(this).val('');
	});
	$("input").not('.input_submit').blur(function(){
		if ($(this).val()==''){
			$(this).val(old_input_val);
		}
	});
	
	$('.lightbox').lightBox({fixedNavigation:true});
	
	createColorboxes();
	contactform();
	colorPicker();	
	setImageDetailPopup();
});