var wallpaper = {
	ui: $("#wallpaperbuilder-preview"),
	resizerui: $('<div class="wallpaper-resizer ui-state-default ui-corner-all"><span class="ui-icon ui-icon-plus"></span><span class="ui-icon ui-icon-minus"></span></div>'),
	resizer: function(img){
		var params = {
			my: "center center",
			at: "center center",
			of: img
		};
		wallpaper.resizerui.appendTo("body").show().position(params);
		$(".ui-icon-plus").unbind("click").click(function(){
			var $img = $(img);
			$img.width( 10 + $img.width() );
			wallpaper.resizerui.position(params);
		})
		$(".ui-icon-minus").unbind("click").click(function(){
			var $img = $(img);
			$img.width( $img.width() - 10 );
			wallpaper.resizerui.position(params);
		})
	},
	setbackground: function(){
		
		wallpaper.ui = $("#wallpaperbuilder-preview");
		
		$("#wallpaperbuilder-instructions").hide();
		
		var $focus = $(".wallpaperbuilder-bg", wallpaper.ui);
		if(!$focus.length) $focus = $('<img class="wallpaperbuilder-piece wallpaperbuilder-bg" />').prependTo(wallpaper.ui);
		$focus.attr("src", $(this).attr("thumb"))
			.attr("file", $(this).attr("file"));
			
	},
	add: function(){
	
	
		$("#wallpaperbuilder-instructions").hide();
	
		$('<img class="wallpaperbuilder-piece" title="Double Click to remove" />')
			.attr("src", $(this).attr("thumb"))
			.attr("file", $(this).attr("file"))
			.mouseover(function(){ 
				$(this).draggable( { 
					containment: 'parent', 
					drag: function(){ wallpaper.resizerui.hide();  }, 
					stop: function(){ 
						wallpaper.resizerui.show().position({
							my: "center center",
							at: "center center",
							of: this
						}); 
					} 
				})
				wallpaper.resizer(this);
			})
			.mousedown(function(){ $(this).appendTo(wallpaper.ui); })
			.dblclick(function(){ 
				$(this).remove(); 
				wallpaper.resizerui.hide();
			})
			.appendTo(wallpaper.ui);
		
	},
	params : function(size, download){
		var $imgs = $(".wallpaperbuilder-piece"),
			url = "";
		$imgs.each(function(i, o){
			var _x = ($(this).position().left+160) * 100/19.05,
				_y = ($(this).position().top+90) * 100/19.05,
				_w = $(this).width() * 100/19.05;
			url += "imgs["+i+"][img]="+$(this).attr("file")+"&imgs["+i+"][x]="+ _x +"&imgs["+i+"][y]="+ _y  +"&imgs["+i+"][w]="+ _w +"&";
		});
		url = url.substr(0, url.length - 1);
		return url;
	},
	download: function(size){
		
		window.open("http://www.thebigchillatthebighouse.com/wallpaper.php?download=1&size="+size+"&" + wallpaper.params(), "_blank");
		
	},
	sendtofriend: function(){
		
		$.ajax({
			
			url: "sendtofriend.php",
			data: $(this).serialize() + "&" + wallpaper.params(),
			success: function(data){
				$(".wallpaper-preview-msg").html(data);
			}
			
		})
		
		return false;
	}
}

$(function(){

	
	
	$("#wallpaperscroller-bgs img").click(wallpaper.setbackground);
	$("#wallpaperscroller-objs img, #wallpaperscroller-txts img").click(wallpaper.add);
	
	$(".step").click(function(){
			$(".wallpaperscroller-step").hide();
			$(".wallpaperscroller-"+$(this).attr("id")).show();
			$(".step").removeClass("active");
			/*
			if(!$(this).addClass("active").next(".step").length) $("#wallpapersteps-next").hide();
			else  $("#wallpapersteps-next").show();
			if(!$(this).addClass("active").prev(".step").length) $("#wallpapersteps-prev").hide();
			else  $("#wallpapersteps-prev").show();
			*/
			$(this).addClass("active").next(".step");
			$(this).addClass("active").prev(".step");
		})
		.first().addClass("active");
	
	$("#wallpapersteps-next").click(function(){
			$(".step.active").next(".step").click();
		}).hide()
	$("#wallpapersteps-prev").click(function(){
			$(".step.active").prev(".step").click()
		})
	
	
	$(".wallpaper-preview-download-item:eq(0)").click(function(){
		wallpaper.download("1024");
	})
	$(".wallpaper-preview-download-item:eq(1)").click(function(){
		wallpaper.download("1280");
	})
	$(".wallpaper-preview-download-item:eq(2)").click(function(){
		wallpaper.download("1600");
	})
	$(".wallpaper-preview-send").submit(wallpaper.sendtofriend);
	
	$("[srcover]")
		.mouseover(function(){ 
			$(this).attr({
				srcout: $(this).attr("src"),
				src: $(this).attr("srcover")
			})
		})
		.mouseout(function(){ $(this).attr("src", $(this).attr("srcout")) });

});