var coverfade = 0.5;
var hasImage = 0;
var thumbBase = "/thumbs/x"
var thumbWidth = "1280";
var thumbURI = thumbBase+thumbWidth;
$(document).ready(function() {

	$(document.body).append("<div id='result' style='display:none'></div>");
	$(document.body).append("<div id='thumbs' style='position:absolute; right:0px; top:0px; width:120px; border:solid 1px red; height:99%; display:none;z-index:10001; overflow:auto; background-color:#DDD;'></div>");
	$(document.body).append("<div id='colors' style='position:absolute; right:120px; top:0px; width:200px; height:200px; display:none;z-index:10001; background-color:#DDD;'></div>");

	$(document.body).append("<div id='daimage' style='position:absolute; right:0px; top:0px; width:100%;height:99%;z-index:1;><img style='width:100%;'></div>");
	$(document.body).append("<div id='dacover' style='position:absolute; right:0px; top:0px; width:100%;height:99%;z-index:2;'>&nbsp;</div>");
//$("#design4").html("&nbsp;x");
//	$("#design4").css({"zIndex":"10", "width":"680px","height":"100%", "backgroundColor":"#FFFFFF", "position":"absolute", "top":0, "left":0});
	$(".render").css({"zIndex":"10000", "position":"relative"});
	$("#sidebar").css({"zIndex":"10010"});
	$("#header").css({"zIndex":"9999"});
	
	$("#thumbs").load("/common/background/listimages.php", function(){
		var html = "<div id='hof'><div id='starter' style='cursor:pointer;position:absolute;width:10px;height:10px;right:10px;top:0px;border:solid 1px blue;background-color:#EEE;z-index:10002;'>&nbsp;</div>";
		html += "<div id='picker' style='cursor:pointer;position:absolute;width:10px;height:10px;right:30px;top:0px;border:solid 1px blue;background-color:#EEE;z-index:10002;'>&nbsp;</div>";
		html += "<div id='reset' style='cursor:pointer;position:absolute;width:10px;height:10px;right:50px;top:0px;border:solid 1px blue;background-color:#EEE;z-index:10002;'>&nbsp;</div>";
		html += "</div>";
		$(document.body).append(html);
		$("#starter").toggle(
			function(){
				$("#thumbs").show("slow");
				$(".athumb").bind( "click", function(){
					//alert($(this).attr("title"));
					
					$("#daimage").html("<img style='width:100%;' src='"+thumbURI + "/" + $(this).attr("title") + "' />" );
					doImage( thumbURI + "/" + $(this).attr("title") );
					hasImage = 1;
					$(".slider2").slider({
						slide: function(event, ui) { $("#daimage").css({ "opacity": ui.value/100  } );	},
						stop: function(event, ui){ doFade(ui.value, "#daimage");}
					});

				});
			},
			function(){
				$("#thumbs").hide("slow");
				$(".athumb").unbind( "click");
			}
		);
		$("#picker").toggle( 
			function(){
				var html = "";
				html += "<h2>Hintergrund</h2><div class='rad' style='width:200px; height:200px;'></div>";
				html += "<div class='tp'>Transparenz Deckfarbe</div<div class='slider1' style='margin:5px;width:200px; height:10px;'></div>";
				html += "<div class='tp'>Transparenz Bild</div<div class='slider2' style='margin:5px;width:200px; height:10px;'></div>";
				html += "<h2>Vordergrund</h2><div class='rad2' style='width:200px; height:200px;'></div>";
				html += "<div class='tp'>Transparenz Vordergrund</div<div class='slider3' style='margin:5px;width:200px; height:10px;'></div>";
				html 
				$("#colors").html("<div class='palette'>"+html+"</div>");
				$(".rad").farbtastic(doColor);
				$(".rad2").farbtastic(doColor2);

				$("#colors").show();

				$(".slider1").slider({
					slide: function(event, ui) { $("#dacover").css({ "opacity": ui.value/100  } );	},
					stop: function(event, ui){ doFade(ui.value, "#dacover");}
				});
				$(".slider3").slider({
					slide: function(event, ui) { $("#design4").css({ "opacity": ui.value/100  } );	},
					stop: function(event, ui){ doFade(ui.value, "#design4");}
				});
			},
			function(){
				$("#colors").hide();
			}
		);
		$("#reset").click( function(){
			$("#daimage").html("");
			$("#dacover").css({ "opacity": 0  } );
			$("#design4").css({"backgroundColor": "transparent"});
			cssreset();
			window.location.href = window.location.href;
		});
	});

});

function doColor(color){
	$("#dacover").css({"backgroundColor":color});
	setCss("#dacover", "background-color", color);
}
function doColor2(color){
	var tgt = "#design4";
	$(tgt).css({"backgroundColor":color});
	$(".render").css({"backgroundColor":"transparent"});
	setCss("#design4", "background-color", color);
	setCss(".render", "background-color", "transparent");
}
function doFade(val, tgt){
	setCss(tgt, "opacity", val/100)
}
function doImage(image){
	setCss("#daimage", "background-image", "url("+""+image+")");
}

function setCss(target, key, val, page){
	var where = (typeof(page)=="undefined") ? window.location.href : page
//	$("#result").load("/common/background/preset.php?action=css"+"&target="+escape(target)+"&key="+escape(key)+"&value="+escape(val)+"&page="+escape(where));
}
function cssreset(){
	var where = (typeof(page)=="undefined") ? window.location.href : page
	$("#result").load("/common/background/preset.php?action=reset&target=page&page="+escape(where));
}