﻿
function layoutViewImages()
{
    var img = ID("ct_view_images");
    if(img)
    {
        addEvent(window,"resize", layoutViewImages);
        img.style.height = (document.documentElement.offsetHeight - 61) + "px";
    }
    else
        removeEvent(window,"resize", layoutViewImages);
}

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

function viewImages(n)
{
    document.documentElement.onkeyup = movimentImages;

    var img = new Image();
    img.src = LIST_GALLERY_IMAGES[n].img;
        
    var bkg = ID("backg_ct_view_images");
    if(!bkg) bkg = Div("backg_ct_view_images","",null,document.body);
    with(bkg.style)
    {
        display = "block";
        position = "absolute";
        top = "0px";
        left = "0px";
        width = "100%";
        height = "100%";
        backgroundColor = "#000";        
        filter = "alpha(opacity = 90)";
        opacity = ".9";        
    }  
    
    var head_bkg = ID("head_ct_view_images");
    if(!head_bkg)
    {
        head_bkg = Div("head_ct_view_images","<a style='color:#fff;font-weight:bold;float:right;margin:9px 10px 0 10px;' href='javascript:closeViewImages()'>[x] Fechar</a><div id='status_pos_view_images' style='margin:9px 10px 0 10px;'>...</div><div id='legend_view_images' style='clear:both;height:24px;padding-top:2px;margin-top:9px;text-align:center;background-color:#333;color:yellow;'></div>",null,document.body);
    }
    with(head_bkg.style)
    {
        display = "block";
        position = "absolute";
        top = "0px";
        left = "0px";
        width = "100%";
        height = "60px";
        color = "#fff";
        fontSize = "13px";
        background = "#666 url(/files/medias/images/header-view-images.gif) no-repeat 50% 2px";  
        lineHeight = "normal";
    }   
    
    var image_bkg = ID("ct_view_images");
    if(!image_bkg) image_bkg = Div("ct_view_images","",null,document.body);
    with(image_bkg.style)
    {
        display = "block";
        position = "absolute";
        top = "61px";
        left = "0px";
        width = "100%";
        overflow = "hidden"; 
        textAlign = "center";
    }   
    
    document.documentElement.style.overflow = document.body.style.overflow = "hidden";
    
    openImage(n); 
    layoutViewImages();    
}

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

function closeViewImages()
{
    document.documentElement.onkeyup = null;
    document.documentElement.style.overflow = document.body.style.overflow = "auto";
    ID("backg_ct_view_images").style.display = ID("head_ct_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)
{    
    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;

    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 style='font:bold 25px arial;color:#fff;letter-spacing:-1px;display:block;text-algin:center;width:370px;padding:5px 0 5px 0;position:absolute;top:50%;left:50%;margin:-10px 0 0 -185px;'>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);   

        if(parseInt(e.offsetHeight) > document.documentElement.offsetHeight) toggleMeasures(e,"height");     
    }

    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;
}

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

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 )
    {
        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);
    }

    if(kc==27) //Esc
        closeViewImages();

    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 
    }
}
