var table_color = "#FFFFFF"
var border_size = 2;
var name_size = 15;
var heading_size = 15;
var text_size = 12;
var border_style = "solid";
var name_font = "Verdana";
var heading_font = "Verdana";
var text_font = "Verdana";
var name_bold = "bold";
var name_italic = "normal";
var name_underline = "none";
var heading_bold = "bold";
var heading_italic = "normal";
var heading_underline = "none";
var main_bold = "normal";
var main_italic = "normal";
var main_underline = "none";
var link_bold = "bold";
var link_italic = "normal";
var link_underline = "none";
var linkhover_bold = "bold";
var linkhover_italic = "normal";
var linkhover_underline = "none";
var bgimage_name = "";
var bgimage_position = "top center";
var bgimage_move = "fixed";
var bgimage_repeat = "repeat";

var extra_txt = '<a href="http://www.joombly.com/" target="_blank"><img src="http://i136.photobucket.com/albums/q179/joombly/advertising/button.gif" alt="Perfil Generado por http://www.joombly.com/" style="position:absolute; left:0px; top: 0px; border:0; z-index:9;" ></a>';

$(document).ready(function() {
	
	/////////////
	// SLIDERS //
	/////////////
	$('#border_slider').Slider({
		accept: '.slider_handle',
		fractions: 17,
		onChange: function(px,py,x,y) {
			border_size = Math.round((px/100)*17-11);
			changeit();
		},
		values:[[20,0]]
	});
	$('#name_slider').Slider({
		accept: '.slider_handle',
		fractions: 17,
		onChange: function(px,py,x,y) {
			name_size = Math.round((px/100)*17-4);
			changeit();
		},
		values:[[80,0]]
	});
	$('#heading_slider').Slider({
		accept: '.slider_handle',
		fractions: 17,
		onChange: function(px,py,x,y) {
			heading_size = Math.round((px/100)*17-4);
			changeit();
		},
		values:[[80,0]]
	});
	$('#text_slider').Slider({
		accept: '.slider_handle',
		fractions: 17,
		onChange: function(px,py,x,y) {
			text_size = Math.round((px/100)*17-4);
			changeit();
		},
		values:[[40,0]]
	});
	
	//////////////
	// ColorMOD //
	//////////////
	$(".color_picker").click(function(){
		mypickcolor("#input_" + $(this).attr("id"), "#" + $(this).attr("id"), this);
	});
	$("#cmCloseButton").click(function(){
		$("#ColourMod").hide();
		changeit();
		return false;
	});
	$("#s_sbgc-trans").click(function() {
		if ($(this).is(":checked")) {
			$("#sections-color").hide();
			$("#section-transparent").val(1);
		}
		else {
			$("#sections-color").show();
			$("#section-transparent").val(0);
		}
		changeit();
	});	
	//////////////////////////////
	// hack para hover del link //
	//////////////////////////////
	$("#myslink").hover(
		function() {
			$(this).css({"color":"#" + $("#input_link-hover-color").val(), "font-weight":linkhover_bold, "font-style":linkhover_italic, "text-decoration":linkhover_underline});
		}, 
      	function() {
			$(this).css({"color":"#" + $("#input_link-color").val(), "font-weight":link_bold, "font-style":link_italic, "text-decoration":link_underline});
      });
	
	//////////////////////
	// estilo del borde //
	//////////////////////
	$(".s_sbs").change(function() {
		border_style = $(this).val();
		changeit();
	});
	
	//////////////////////////
	// Fuente de los textos //
	//////////////////////////
	$(".nfont").change(function() {
		name_font = $(this).val();
		changeit();
	});
	$(".hfont").change(function() {
		heading_font = $(this).val();
		changeit();
	});
	$(".mfont").change(function() {
		text_font = $(this).val();
		changeit();
	});
	
	//////////////////////////
	// Estilo de los textos //
	//////////////////////////
	$("#nfso1").click(function() {
		if (name_bold == "bold") {
			$(this).attr("class", "");
			$("#mysname").css("font-weight","normal");
			name_bold = "normal";
		}
		else {
			$(this).attr("class", "selected");
			$("#mysname").css("font-weight","bold");
			name_bold = "bold";
		}
	});
	$("#nfso2").click(function() {
		if (name_italic == "italic") {
			$(this).attr("class", "");
			$("#mysname").css("font-style","normal");
			name_italic = "normal";
		}
		else {
			$(this).attr("class", "selected");
			$("#mysname").css("font-style","italic");
			name_italic = "italic";
		}
	});
	$("#nfso3").click(function() {
		if (name_underline == "underline") {
			$(this).attr("class", "");
			$("#mysname").css("text-decoration","none");
			name_underline = "none";
		}
		else {
			$(this).attr("class", "selected");
			$("#mysname").css("text-decoration","underline");
			name_underline = "underline";
		}
	});
	
	$("#hfso1").click(function() {
		if (heading_bold == "bold") {
			$(this).attr("class", "");
			$("#mystitle").css("font-weight","normal");
			heading_bold = "normal";
		}
		else {
			$(this).attr("class", "selected");
			$("#mystitle").css("font-weight","bold");
			heading_bold = "bold";
		}
	});
	$("#hfso2").click(function() {
		if (heading_italic == "italic") {
			$(this).attr("class", "");
			$("#mystitle").css("font-style","normal");
			heading_italic = "normal";
		}
		else {
			$(this).attr("class", "selected");
			$("#mystitle").css("font-style","italic");
			heading_italic = "italic";
		}
	});
	$("#hfso3").click(function() {
		if (heading_underline == "underline") {
			$(this).attr("class", "");
			$("#mystitle").css("text-decoration","none");
			heading_underline = "none";
		}
		else {
			$(this).attr("class", "selected");
			$("#mystitle").css("text-decoration","underline");
			heading_underline = "underline";;
		}
	});
	
	$("#fso1").click(function() {
		if (main_bold == "bold") {
			$(this).attr("class", "");
			$("#mystext").css("font-weight","normal");
			main_bold = "normal";
		}
		else {
			$(this).attr("class", "selected");
			$("#mystext").css("font-weight","bold");
			main_bold = "bold";
		}
	});
	$("#fso2").click(function() {
		if (main_italic == "italic") {
			$(this).attr("class", "");
			$("#mystext").css("font-style","normal");
			main_italic = "normal";
		}
		else {
			$(this).attr("class", "selected");
			$("#mystext").css("font-style","italic");
			main_italic = "italic";
		}
	});
	$("#fso3").click(function() {
		if (main_underline == "underline") {
			$(this).attr("class", "");
			$("#mystext").css("text-decoration","none");
			main_underline = "none";
		}
		else {
			$(this).attr("class", "selected");
			$("#mystext").css("text-decoration","underline");
			main_underline = "underline";
		}
	});
	
	$("#lso1").click(function() {
		if (link_bold == "bold") {
			$(this).attr("class", "");
			$("#myslink").css("font-weight","normal");
			link_bold = "normal";
		}
		else {
			$(this).attr("class", "selected");
			$("#myslink").css("font-weight","bold");
			link_bold = "bold";
		}
	});
	$("#lso2").click(function() {
		if (link_italic == "italic") {
			$(this).attr("class", "");
			$("#myslink").css("font-style","normal");
			link_italic = "normal";
		}
		else {
			$(this).attr("class", "selected");
			$("#myslink").css("font-style","italic");
			link_italic = "italic";
		}
	});
	$("#lso3").click(function() {
		if (link_underline == "underline") {
			$(this).attr("class", "");
			$("#myslink").css("text-decoration","none");
			link_underline = "none";
		}
		else {
			$(this).attr("class", "selected");
			$("#myslink").css("text-decoration","underline");
			link_underline = "underline";
		}
	});
	
	$("#lhso1").click(function() {
		if (linkhover_bold == "bold") {
			$(this).attr("class", "");
			linkhover_bold = "normal";
		}
		else {
			$(this).attr("class", "selected");
			linkhover_bold = "bold";
		}
	});
	$("#lhso2").click(function() {
		if (linkhover_italic == "italic") {
			$(this).attr("class", "");
			linkhover_italic = "normal";
		}
		else {
			$(this).attr("class", "selected");
			linkhover_italic = "italic";
		}
	});
	$("#lhso3").click(function() {
		if (linkhover_underline == "underline") {
			$(this).attr("class", "");
			linkhover_underline = "none";
		}
		else {
			$(this).attr("class", "selected");
			linkhover_underline = "underline";
		}
	});
	
	
	/////////////////
	// Upload File //
	/////////////////
	$("#bgiApply").click(function() {
		$.ajaxUpload({
			uploadform: document.f,
			url: 'plugins/profileeditor/upload.php',
			secureuri: false,
			dataType: 'json',
			success: function(msg) {	
				alert(msg.message);
				if (!msg.success) {
					return false;
				}
				else {
					bgimage_name = msg.name;
					$("#mysbody").css("background-image", "url("+msg.name+")");
				}
			}
		});
	});
	
	
	///////////////////
	// Image Options //
	///////////////////
	$("#backgroundAlignSelect > div").click(function() {
		var id = $(this).attr("id");
		var j = id.substr(4,1);
		var alt = $("#"+id+" > img").attr("alt");
		bgimage_position = alt.toLowerCase();
		$("#"+id).attr("class", "selected");
		for (i = 0; i < 10; i++) {
			if (i != j)
				$("#bgao"+i).attr("class", "");
		}
	});
	$(".s_bgr").click(function() {
		bgimage_repeat = $(this).val();					   
	});
	$(".s_bga").click(function() {
		bgimage_move = $(this).val();					   
	});
	
	
	///////////////////////
	// Muestra el codigo //
	///////////////////////
	$("#showcode").click(function() {
		$("#bgc").text($("#mysbody").css("background-color"));
		if (bgimage_name != "")
			$("#image-style").text("background-image: url("+ bgimage_name +");");
		$("#bgp").text(bgimage_position);
		$("#bgr").text(bgimage_repeat);
		$("#bga").text(bgimage_move);
		
		$("#tbw").text(border_size + "");
		var tmp = HexToRGB($("#input_border-color").val());
		$("#tbc").text("rgb("+tmp['red']+", "+tmp['green']+", "+tmp['blue']+")");
		$("#tbs").text(border_style);
		tmp = HexToRGB(table_color.replace(/#/, ""));
		$("#tc").text("rgb("+tmp['red']+", "+tmp['green']+", "+tmp['blue']+")");
		
		$("#mff").text(text_font);
		$("#mfz").text(text_size + "");
		tmp = HexToRGB($("#input_text-color").val());
		$("#mfc").text("rgb("+tmp['red']+", "+tmp['green']+", "+tmp['blue']+")");
		$("#mfw").text(main_bold);
		$("#mfs").text(main_italic);
		$("#mfd").text(main_underline);
		
		$("#nff").text(name_font);
		$("#nfz").text(name_size + "");
		tmp = HexToRGB($("#input_name-color").val());
		$("#nfc").text("rgb("+tmp['red']+", "+tmp['green']+", "+tmp['blue']+")");
		$("#nfw").text(name_bold);
		$("#nfs").text(name_italic);
		$("#nfd").text(name_underline);
		
		$("#hff").text(heading_font);
		$("#hfz").text(heading_size + "");
		tmp = HexToRGB($("#input_heading-color").val());
		$("#hfc").text("rgb("+tmp['red']+", "+tmp['green']+", "+tmp['blue']+")");
		$("#hfw").text(heading_bold);
		$("#hfs").text(heading_italic);
		$("#hfd").text(heading_underline);
		
		tmp = HexToRGB($("#input_link-color").val());
		$("#lc").text("rgb("+tmp['red']+", "+tmp['green']+", "+tmp['blue']+")");
		$("#lw").text(link_bold);
		$("#ls").text(link_italic);
		$("#ld").text(link_underline);
		
		tmp = HexToRGB($("#input_link-color").val());
		$("#lhc").text("rgb("+tmp['red']+", "+tmp['green']+", "+tmp['blue']+")");
		$("#lhw").text(linkhover_bold);
		$("#lhs").text(linkhover_italic);
		$("#lhd").text(linkhover_underline);
		
		$("#result").show();
		$("#result_final").val($("#result_code").text() + extra_txt);
	});
	
	
	//////////////////////////
	// Seleccion del codigo //
	//////////////////////////
	$("#result_final").click(function() {
		$(this).focus();							  
		$(this).select();
	});
	
	
	//////////////////////////
	// Parametros iniciales //
	//////////////////////////
	init();
});

function changeit() {
	table_color = ($("#section-transparent").val() == 1) ? "transparent" : "#" + $("#input_sections-color").val();
	
	$('#in_sectionBorderWidth').val(border_size);
	$("#mystable1").css({"border-width":border_size + "px", "width":(350 - (border_size * 2)) + "px", "border-color":"#" + $("#input_border-color").val(), "border-style":border_style, "background-color":table_color});
	$("#mystable2").css({"border-width":border_size + "px", "width":(350 - (border_size * 2)) + "px", "border-color":"#" + $("#input_border-color").val(), "border-style":border_style, "background-color":table_color});

	$('#in_nameFontSize').val(name_size);
	$('#in_headingFontSize').val(heading_size);
	$('#in_fontSize').val(text_size);
	
	$("#mysname").css({"font-size":name_size + "px", "color":"#" + $("#input_name-color").val(), "font-family":name_font});
	$("#mystitle").css({"font-size":heading_size + "px", "color":"#" + $("#input_heading-color").val(), "font-family":heading_font});
	$("#mystext").css({"font-size":text_size + "px", "color":"#" + $("#input_text-color").val(), "font-family":text_font});
	$("#myslink").css({"font-size":text_size + "px", "color":"#" + $("#input_link-color").val(), "font-family":text_font});
	$("#mysbody").css("background-color", "#" + $("#input_background-color").val());
}

function init() {
	// valores de los sliders
	$("#in_sectionBorderWidth").val(border_size);
	$('#in_nameFontSize').val(name_size);
	$('#in_headingFontSize').val(heading_size);
	// color de los colormod
	$(".color_picker").each(function() {
		var id = $(this).attr("id");
		$(this).css("background-color", "#" + $("#input_" + id).val());						 
	});
	changeit();
}

function pageDimensions() {
	var x,y;
	if (self.innerHeight) {
		x = self.innerWidth;
		y = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		x = document.documentElement.clientWidth;
		y = document.documentElement.clientHeight;
	} else if (document.body) {
		x = document.body.clientWidth;
		y = document.body.clientHeight;
	}
	return [x,y];
}
function scrollOffset() {
	var x,y;
	if (self.pageYOffset) {
		x = self.pageXOffset;
		y = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) {
		x = document.documentElement.scrollLeft;
		y = document.documentElement.scrollTop;
	} else if (document.body) {
		x = document.body.scrollLeft;
		y = document.body.scrollTop;
	}
	return [x, y];
}