<?php echo $header; ?>
<div id="content">
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
	<div class="box">
		<div class="heading">
			<h1><?php echo $heading_title; ?></h1>
			<div class="buttons"><a onclick="$('#save').trigger('change');" class="button btn btn-primary"><?php echo $button_save; ?></a> <a onclick="location = '<?php echo $cancel; ?>';" class="button btn btn-primary"><?php echo $button_cancel; ?></a></div>
		</div>
		<div class="content">
			<br />
			<div id="overlay"><center><img src="<?php echo HTTP_CATALOG; ?>image/loading_translator.gif" /></center></div>			
			<div id="checkupdate" class="attention"></div>
		
			<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
				<input type="hidden" name="save" value="1" id="save" class="select" />
				<table class="form">
					<tr>
						<td><?php echo $text_mymemory_email; ?></td>
						<td><input type="text" name="mymemory_email" value="<?php echo $mymemory_email; ?>" /></td>
					</tr>
					<tr>
						<td><?php echo $text_enable_interative; ?></td>
						<td><input type="checkbox" name="enable_interative" value="1" <?php echo (isset($enable_interative) ? 'checked' : ''); ?> /></td>
					</tr>
					<tr>
						<td><?php echo $text_backup_files; ?></td>
						<td><input type="checkbox" name="backup_files" value="1" <?php echo (isset($backup_files) ? 'checked' : ''); ?> /></td>
					</tr>
				</table>
				<table class="form">
					<tr>
						<td style="width: 50%">
							<select name="local-from" class="select">
								<option value="">--------</option>
								<option value="admin">Admin</option>
								<option value="catalog">Catalog</option>
							</select>

							<select name="language-from" class="select" disabled>
								<option value="">--------</option>
								<?php foreach($languages as $language => $language_id) { ?>
									<option value="<?php echo $language; ?>"><?php echo $language; ?></option>
								<?php } ?>
							</select>
							<select name="module-from" class="select" disabled>
								<option value="">--------</option>					
							</select>
						</td>
						<td style="width: 50%">
							<select name="language-destination" class="select" disabled>
								<option value="">--------</option>
								<?php foreach($languages as $language => $language_id) { ?>
									<option value="<?php echo $language; ?>"><?php echo $language; ?></option>
								<?php } ?>
							</select>
						</td>
					</tr>
						<td style="width: 50%" id="edit-from"></td>
						<td style="width: 50%" id="edit-destination"></td>
					<tr>
					</tr>
				</table>
			</form>
			<iframe id="iframe" height="600" width="100%" border="0" style="display: none"></iframe>

		</div>
	</div>
</div>

<style>
select
{
  display: inline-block;
  height: 30px;
  padding: 4px 6px;
}
select[disabled]
{
  cursor: not-allowed;
  background-color: #eeeeee;
}

input[type="checkbox"]
{
  width: 20px;
  height: 20px;
}

input[type="text"] {
  display: inline-block;
  height: 30px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  vertical-align: middle;
  width: 60%;
}

.border_select {
  border: solid 2px red;
}

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200%;
    display: none;
}​
</style>

<script type="text/javascript"><!--

var codes_lang = $.parseJSON('<?php echo json_encode($codes_lang); ?>');

function get_translate(q, $text)
{
	var from = codes_lang[$language_from.val()];
	var to = codes_lang[$language_destination.val()];
	var _text = $text.val();
	var url = 'http://mymemory.translated.net/api/get?q='+ _text +'&langpair='+ from +'|'+ to +'&de=<?php echo $mymemory_email; ?>';

	$.ajax(
	{
		url: url,
		dataType: 'json',
		beforeSend: function()
		{
			$("#overlay").show();
		},
		success: function(json)
		{
			$("#overlay").hide();
			traduzir(q, $text, json.responseData.translatedText);
		},
		error: function(xhr, ajaxOptions, thrownError)
		{
			$("#overlay").hide();
		}
	});
}

function traduzir(q, text, rtn)
{
	$("#iframe").removeAttr("src").hide();
	switch(q)
	{
		case "mymemory":
		{
			if(rtn)
			{
				text.val(rtn);
				return false;
			}
			
			if($.type(text) == "object")
			{
				$.each(text, function()
				{
					get_translate(q, $(this));
				});
			}
			break;
		}
		case "bing_iframe":
		{
			$("#iframe").attr("src", "http://www.bing.com/translator/").show();
			break;
		}
		case "bing":
		{
			window.open("http://www.bing.com/translator/");
			break;
		}
		case "google":
		{
			window.open("https://translate.google.com.br");
			break;
		}
	}
}

function add_new_input(id, insert)
{
	if(insert)
	{
		var name_field = $("#add_new_input input[name='name_field']").val();
		var value_field = $("#add_new_input input[name='value_field']").val();

		//if(id == "#from-new-input")
		//{
			var html = '<div id="div-from'+ countfrom +'">';
			html 	+= '<input type="text" name="from['+ name_field +']" value="'+ value_field +'" id="from'+ countfrom +'" data-num="'+ countfrom +'" />';
			html 	+= ' <a href="javascript:;" onclick="$(\'#div-from'+ countfrom +', #div-destination'+ countfrom +'\').remove()"><img src="view/image/delete.png" /></a>';
			html 	+= ' <a href="javascript:;" onclick="alt_pos(\'#from'+ countfrom +'\', \'#destination'+ countfrom +'\')" class="button">>></a>';
			html 	+= '<br />';
			html 	+= '</div>';
			$("#from-new-input").append(html);
			//$(id).append(html);
			countfrom++;
		//}
		//else
		//{
			var html = '<div id="div-from'+ countfrom +'">';
			html 	+= '<a href="javascript:;" onclick="alt_pos(\'#destination'+ countdestination +'\', \'#from'+ countdestination +'\')" class="button"><<</a> ';
			html 	+= '<input type="text" name="destination['+ name_field +']" value="'+ value_field +'" id="destination'+ countdestination +'" data-num="'+ countdestination +'" />';
			html 	+= ' <a href="javascript:;" onclick="$(\'#div-from'+ countfrom +', #div-destination'+ countfrom +'\').remove()"><img src="view/image/delete.png" /></a>';
			html 	+= ' <a href="javascript:;" class="button" onclick="traduzir(\'mymemory\', $(\'#destination'+ countdestination +'\'));"><?php echo $text_translate; ?></a> ';
			html 	+= '<br />';
			html 	+= '</div>';
			$("#destination-new-input").append(html);
			//$(id).append(html);
			countdestination++;
		//}
		
		$.colorbox.close();
		$("#add_new_input").remove();
		return false;
	}

	var html = '<div id="add_new_input">';
	html 	+= '<?php echo $text_name_field; ?> <input type="text" name="name_field" />';
	html 	+= '<br />';
	html 	+= '<?php echo $text_value_field; ?> <input type="text" name="value_field" />';
	html 	+= '<br />';
	html 	+= '<a href="javascript:;" onclick="add_new_input(\''+ id +'\', true)" class="button">Inserir</a>';
	html += '</div>';
	$.colorbox({html: html, escKey: false, onClosed: function()
	{
		$("#add_new_input").remove();
	}});	
}

function alt_pos(from, to, all)
{
	if(all)
	{
		$.each($(from), function()
		{
			num = $(this).attr("data-num");
			$(to+num).val($(this).val());
		});

		return false;
	}

	$(to).val($(from).val());
}

var count, countfrom, countdestination, $language_from, $language_destination;
var checking_update_text = "<?php echo $checking_update_text; ?>";
$(function()
{
	$("select[name='local-from']").change(function()
	{
		$("#edit-from, #edit-destination").html('');
		$("select[name='language-destination'] option[value='']").attr("selected", true);
		if(this.value != "")
		{
			$("select[name='language-from']").removeAttr("disabled");
			if($("select[name='language-from']").val() != "")
			{
				$("select[name='module-from']").removeAttr("disabled");
			}
			else
			{
				$("select[name='module-from'], select[name='language-destination']").attr("disabled", "disabled");
			}
		}
		else
		{
			$("select[name='language-from'], select[name='module-from'], select[name='language-destination']").attr("disabled", "disabled");
			$("select[name='module-from']").html('');
			$("select[name='language-from'] option[value=''], select[name='language-destination'] option[value='']").attr("selected", true);
		}
	});
	
	$("select[name='language-from']").change(function()
	{
		$("#edit-from, #edit-destination").html('');
		$("select[name='language-destination'] option[value='']").attr("selected", true);
		$("select[name='module-from'], select[name='language-destination']").attr("disabled", "disabled");
		//if(this.value != "" && $("select[name='module-from']").val() != "")
		if(this.value != "")
		{
			$("select[name='module-from']").removeAttr("disabled");
		}
		else if(this.value != "" && $("select[name='module-from']").val() == "")
		{
			$("select[name='module-from']").removeAttr("disabled");
		}
		else
		{
			$("select[name='module-from']").html('');
		}
	});
	
	$("select[name='module-from']").change(function()
	{
		$("#edit-from, #edit-destination").html('');
		$("select[name='language-destination'] option[value='']").attr("selected", true);
		if(this.value != "")
		{
			$("select[name='language-destination']").removeAttr("disabled");
		}
		else
		{
			$("select[name='language-destination']").attr("disabled", "disabled");
		}
	});
	
	$("select[name='language-destination']").change(function()
	{
		if(this.value == "")
		{
			$("#edit-destination").html('');
		}
	});

	$(".select").change(function()
	{
		var name = this.name;
		var value  = this.value;
		
		var $local_from = $("select[name='local-from']");
		$language_from = $("select[name='language-from']");
		var $module_from = $("select[name='module-from']");

		$language_destination = $("select[name='language-destination']");
		
		if((name == 'local-from' && $local_from.val() == "") || (name == 'language-from' && $language_from.val() == "") || (name == 'module-from' && $module_from.val() == "") || (name == 'language-destination' && $language_destination.val() == ""))
		{			
			return false;
		}

		var data = "name="+ name +"&value="+ value + "&"+ $("#form").serialize();
		
		$.ajax(
		{
			url: '<?php echo $action_load; ?>',
			data: data,
			type: 'post',
			dataType: 'json',
			beforeSend: function()
			{
				$("#overlay").show();
			},
			success: function(json)
			{
				$("#overlay").hide();
				if((name == "local-from" && $("select[name='language-from']").val() != "") || name == "language-from")
				{
					var html = "";
					html += '<option value=""> -------- </option>';
					$.each(json, function(key)
					{
						if($.isArray(this))
						{
							if($.trim(key) != "")
							{
								html += '<optgroup label="'+ key +'">';
							}
							else
							{
								html += '<optgroup label="root">';
							}
							
							$.each(this, function()
							{
								html += '<option value="' +key+ '/' +this+ '">'+ this +'</option>';
							});
							html += '</optgroup>';							
						}
						else
						{
							html += '<option value="'+ key +'">'+ this +'</option>';
						}
					});
					
					$module_from.html(html);
				}
				if(name == 'module-from')
				{
					countfrom = 0;
					$("#edit-from").html('');
					var html = "";
					$.each(json, function(key)
					{
						html += '<div id="div-from'+ countfrom +'">';
						html += '<input type="text" name="from['+ key +']" value="'+ this +'" id="from'+ countfrom +'" data-num="'+ countfrom +'" />';
						html += ' <a href="javascript:;" onclick="$(\'#div-from'+ countfrom +', #div-destination'+ countfrom +'\').remove()"><img src="view/image/delete.png" /></a>';
						html += ' <a href="javascript:;" onclick="alt_pos(\'#from'+ countfrom +'\', \'#destination'+ countfrom +'\')" class="button">>></a>';
						html += '<br />';
						html += '</div>';
						countfrom++;
					});
					html += '<span id="from-new-input"></span>';
					html += '<br />';
					html += '<img src="view/image/add.png" onclick="add_new_input(\'#from-new-input\')" />';
					html += '<br />';
					html += '<center><a href="javascript:;" onclick="alt_pos(\'#edit-from input\', \'#destination\', true)" class="button">>></a></center>';
					
					$("#edit-from").html(html);
				}
				if(name == 'language-destination')
				{
					countdestination = 0;
					$("#edit-destination").html('');
					var html = '';
					$.each(json, function(key)
					{
						html += '<div id="div-destination'+ countdestination +'">';
						html += '<a href="javascript:;" onclick="alt_pos(\'#destination'+ countdestination +'\', \'#from'+ countdestination +'\')" class="button"><<</a> ';
						html += '<input type="text" name="destination['+ key +']" value="'+ this +'" id="destination'+ countdestination +'" data-num="'+ countdestination +'" /> ';
						html += ' <a href="javascript:;" onclick="$(\'#div-from'+ countdestination +', #div-destination'+ countdestination +'\').remove()"><img src="view/image/delete.png" /></a>';
						html += '<a href="javascript:;" class="button" onclick="traduzir(\'mymemory\', $(\'#destination'+ countdestination +'\'));"><?php echo $text_translate; ?></a> ';
						html += '<br />';
						html += '</div>';
						countdestination++;
					});
					html += '<span id="destination-new-input"></span>';
					html += '<br />';
					html += '<img src="view/image/add.png" onclick="add_new_input(\'#destination-new-input\')" />';
					html += '<br />';
					html += '<center><a href="javascript:;" onclick="alt_pos(\'#edit-destination input\', \'#from\', true)" class="button"><<</a></center>';
					html += '<br />';
					
					html += 'Traduzir: ';
					html += '<a href="javascript:;" class="button" onclick="traduzir(\'mymemory\', $(\'#edit-destination input[value!=\\\'\\\']\'));">My Memory API</a> ';
					html += '<a href="javascript:;" class="button" onclick="traduzir(\'google\');">Google</a> ';
					html += '<a href="javascript:;" class="button" onclick="traduzir(\'bing_iframe\');">Bing Iframe</a> ';
					html += '<a href="javascript:;" class="button" onclick="traduzir(\'bing\');">Bing</a> ';
					
					$("#edit-destination").html(html);
				}
				if(name == "save")
				{
					if(!json.errors)
					{
						if(json.save_from || json.save_destination)
						{
							alert('<?php echo $text_save_success; ?>');
						}
						else
						{
							alert('<?php echo $text_not_save; ?>');
						}
					}
					else
					{
						alert(json.errors);
					}
				}
			},
			error: function(xhr, ajaxOptions, thrownError)
			{
				$("#overlay").hide();
			}
		});
	});
	
	$(document).on("focus", "#edit-from input, #edit-destination input", function()
	{
		var data_num = $(this).attr("data-num");
		$('#from'+ data_num +', #destination'+data_num).toggleClass("border_select");
	});
	
	$(document).on("blur", "#edit-from input, #edit-destination input", function()
	{
		$("#edit-from input, #edit-destination input").removeClass("border_select");	
	});

	$.ajax(
	{
		url: '<?php echo $urlcheckupdate; ?>',
		dataType: 'json',
		beforeSend: function()
		{
			$("#checkupdate").text(checking_update_text);
		},
		success: function(data)
		{
			if(data.update)
			{
				$("#checkupdate").html(data.html);
			}
			else
			{
				$("#checkupdate").html(data.html);
				setTimeout(function()
				{
					$("#checkupdate").hide();
				}, 5000);
			}
		},
		error: function(xhr, ajaxOptions, thrownError)
		{
			setTimeout(function()
			{
				$("#checkupdate").hide();
			}, 5000);
		}
	});
});
//--></script>
<?php echo $footer; ?>