$(document).ready(function(){
	$(".sidebar li").css("visibility","hidden");
});
$(function() {
	$("div.frames").before("<p>Please select which type of frame you'd like to view:</p><select id=\"types\"></select>");
	$("#types").append("<option value=\"none\">Please select...</option>").append("<option value=\"white\">White Frame</option>").append("<option value=\"gold\">Gold-based Frame</option>");
	$("li > div.frame > img").each(function(){
		width = $(this).width();
		height = $(this).height();
		$(this).attr("orig_width",width).attr("orig_height",height).css("width",Math.round(width/2) + "px").css("height",Math.round(height/2) + "px");
	});
	$(".sidebar li").hide().css("visibility","visible");
	$("#types").change(function(){
		var sel = ".none";
		var opp = ".nonexistantelement";
		var sel = "." + $(this).val();
		if(sel == ".white"){
			var opp = ".gold";
		}
		if(sel == ".gold") {
			var opp = ".white";
		}
		if(sel == ".none"){
			$(".sidebar li").hide();
			var sel = ".nonexistantelement";
			var opp = ".nonexistantelement";
		}
		if(sel != ".nonexistantelement"){
			$(sel).show().css("position","static");
			if(opp != ".nonexistantelement"){
				$(opp).css("position","static").hide();
			}

			$(sel + " > div.frame").each(function(){
				position = $(this).position();
				var top = Math.round(position.top) + "px";
				var left = Math.round(position.left) + "px";
				$(this).attr("orig_top",top).attr("orig_left",left);
				//alert("top = " + top + "\nleft = " + left);
			});
			$(sel + " > div.frame").each(function(){
				$(this).css("position","absolute").css("top",$(this).attr("orig_top")).css("left",$(this).attr("orig_left"));
			});


			var drag_options = { zIndex: 2700, drag: function() {
				cur_width = $("img",this).width();
				cur_height = $("img",this).height();
				orig_width = $("img",this).attr("orig_width");
				orig_height = $("img",this).attr("orig_height");
				if(cur_width != orig_width){
					orig_top = $(this).attr("orig_top");
					orig_left = $(this).attr("orig_left");
					$(this).clone().insertAfter(this).css("position","absolute").css("top",orig_top).css("left",orig_left).draggable(drag_options);
					$(this).css("z-index","3000");
					$("span.close",this).css("display","block").click(function(){
						$(this).parent().fadeOut(500, function() { $(this).remove(); });
					});

					$("img",this).css("width",orig_width + "px").css("height",orig_height + "px");
					$("p",this).css("width",orig_width-10 + "px");
				}
			} };
			$(sel + " > div.frame").draggable(drag_options);

			lastpos = $(sel + " > div.frame:last").position();
			lastheight = $(sel + " > div.frame:last").height();
			$(".sidebar").css("height",lastpos.top + lastheight + "px");


		}

	});
	
});