var id_gen = function(name){
	if (document && document.getElementsByName 
		&& document.getElementsByName(name).length !== 0)
	{
		return name + document.getElementsByName(name).length;
	}else{
		return name;
	}
};
// uncomment this when run on the live server
// var tfdomain = 'http://www.thisforest.info/media/img/widget/'; // url to directory of widget style files
// var tfimages = 'http://thisforest.info/media/i/';
var tfdomain = 'http://thisforest.info/media/img/widget/'; // url to directory of widget style files
var tfimages = 'http://thisforest.info/media/i/';

var i = {
	tfform: {
		// url: 'http://thisforest.info/tag/', // url to form handler
        url: 'http://thisforest.info/tag/', // url to form handler
		code: 'code', // form name of field
		submit: '' // form name of trace button
	},
	tftxt: {
		discover: tfdomain+'discover.en.png', // url to discover image text
		d: 'DESCUBRE LA HISTORIA DE SU PRODUCTO FORESTAL', // alt text for the discover image
		p1: 'Introduzca el código que posee en su tarjeta para seguir los pasos de su producto.',
		p2: 'O pruebe un <a onclick="sample_code(\''+id_gen('code')+'\')" href="#" style="color:white;">código de ejemplo</a> para ver como funciona.'
	},
	lang: '' // language of text - prepend with a period
};

var $el = function(id){
    return document.getElementById ? document.getElementById(id) : document.all[id];
};

var _samples = [

'F1007170'];
var _index = 0;

var goto_tag = function(tag_code) {
        if (!$el(tag_code).value) return;
        window.open("http://thisforest.info/tag/" + $el(tag_code).value, "thisforest", "_blank");
    };
    
var sample_code = function(tag_code) {
        $el(tag_code).value = _samples[_index];
        _index = (_index + 1) % _samples.length;
    };

var button_css = ''
var o = '';
o += '<div id="tfw">';
    o += '<table  border="0" cellspacing="0" cellpadding="0" id="tfw" style="background-color:#FBFCF8; box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.5);width:100%;display:table;">';
        o += '<tr><td align="center" valign="top" style="font-family:Arial,Helvetica,sans-serif !important; font-size:12px; line-height:16px; color:#001F39;">';
            o += '<div class="tfw-wrp" style="margin:0 auto; padding:10px 0 14px; text-align:left;">';
                o += '<div class="tfw-cnt" style="position:relative;">';
                    o += '<div style="position:absolute; left:-10px;"><img src="'+tfimages+'main-logo-small.png" alt="THISFISH"></div>';
                    o += '<div style="height:50px; margin-left:125px;margin-right:auto;"><p style="padding-right:10px"></p></div>';
                    o += '<p style="margin:1.4em 0 0; padding:0 10px 0 10px; padding-bottom: 0px;  font-family: proxima-nova-1" class="">'+i.tftxt.p1+'</p>';
                o += '</div>';
            o += '</div>';
        o += '</td></tr>';
        o += '<tr><td align="center" valign="top" style="font-family:Arial,Helvetica,sans-serif !important; font-size:12px; line-height:16px; color:#001F39; border-top:0px; background-color:#FFB511">';
            o += '<div class="tfw-trace" style="margin:0 auto; padding:0 0 0; text-align:left;">';
                o += '<div class="tfw-cnt" style="padding:1px 0 0 10px;"><br/>';
                    o += '<form action="'+i.tfform.url+'" target="_blank" style="position:relative; margin:0 96px 0 0;">';

                        o += '<div class="tfw-textwrapper" style="width:100%; /*border:1px solid red;*/ float:left; height:30px; padding:3px 3px 7px 0; margin-right:86px; border-radius:0px !important;">';
                            o += '<input id="'+id_gen(i.tfform.code)+'" type="text" name="'+'code'+'" value="..." onfocus="javascript:this.value=\'\'" style="border-radius:0px; background:white; border:0; margin:0; padding:0 5px; width:100%; height:30px; font-family:Arial, Helvetica,sans-serif !important; font-size:22px; font-weight:bold; line-height:1em; text-transform:uppercase;">';
                        o += '</div>';
                    
                        o += '<div class="tfw-buttonwrapper" style="/*border:1px solid blue;*/ float:left; margin-right:-100%;margin-left:-86px; padding-right:10px; height: 39px; overflow-y:hidden;">';
                            o += '<input type="image" name="'+i.tfform.submit+'" src="'+tfdomain+'trace'+i.lang+'.png" onmouseover="javascript:this.src=\''+tfdomain+'trace_ovr'+i.lang+'.png\'" onmouseout="javascript:this.src=\''+tfdomain+'trace'+i.lang+'.png\'" value="TRACE" width="86" height="40" style="padding:0; width:86px;height:40px;">';
                        o += '</div>';
                    
                        o += '<div style="clear:both;"></div>';
                    o += '</form>';
                    // o += '<p style="margin:0.8em 22px 1.2em 0 !important; font-size:11px; line-height:14px; "><img src="'+tfdomain+'a.png" width="8" height="8" alt="&raquo" style="display:inline !important; margin-bottom:0px !important;"> '+i.tftxt.p2+'</p>';
                    o += '<p style="margin:0.8em 22px 1.2em 0 !important; font-size:9px; line-height:10px; font-family: proxima-nova-1">'+i.tftxt.p2+'</p>';
                o += '</div>';
                o += '</div>';
            o += '</div>';
        o += '<img src="./logo.png"></td></tr>';
    o += '</table>';
o += '</div>';

document.write(o);