var drag_container;
var drag_container_position = new Array();
var autosave_timer = 0;
var keypress_timer = 0;
var update_template_area_timer = new Object();

var card_id = 0;

var selected_area = false;

function setup_card_editor(the_card_id)
{
	card_id = the_card_id;
}

function autosave_card()
{
	stop_autosave_card();
	autosave_timer = setTimeout("save_card()", 3000);
}

function stop_autosave_card()
{
	clearTimeout(autosave_timer);
}

function save_card(buy, forcesync)
{
	buy = buy || false;
	
	forcesync = forcesync || false;

	if ((xml_request.readyState == 4) || (xml_request.readyState == 0))
	{
		var post_variables = "";

		// get the template
		var template = document.getElementById('template');

		// get all the template areas
		var template_areas = template.getElementsByTagName('div');

		for(var i = 0; i < template_areas.length; i++)
		{
			var template_area = template_areas[i];

			if(template_area.className.substr(0, 13) == "template_area")
			{
				// construct post variables to be sent
				post_variables += "&" + encodeURIComponent(template_area.id) + "_content=" + encodeURIComponent(document.getElementById(template_area.id + '_content').value);
			}
		}

		if(buy === true || forcesync === true)
		{
			xml_request.open("POST", "save_card.php", false);
			xml_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;");
		}
		else
		{  
			xml_request.open("POST", "save_card.php", true);
			xml_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;");
			xml_request.onreadystatechange = save_card_response;
		}

		xml_request.send("c=" + card_id + post_variables);
		
		var content = xml_request.responseText;
		//alert(content);

		if(buy === true)
		{
			document.frm_buy.submit();
		}
	}
}

function save_card_response()
{
	if(xml_request.readyState == 4)
	{
		var message = document.getElementById('message');

		if(xml_request.responseText == "failure")
		{
			message.innerHTML = "The template failed to save.";
		}
		else
		{
			message.innerHTML = xml_request.responseText;
		}
	}
}

function template_area_hover(id, hover)
{
	var template_area = document.getElementById(id);

	if(hover === true)
	{
		template_area.style.borderColor = "#E5E5E5";
	}
	else
	{
		template_area.style.borderColor = "transparent";
	}
}

function update_template_area_content(template_area_id, type, filename)
{				
	stop_update_template_area_content(template_area_id);
	update_template_area_timer[template_area_id] = setTimeout("set_card_area_content('" + template_area_id + "', '" + type  + "', '" + filename + "')", 1000);
}

function stop_update_template_area_content(template_area_id)
{
	clearTimeout(update_template_area_timer[template_area_id]);
}

function set_card_area_content(template_area_id, type, filename, imagetype)
{
	var template_area = document.getElementById("template_area_" + template_area_id);
	var template_area_content = document.getElementById("template_area_" + template_area_id + "_content");
	var template_area_editor = document.getElementById("template_area_" + template_area_id + "_editor");
	var template_area_image = document.getElementById("template_area_" + template_area_id + '_content_image');
	
	var use_leading = document.getElementById("template_use_leading").value;

	var current_time = new Date();

	switch (type)
	{
		case "text":
			if(template_area_editor.tagName.toLowerCase() == "select")
			{
				template_area_content.value = get_selected_menu_item(template_area_editor.id);
			}
			else
			{
				template_area_content.value = template_area_editor.value;
			}

			var text = document.getElementById("template_area_" + template_area_id + "_content").value;
			var font_family = document.getElementById("template_area_" + template_area_id + "_font_family").value;
			var font_size = document.getElementById("template_area_" + template_area_id + "_font_size").value;
			var line_height = document.getElementById("template_area_" + template_area_id + "_line_height").value;
			var leading = document.getElementById("template_area_" + template_area_id + "_leading").value;
			var color = document.getElementById("template_area_" + template_area_id + "_color").value;
			var align = document.getElementById("template_area_" + template_area_id + "_align").value;
			var vertical_align = document.getElementById("template_area_" + template_area_id + "_vertical_align").value;
			var text_case = document.getElementById("template_area_" + template_area_id + "_case").value;
			var background_color = document.getElementById("template_area_" + template_area_id + "_background_color").value;
			
			template_area_image.src = "card_area_image_text.php?text=" + encodeURIComponent(text) + "&font_family=" + encodeURIComponent(font_family) + "&font_size=" + encodeURIComponent(font_size) + "&line_height=" + encodeURIComponent(line_height) + "&leading=" + encodeURIComponent(leading) + "&use_leading=" + encodeURIComponent(use_leading) + "&color=" + encodeURIComponent(color) + "&align=" + encodeURIComponent(align) + "&vertical_align=" + encodeURIComponent(vertical_align) + "&case=" + encodeURIComponent(text_case) + "&background_color=" + encodeURIComponent(background_color) + "&w=" + template_area.offsetWidth + "&h=" + template_area.offsetHeight + "&u=" + current_time.getTime();

			break;

		case "image":
			//template_area_image.src = "card_area_image.php?f=" + filename + "&w=" + template_area.offsetWidth + "&h=" + template_area.offsetHeight + "&t=" + current_time.getTime();
			
			if(imagetype == "card")
			{
				template_area_image.src = "/resizeImage.php/" + filename + "?width=" + template_area.style.width + "&height=" + template_area.style.height + "&image=/images/card_areas/" + filename;
			}
			else
			{			
				template_area_image.src = "/resizeImage.php/" + filename + "?width=" + template_area.style.width + "&height=" + template_area.style.height + "&image=/images/template_areas/" + filename;
			}
			
			template_area_content.value = filename;

			break;
	}

	// set the card to autosave after the changes
	autosave_card();
}