var img1,img2, galeria; //Componentes
var widthImagem, heightImagem; //Tamanhos
var dataBound; //Endereço de bound

var arrayImagens = new Array(); //Array de imagens que aparecerão no slideshow
var arrayTitulos = new Array();
var arrayDescricoes = new Array();
var arrayLinks = new Array();

var indiceImagem = 0, indiceAntigo, quantidadeImagens;
var timer;
var isFirst = true;
var isChanging = false;

var ID_GALERIA = "Galeria";
var CLASSE_IMAGEM = "imgGaleria";
var TAG_WIDTH = "WidthImagem";
var TAG_HEIGHT = "HeightImagem";
var TAG_DATABOUND = "Databound";
var TEMPO_SLIDE = 4000;

$(document).ready(function()
{
	OnLoad();
});

/// <summary>
/// Evento de load do script
/// </summary>
/// <owner>Victor</owner>
function OnLoad()
{
	galeria = document.getElementById(ID_GALERIA);
	
	widthImagem = galeria.getAttribute(TAG_WIDTH);
	heightImagem = galeria.getAttribute(TAG_HEIGHT);
	dataBound = galeria.getAttribute(TAG_DATABOUND);
	
	img1 = document.createElement("div");
	img2 = document.createElement("div");
	
	img1.className = img2.className = CLASSE_IMAGEM;
	img1.style.width = img2.style.width = widthImagem;
	img1.style.height = img2.style.height = heightImagem;
	img1.style.top = img2.style.top = galeria.style.top;
	img1.style.left = img2.style.left = galeria.style.left;
	img1.style.zIndex = 2;
	img2.style.zIndex = 1;
	galeria.appendChild(img1);
	galeria.appendChild(img2);
	
	GetImagens();
	
	RotateSlideshow();
	timer = setTimeout(RotateSlideshow,TEMPO_SLIDE);
}

function SlideshowOnClick()
{
	if (!isChanging)
	{
		RotateSlideshow();
	}
}

/// <summary>
/// Atualiza a imagem mostrada
/// </summary>
/// <owner>Victor</owner>
function RotateSlideshow()
{
	clearTimeout(timer);
	
	$("#span_titulo_vitrine").text(arrayTitulos[indiceImagem]);
	$("#span_texto_vitrine").text(arrayDescricoes[indiceImagem]);
	$("#link_vitrine").attr("href", arrayLinks[indiceImagem]);
							
	if (isFirst)
	{
		SetImagem(img1, arrayImagens[indiceImagem]);
		isFirst = false;
	}
	else
	{
		isChanging = true;
		SetImagem(img2, arrayImagens[indiceImagem]);
		$(img1).fadeOut("slow", function()
										 {
											 SetImagem(img1, arrayImagens[indiceAntigo]);
											 $(img1).show();
											 isChanging = false;
										 })
	}
	
	indiceAntigo = indiceImagem;
	indiceImagem++;
	if (indiceImagem == quantidadeImagens)
	{
		indiceImagem = 0;
	}
	
	timer = setTimeout(RotateSlideshow,TEMPO_SLIDE);
}

/// <summary>
/// Seta a imagem na div
/// </summary>
/// <owner>Victor</owner>
function SetImagem(control, imageAddress)
{
	control.style.backgroundImage = "url('" + imageAddress + "')";
}

/// <summary>
/// Retorna a imagem mostrada na div
/// </summary>
/// <owner>Victor</owner>
function GetImagem(control)
{
	return control.style.backgroundImage;
}

/// <summary>
/// Retorna todas as imagens do databound em formato de html puro
/// </summary>
/// <owner>Victor</owner>
function GetImagens()
{
	$.ajax(
		   {
			   url: dataBound,
			   async: false,
			   success: function(html)
			   {
				   PreencherArray(html);
			   }
		   }
	);
}

/// <summary>
/// Preenche o array com as imagens em split
/// </summary>
/// <owner>Victor</owner>
function PreencherArray(html)
{
	var resultArray = html.split("@");
	for(var i=0; i < resultArray.length; i+=4)
	{
		arrayImagens.push(resultArray[i]);
		arrayTitulos.push(resultArray[i+1]);
		arrayDescricoes.push(resultArray[i+2]);
		arrayLinks.push(resultArray[i+3]);
	}
	
	quantidadeImagens = arrayImagens.length;
}