$(document).ready(function()
	{
	change_marquee(0);
	});

var curr_item = 0;
var curr_on = 0;
var mytime;
//var timeout; //hacer lo del timeout

function change_marquee(new_item, direccion)
	{
	curr_on = 1;
	
	var new_html = "";
	var prev=0;
	
	for(var i=0; i<5;i++)
		{	//Busco los datos desde el array de marquesina	
		if (marqueearr[new_item][i]!="")
			{	//Agrego contenido si hay contenido
			if(prev)					 // Agrego los divisores si es que habia datos antes
				new_html += "<div class=\"marquee_texto_divider\">|</div>";
				
			new_html += "<div class=\"marquee_texto_"+i+"\">" + marqueearr[new_item][i] + "</div>";
			prev=1;
			}
		}
			
	if (marqueearr[new_item][5]!=0)
		{
		if(prev)						// Agrego los divisores si es que habia datos antes
			new_html += "<div class=\"marquee_texto_divider\">|</div>";
		new_html += "<div class=\"marquee_texto_ciudad\" id=\"marquee_texto_ciudad1\"><div class=\"img_flag_" + marqueearr[new_item][5] + "\" ></div>" + marqueearr[new_item][6] + "</div>";
		}

	//Averiguo la direccion, esto es para cuando se apreta el boton back, que funcione para el otro lado el efecto
	var dir1;
	var dir2;
	if(direccion=='-1')
		{
		dir1="right";
		dir2="left";
		}
	else
		{
		dir1="left";
		dir2="right";
		}
	
	//Este if contiene dos diferentes divs porque sino me cambia el texto antes de que haga el slide
	if ($("#marquee_texto_div1").is(":hidden"))
		{
		$("#marquee_texto_div1").html(new_html);
		$("#marquee_texto_div2").hide('slide',{ direction: dir1 },fadetime);
		$("#marquee_texto_div1").delay(fadetime+15).show('slide',{ direction: dir2 },fadetime);
    	}
	else
		{
		$("#marquee_texto_div2").html(new_html);
		$("#marquee_texto_div1").hide('slide',{ direction: dir1 },fadetime);
		$("#marquee_texto_div2").delay(fadetime+15).show('slide',{ direction: dir2 },fadetime);
		}
	
	curr_item = new_item;

	if( (new_item+1) < marqueearr.length)
		new_item++;
	else
		new_item=0;
	
	setTimeout('curr_on=0;',fadetime*2); //Como para que no cambie nada si el efecto esta sucediendo
	mytime = setTimeout('change_marquee(' + new_item + ',1);',timeout);
	}

$(function()
	{
    $("#marquee_prev")
	.click(function()
		{
		if(!curr_on)
			{//Como para que no cambie nada si el efecto esta sucediendo
			clearTimeout(mytime);
			if(curr_item>0)
				mytime = setTimeout('change_marquee(' +(curr_item-1) + ',\'-1\');',fadetime);
			else
				change_marquee(marqueearr.length-1,'-1');				
			}				
		});

    $("#marquee_next")
	.click(function()
		{ 
		if(!curr_on)
			{
			clearTimeout(mytime);
			
			if( (curr_item+1) < marqueearr.length)
				change_marquee(curr_item+1,1);
			else
				change_marquee(0,1);
			}
		})
	});