var farbe = "";
var groesse = "";
var variationen = false;
var varProd = "";

function order(prodid)
{
 
	if (variationen==true && varProd=="")
	{
		alert("Bitte wählen Sie erst ein Format des Produkts aus!");
	}

	if (variationen==true && varProd!="")
	{
			
		top.location.href = "http://intern.map-box.de/karten.html?prod="+varProd;
	}
	
	if (variationen==false && varProd=="")
	{
		top.location.href = "karten.html?prod="+prodid;
	}

}


function selectFarbe(id, prodid)
{
	if (farbe != id && farbe != "")
	{
		$("farbe"+farbe).setStyle("border","1px solid #D5D5D5");
	}
	$("farbe"+id).setStyle("border","1px solid red");
	farbe = id;
	setBasketLink(prodid);
}

function selectGroesse(index, prodid)
{
	index = index + 1;
	groesse = index;
	setBasketLink(prodid);
}

function setBasketLink(prodid)
{
	if (farbe=="" && groesse!="") $("prod_order").href = "karten.html?prod="+prodid+"_"+groesse;
	if (farbe!="" && groesse=="") $("prod_order").href = "karten.html?prod="+prodid+"_"+farbe;
	if (farbe!="" && groesse!="") $("prod_order").href = "karten.html?prod="+prodid+"_"+groesse+"_"+farbe;
}



function zoomProd(imgtoshow, prodid, piccount)
	{
		if(this.zoomed)return;
		this.zoomed = true;
		if ($("conf_box")) $("conf_box").setStyle("display","none"); 
		
		this.zoompic = imgtoshow;
		var cc = $("content_detail").getCoordinates();
		var pc = $(imgtoshow == 0?"prod_zoom":"prodex_"+imgtoshow).getCoordinates();
		var zoombg = new Element("div",{id : 'zoombg',styles : {
			
			position:"absolute", 
			
			left : pc.left,
			top : pc.top,
			width : pc.width,
			height : pc.height,
			opacity : 0.55,
			background : '#000'
		},'events' : { 
			'click' : function()
			{
				exitZoom();
			}
			}});
		zoombg.inject(document.body);

		zoombg.effects({duration:288,onComplete : function()
			{
				//this.element.setStyle();
				
				var zc = this.element.getCoordinates();
				var l = zc.left + ((zc.width - 50) / 2);
				var t = $("content_detail_content").getCoordinates().top + 100;//zc.top + ((zc.height - 50) / 2);
				
				var loadbox  = new Element("div",{
					id : 'zoomloadbox',
					styles : {
						"background":"url(/fileadmin/templates/img/load.gif) center center no-repeat #fff",
						position:'absolute',
						
						left : l,
						top : t,
						height : 50,
						width : 50
					}
				});
				
				loadbox.inject(document.body);
				
				
				
				//console.log();
				
				
				setTimeout(function(){new Asset.image("/get.jpg?w=420&h=480&prid="+prodid+"&i="+imgtoshow,{onload: function(){
					
						//warum feuerst du sau 2x?
						if(!this.fired)
						{
							this.fired = true;
						
							$("zoomloadbox").setStyle("background","#fff");
							tmpimg = this;
							
							//console.log(this);
							
							this.height = 480;
							this.width = 420;
							
							zc = $("zoombg").getCoordinates();
							var l = zc.left + ((zc.width - (this.width+20)) / 2);
							var t = $("content_detail").getCoordinates().top + 50;//zc.top + ((zc.height - (this.height+20)) / 2);
							
							$("zoomloadbox").effects({duration:299,onComplete:function()
								{
									
									this.element.setStyle("padding","10px");
									tmpimg.inject(this.element);
									
									var fc = this.element.getCoordinates();
									
									
									var nbtn = new Element("a",{'href':'#','id':'zoomnbtn','events':{
											'click' : function(_e)
											{
												new Event(_e).stopPropagation().preventDefault();
												zoompicstep(1,prodid,piccount);
											}
										}}).inject($("zoomloadbox"));
									var lbtn = new Element("a",{'href':'#','id':'zoomlbtn','events':{
											'click' : function(_e)
											{
												new Event(_e).stopPropagation().preventDefault();
												zoompicstep(-1,prodid,piccount);
											}
										}}).inject($("zoomloadbox"));
									
									var cbtn = new Element("a",{'href':'#',id : 'zoomclsbtn', 'class' : 'zoomclsbtn', events : {
																		
										click : function(pev)
										{
											var _ev = new Event(pev);
											_ev.preventDefault(); 
											exitZoom();
										}
									},
									'styles' : {
											left : fc.left + fc.width - 100,
											top : fc.top -25
										}}).appendText("schliessen");
									
									cbtn.inject(document.body);
									temp = $("zoomloadbox").getCoordinates();
								
								}}).start({
								top : t,
								left : l,
								width: this.width,
								height : this.height
							});
					
						}
					
				}})},600);
				
			}}).start({
			left : cc.left + 8,
			top: cc.top,
			width: cc.width - 14,
			height : cc.height
		});

		
		
		
	}
	
	
function zoompicstep(dir,prodid,piccount)
	{

		if(this.lockpicstep)return;
		this.lockpicstep = true;
		
		// Zählerfunktion für Hochzählen von Bildern
		if(dir == 1)
		{
			//this.zoompic = this.zoompic < 4?++this.zoompic:0;
			this.zoompic = this.zoompic < (piccount-1)?++this.zoompic:0;
		}
		else
		{
			//this.zoompic = this.zoompic > 0?--this.zoompic:4;
			this.zoompic = this.zoompic > 0?--this.zoompic:(piccount-1);
		
			
		}
		//console.log(this.zoompic);
		$("zoomloadbox").getFirst().setProperty("src","fileadmin/templates/img/blank.gif");
		
		$("zoomloadbox").setStyle("background","url(/fileadmin/templates/img/load.gif) center center no-repeat #fff");
		
		// Neues Bild generieren
		new Asset.image("/get.jpg?w=420&h=480&prid="+prodid+"&i="+this.zoompic,{onload: function(){

						if(!this.fired)
						{
							this.fired = true;
						
			
			
			this.setStyle("opacity",0);
			
			$("zoomloadbox").getFirst().replaceWith(this);
			$("zoomloadbox").getFirst().effects({duration:444,onComplete:function()
				{
					$("zoomloadbox").setStyle("background","#fff");
					lockpicstep = false;
				}}).start({opacity:1});
			
			}
		}
		
		});
		
	}
	
	
	
function exitZoom()
	{
		this.zoomed = false;
		$("zoomloadbox").remove();
		$("zoombg").remove();
		$("zoomclsbtn").remove();
		if ($("conf_box"))  $("conf_box").setStyle("display","block"); 
	}