var url = "http://www.joombly.com/plugins/reproductor-skin/";

var mosaico = 0;

var x1; var x2; var y1; var y2;

var img_src2 = '';

$(document).ready(function() {

	$("#ratio").click(function() {

		if ($(this).is(":checked"))

			drag_ratio(1);

		else

			drag_ratio(0);

	});

	

	$("#orig").click(function() {

		$("#image").attr({"width":orig_w, "height":orig_h}).css({"top":0, "left": 0, "width":orig_w+"px", "height":orig_h+"px"}).show();

		$("#contenedor_skin").css({"background-image":"", "background-color":"#" + $("#input_background-color").val()});

		$(this).attr("checked", false);

		mosaico = 0;

	});

	$("#skin").click(function() {

		$("#image").attr({"width":295, "height":51}).css({"top":0, "left": 0, "width":"300px", "height":"60px"}).show();

		$("#contenedor_skin").css({"background-image":"", "background-color":"#" + $("#input_background-color").val()});

		$(this).attr("checked", false);

		mosaico = 0;

	});

	$("#ancho").click(function() {

		$("#image").attr({"width":295}).css({"top":0, "left": 0, "width":"300px"}).show();

		$("#contenedor_skin").css({"background-image":"", "background-color":"#" + $("#input_background-color").val()});

		$(this).attr("checked", false);

		mosaico = 0;

	});

	$("#alto").click(function() {

		$("#image").attr({"height":51}).css({"top":0, "left": 0, "height":"60px"}).show();

		$("#contenedor_skin").css({"background-image":"", "background-color":"#" + $("#input_background-color").val()});

		$(this).attr("checked", false);

		mosaico = 0;

	});

	$("#mos").click(function() {

		$("#contenedor_skin").css({"background-image":"url(plugins/reproductor-skin/img/"+img_src+")", "background-repeat":"repeat"});

		$("#image").hide(); 
		
		$(this).attr("checked", false);

		mosaico = 1;

	});

	

	$("#top1").click(function() {

		$("#image").css("top", 0);

		$(this).attr("checked", false);

	});

	$("#bottom1").click(function() {

		h = - $("#image").height() + 51;

		$("#image").css("top", h);

		$(this).attr("checked", false);

	});

	$("#left1").click(function() {

		$("#image").css("left", 0);

		$(this).attr("checked", false);

	});

	$("#right1").click(function() {

		w = - $("#image").width() + 295;

		$("#image").css("left", w);

		$(this).attr("checked", false);

	});

	$("#center1").click(function() {

		w = 148 - $("#image").width() / 2 ;

		h = 25 - $("#image").height() / 2;

		$("#image").css({"top":h+"px", "left":w+"px"});

		$(this).attr("checked", false);

	});

	

	$("#get_image").click(function() {

		position();

		var str = "cmd=get-image&src="+img_src+"&h="+orig_h+"&w="+orig_w+"&x1="+x1+"&x2="+x2+"&y1="+y1+"&y2="+y2+"&bg="+$("#input_background-color").val()+"&mos="+mosaico;

		

		$.ajax({

			type: "POST",

			url: "plugins/reproductor-skin/ajax.php",

			data: str,

			success: function(msg) {

				result = eval("("+msg+")");

				

				img_src2 = result.name;

				opacity = 50;

				$("#imgfinal").css({"filter":"alpha(opacity="+opacity+")","-moz-opacity":(opacity/100),"opacity":(opacity/100)});

				$("#imagen_final").css("background-image", "url("+img_src2+")");

				$("#manejador_de_imagen").slideUp();

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

				show_code();

			}

		});

	});

});



function show_code() {

	$("#code").val('<style>table table div {width:295px; height:51px; background-image:url('+img_src2+'); background-position:center center; background-repeat: no-repeat;} table.userProfileURL div, table table td.text div {width:auto; height:auto; background-color:transparent; background-image:none} table table div object, table table div embed {-moz-opacity:'+parseFloat(opacity/100)+'; filter: alpha(opacity='+opacity+')} table table td.text div object, table table td.text div embed {-moz-opacity:1.0; filter: alpha(opacity=100)} </style><div style="position:absolute;right:10px;top:50px;align:center;"><a href="http://www.joombly.com/reproductor-skin" target="_blank" title="Myspace Music Skin">Myspace Music Skin!</a></div>');

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

}



function position() {

	x1 = parseInt($("#image").css("left").replace(/px/, ""));

	x2 = parseInt($("#image").css("left").replace(/px/, "")) + parseInt($("#image").width());

	y1 = parseInt($("#image").css("top").replace(/px/, ""));

	y2 = parseInt($("#image").css("top").replace(/px/, "")) + parseInt($("#image").height());

}