function layoutViewImages()
{
    var img = ID("ct_view_images");
    if(img)
    {
        img.style.height = (document.documentElement.offsetHeight - 56) + "px";
        ID("list_view_images").style.height = ID("list_view_images").childNodes[0].style.height = ID("list_view_images").childNodes[1].style.height = img.style.height;
        
        addEvent(window,"resize", layoutViewImages);        
        addEvent(window,"scroll", setPositionTop);
        setPositionTop();        
    }
    else
    {
        removeEvent(window,"resize", layoutViewImages);
        removeEvent(window,"scroll", layoutViewImages);
    }
}

//-------------------------------------------------------

function setPositionTop()
{
	var t = document.documentElement.scrollTop + document.body.scrollTop; //para FF, IE e CH
	ID("bkg_view_images").style.top = t + "px";
	ID("header_view_images").style.top = t + "px";
	ID("ct_view_images").style.top = (t+56) + "px";
	ID("list_view_images").style.top = (t+56) + "px";
	ID("middle_view_images").style.top = (t+(document.documentElement.offsetHeight)/2) + "px";
}

//-------------------------------------------------------

function toggleListImages()
{
    var list = ID("list_view_images");
    var opened = list.style.width!="10px";
    
    list.style.width = opened ? "10px" : "110px";
    with(list.getElementsByTagName("a")[0])
    {
        style.backgroundPosition = (opened ? "-209" : "-228") + "px 50%";
        title = "Clique para " + (!opened ? "ocultar" : "exibr") + " lista de imagens";
    }
    ID("middle_view_images").childNodes[1].style.marginLeft = (opened ? "20" : "120") + "px";
}

//-------------------------------------------------------

var LIST_GALLERY_IMAGES = [];
/**
 * listLinksImages - deve conter links "a" com um objeto "img" que deve conter em seu "title" a legenda da imagem
*/
function viewImages()
{    
    document.documentElement.onkeyup = movimentImages;
        
    var bkg = ID("bkg_view_images");
    if(!bkg) bkg = Div("bkg_view_images","","bkg_view_images",document.body);
    
    var header = ID("header_view_images");
    if(!header) header = Div("header_view_images","<a href='javascript:void(closeViewImages())' title='Fechar'>X</a><div id='status_pos_view_images'>...</div><div id='legend_view_images'></div>","header_view_images",document.body);  
    
    var image_bkg = ID("ct_view_images");
    if(!image_bkg) image_bkg = Div("ct_view_images", "", "ct_view_images",document.body);
    
    var middle = ID("middle_view_images");
    if(!middle)
    {
        var bts = "<a href='javascript:void(setMoveImage(MoveImage.{0}))' style='float:{1};background-position:{2}px -25px;' title='{3}'>&nbsp;</a>";
        bts = bts.toFormat("NEXT","right","-30", "Próxima") + bts.toFormat("PREV","left","6", "Anterior");
        middle = Div("middle_view_images", bts ,"middle_view_images",document.body);
    }
    
    var listImgs = ID("list_view_images");
    if(!listImgs) listImgs = Div("list_view_images", "<a href='javascript:void(toggleListImages())' title='Clique para ocultar lista de imagens'></a><div></div>", "list_view_images",document.body);
              
    layoutViewImages(); 
    
    ID("bkg_view_images").style.display = ID("header_view_images").style.display = ID("middle_view_images").style.display = ID("list_view_images").style.display = ID("ct_view_images").style.display = "block";
    
    return { 
        setListImages: setThumbNails, 
        img: image_bkg 
    };
}

//--------------------------

//Cria thumbnails do visualizador e carrega imagem cujo indice e igual a "index"
function setThumbNails(imgs, index)
{	
	//verifica se os dados "imagens" estoa chegando como json ou já com a constante LIST_GALLERY_IMAGES ja populada
	imgs = typeof imgs=="string" ? eval("_LI="+imgs) : imgs;
	  
	var list = [], a = "";
	for(var i = 0; i<imgs.length; i++)
	{
		list.push( {img:imgs[i].img, legend:imgs[i].legend} );
		a += "<a href='javascript:void(openImage(" + i + "))'><img src='" + imgs[i].img + "' alt='' tilte='" + imgs[i].legend + "' /></a>";
	}
	ID("list_view_images").getElementsByTagName("div")[0].innerHTML = a;
	LIST_GALLERY_IMAGES = list;
	openImage(typeof index != "number" ? 0 : index);
}

//--------------------------

function closeViewImages()
{
    document.documentElement.onkeyup = null;    
    ID("bkg_view_images").style.display = ID("header_view_images").style.display = ID("middle_view_images").style.display = ID("list_view_images").style.display = ID("ct_view_images").style.display = "none";
}

//------------------------------------------------------------------------------

var NM_IMAGE = -1; //representa numero da imagem em exibicao
function openImage(nm_img)
{
    if(LIST_GALLERY_IMAGES.length>0)
    {
        NM_IMAGE = nm_img;
        
        var img = new Image();
        img.src = LIST_GALLERY_IMAGES[nm_img].img.replace("/temp/", "/").replace("thumbnail___", "");
        
        ID("legend_view_images").innerHTML = LIST_GALLERY_IMAGES[nm_img].legend == null ? "..." : LIST_GALLERY_IMAGES[nm_img].legend;

        ID("status_pos_view_images").innerHTML = (parseInt(NM_IMAGE)+1).toString().addConcat("0",2) + " de " + LIST_GALLERY_IMAGES.length.toString().addConcat("0",2);

        var ct = ID("ct_view_images");
        ct.innerHTML = "<span class='status-loader-image'>Aguarde, carregando imagem...</span>";
        var loadImage = function(e)
        {       	
            ct.innerHTML = "";
            e.ondblclick = function(){toggleMeasures(this,"toggle")};
            e.style.width = wImg;
            e.style.height = hImg;
            e.title = tImg;
            ct.appendChild(e); 

            //se imagem for maior que area, forcar altura / largura
            if(e.offsetHeight > ct.offsetHeight)
            {
                e.style.width = "auto";
                e.style.height = ct.offsetHeight + "px";
            }
            if(e.offsetWidth > ct.offsetWidth)
            {
                e.style.width = ct.offsetWidth + "px";
                e.style.height = "auto";
            }
        }

        if(img.complete) loadImage(img);
        else img.onload = function(){loadImage(this)};
    }
}

//------------------------------------------------------------------------------

var wImg = "auto", hImg = "auto", tImg = "Duplo-clique para maximizar";
function toggleMeasures(img, state) //0 - width / 1 - height
{        
    if(state == "toggle")
    {
        state = (wImg == "auto" && hImg == "auto") ? "max" : "reset";
    }

    if(state == "reset")
    {
        wImg = hImg = "auto";
        tImg = "Duplo-clique para maximizar";
        img.parentNode.style.overflow = "auto";
    }
    
    if(state == "max")
    {
        wImg = hImg = "100%";
        tImg = "Duplo-clique para restaurar";
        img.parentNode.style.overflow = "hidden";
    }
    
    if(state == "width")
    {
        wImg = "100%";
        hImg = "auto";
    }
    
    if(state == "height")
    {
        wImg = "auto";
        hImg = "100%";
    }

    img.style.width = wImg;
    img.style.height = hImg;
    img.title = tImg;
}

//------------------------------------------------------------------------------

var MoveImage = {NEXT: 39, PREV: 38};
function setMoveImage(kc)
{
    if(kc==37 || kc==38) NM_IMAGE--;
    if(kc==32 || kc==39 || kc==40) NM_IMAGE++;

    if(NM_IMAGE >= LIST_GALLERY_IMAGES.length ) NM_IMAGE = 0;
    if(NM_IMAGE < 0 ) NM_IMAGE = LIST_GALLERY_IMAGES.length-1;
    openImage(NM_IMAGE);
}

//------------------------------------

function movimentImages(evt)
{
    evt = window.event?event:evt;
    var kc = evt.keyCode ? evt.keyCode : (evt.which ? evt.which : evt.charCode);
    
    if( (kc>=37 && kc<=40) || kc==32 ) setMoveImage(kc);

    if(kc==27) closeViewImages(); //Esc
    
    if(kc==73) toggleListImages(); //letra I

    var _img = ID("ct_view_images").getElementsByTagName("IMG");
    if(_img.length>0)
    {
        if(kc==65 || kc==72) toggleMeasures(_img[0],"height"); //letra A ou H
        if(kc==76 || kc==87) toggleMeasures(_img[0],"width"); //letra L ou W
        if(kc==77) toggleMeasures(_img[0],"max"); //letra M 
        if(kc==82) toggleMeasures(_img[0],"reset"); //letra R 
    }
    return false;
}

//==============================================================================================
//---------------------- Utilitarios -----------------------------------------------------------

//Para CMS e Robust
function openViewImages(index)
{
    var vi = viewImages();
    vi.setListImages(LIST_GALLERY_IMAGES, index);
    return void(0);
}