var index;
var producto;
var categoria;
var lista_productos;
var num;

function load_productos(num_, index_, lista_productos_, lista_descripciones_, producto_,width_,height_){


	index = index_;
	producto = producto_;
	lista_productos = lista_productos_;
	lista_descripciones = lista_descripciones_;
	num = num_;
	width = width_;
	height= height_;
	
	productos = lista_productos.split(";");	
	descripciones = lista_descripciones.split("##");
	
	max = false;

	if (index + num == productos.length)
	{
		index = productos.length - num;
		max = true;
	}
	
	if (productos.length <= num)
	{
		max = true;
	}

	if (index < 0)
	{
		index = 0;
	}

	for (k=0; k<num; k++)
	{
		num_img = k+1;
				
		img = 'img_'+num_img;
		
		//highlight(img, 'white');
		
		if (productos[k+index] != null)
		{
			p = productos[k+index];			
			
			descripcion = descripciones[k+index];

			color = '#F7D900'; // color de seleccionado
			color2 = '#000000';	
			
			/*
			
			highlight(img, color2);	
			
			styles = "style='border-collapse:collapse' onmouseover=\"highlight('"+img+"', '"+color+"')\" onmouseout=\"highlight('"+img+"', '"+color2+"')\"";
			
			if (p == producto)
			{
				highlight(img, color);	
				styles = "style='background-color:"+color+";border-collapse:collapse'";
			}																					
			
			*/
			
			styles = "";

			//document.getElementById(img).innerHTML = "<table border='0' "+styles+" ><tr><td colspan='2' align='center'><a href='"+p+"' title='"+descripcion+"' rel='lightbox-img_"+num_img+"' target='_blank'><img src='"+p+"' width='"+width+"px' height='"+height+"px' border='0'></td></tr></table>";		
			
			document.getElementById(img).innerHTML = "<table border='0' "+styles+" ><tr><td colspan='2' align='center'><a href='#' title='"+descripcion+"' onClick='cambiar_foto(\""+p+"\",\""+descripcion+"\");' ><img src='"+p+"' width='"+width+"px' height='"+height+"px' border='0' style='display: inline'></a></td></tr></table>";		
		}
	}
	
	if (index == 0)
	{
		document.getElementById("left_button").innerHTML = "<img height='"+height+"px' src='../imagenes/left_arrow.png' >";
	}
	else
	{
		document.getElementById("left_button").innerHTML = "<img height='"+height+"px' src='../imagenes/left_arrow.png' onClick='left_scroll();' style='cursor:pointer'>";
	}
	
	if (max)
	{
		document.getElementById("right_button").innerHTML = "<img height='"+height+"px' src='../imagenes/right_arrow.png'  >";
	}
	else
	{
		document.getElementById("right_button").innerHTML = "<img  height='"+height+"px' src='../imagenes/right_arrow.png' onClick='right_scroll();' style='cursor:pointer'>";
	}
	


}

function clear()
{
	
	for (i = 1; i < num + 1; i++)
	{
		img = 'img_'+i;
		document.getElementById(img).innerHTML = "";
	}
}

var  TimeToFade = 0;

function left_scroll()
{
	index = index - 1;	
	setTimeout('reload()',TimeToFade+200);
}

function right_scroll()
{
	index = index + 1;
	setTimeout('reload()',TimeToFade+200);
}	

function reload()
{
	clear();
	load_productos(num, index,lista_productos, lista_descripciones, producto,width, height);
}


function highlight(el, col){
	document.getElementById(el).style.backgroundColor=col;
}



function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
	return;
   
  if(element.FadeState == null)
  {
	if(element.style.opacity == null
		|| element.style.opacity == ''
		|| element.style.opacity == '1')
	{
	  element.FadeState = 2;
	}
	else
	{
	  element.FadeState = -2;
	}
  }
   
  if(element.FadeState == 1 || element.FadeState == -1)
  {
	element.FadeState = element.FadeState == 1 ? -1 : 1;
	element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
	element.FadeState = element.FadeState == 2 ? -1 : 1;
	element.FadeTimeLeft = TimeToFade;
	setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}

function  animateFade(lastTick, eid)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
	element.style.opacity = element.FadeState == 1 ? '1' : '0';
	element.style.filter = 'alpha(opacity = '
		+ (element.FadeState == 1 ? '100' : '0') + ')';
	element.FadeState = element.FadeState == 1 ? 2 : -2;
	return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
	newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}