var jtk = new JoookToolkit();

function moveBg(multiplier){
	var objHeight = 296;
	
	jtk.select("#switchable_bg")[0].style.backgroundPosition = "right -" + (multiplier * objHeight) + "px";
}


function drawOverlay(objInfo){
	var overlay = document.createElement("div");
	overlay.style.width = objInfo.width + "px";
	overlay.style.height = objInfo.height + "px";
	overlay.style.position = "absolute";
	overlay.style.left = objInfo.left + "px";
	overlay.style.top = objInfo.top + "px";
	overlay.style.backgroundColor = "#000";
	jtk.setOpacity(overlay, 40);
	
	
	jtk.addEvent(overlay, "click", function(){
		showLayer("form_layer", jtk.select("li", jtk.select("#content_top")[0])[1], false);
	});
	
	jtk.select("body")[0].appendChild(overlay);
}


function showLayer(layerId, object, debug){
	var layer = jtk.select("#" + layerId)[0];
	layer.style.position = "absolute";
	layer.style.left = "-9999px";
	layer.style.display = "block";
	
	var layerDims = jtk.getDimensions(layer);
	var objPos = jtk.getPosition(object);
	
	var yOffset = layerDims.height - 12;

	var offset = {x: -10, y: -yOffset};
	
	if(debug == true){
		var objDims = jtk.getDimensions(object);
		
		var debugInfo = "Layer\nPosition: " + (objPos.left + offset.x) + ", " + (objPos.top + offset.y) + "\n";
		debugInfo += "Dimensions: " + layerDims.width + "x" + layerDims.height + "\n\n";
		
		debugInfo += "Button\nPosition: " + (objPos.left) + ", " + (objPos.top) + "\n";
		debugInfo += "Dimensions: " + objDims.width + "x" + objDims.height;
		
		drawOverlay({left: objPos.left, top: objPos.top, width: objDims.width, height: objDims.height});
		
		alert(debugInfo);
	}
	else{
		layer.style.left = objPos.left + offset.x + "px";
		layer.style.top = (objPos.top + offset.y) + "px";
	}
}

function hideLayer(layerId){
	jtk.select("#" + layerId)[0].style.display = "none";
}