// JavaScript Document
var imgObj;
var imgIndex; 
var imgCaption;
var imgHeight;
var imgWidth;

function InitializeModalGallery(){
    $('body').append('<div class="hidden" style="visibility:hidden;"><a class="prevHidden" href="#"> </a><span></span></div>');
    $('.slideshow').click(function(){
        var rel = $(this).attr('rel');
        var i = new Image();
        
        imgHeight = rel.substring(rel.indexOf("height=")+7);
        imgWidth = rel.substring(rel.indexOf("width=")+6, rel.indexOf("&height"));
        
        i.src = rel.substring(0, rel.indexOf("?"));
        i.width = imgWidth;
        i.height = imgHeight;
                         
        imgObj = i;
        imgIndex = $('.slideshow').index(this);
        imgCaption = $(this).attr('title');
        addOverlay();           
        removeModalGallery();  
    });
    $('.slideshow').each(function(){
        i = new Image();
        i.src = $(this).attr('rel');
    });  
}

function updateWindow(index){   
    var rel = $('.slideshow:eq('+index+')').attr('rel');
    
    imgHeight = rel.substring(rel.indexOf("height=")+7);
    imgWidth = rel.substring(rel.indexOf("width=")+6, rel.indexOf("&height")); 
    
    i = new Image();
    i.src = rel.substring(0, rel.indexOf("?"));
    i.height = imgHeight;
    i.width = imgWidth;
     
    imgCaption = $('.slideshow:eq('+index+')').attr('title');
    imgObj = i;
    imgIndex = index;
    $('.hidden').remove();    
    $('body').append('<div class="hidden" style="visibility:hidden;width:'+imgObj.width+'px;">'+imgCaption+'</div>');
    $('#window').height($('#window').height());
    $('#window').width($('#window').width());
    $('.caption, .prev, .next').hide();
        
    var hidHeight = $('.hidden').height();    
    var prevHeight = $('.prev').height();
    var paddCapt = parseInt($('.caption').css('padding-top')) * 4;   
    
    $('img', '#window').fadeOut(300, function(){        
        $('#window').animate({
            height: (imgObj.height + hidHeight + prevHeight + 20) + "px",
            marginLeft: -((imgObj.width+20)/2) + "px",
            marginTop: -((imgObj.height + hidHeight + prevHeight + 20 + paddCapt)/2) + "px",
            width: imgObj.width + "px"
        },400, function(){
            addImageContent('#window'); 
            $('img', '#window').fadeIn(250, function(){
                $('.caption, .prev, .next').show();
            });  
        });        
    });      
}

function addOverlay(){
    var overlay = '<div id="overlay" style="filter:alpha(opacity=50);"> </div>';
    $('body').append(overlay);
    $('#overlay').fadeIn(400, function(){
        addWindow();        
    });    
}

function addWindow(){
    var window = '<div id="window">asdf</div>';
    $('body').append(window);
    addImageContent('#window'); 
    $('#window').slideDown(400);    
}

function addImageContent(id){    
    $(id).html('<img src="'+imgObj.src+'" height="'+imgObj.height+'" width="'+imgObj.width+'" />');  
    addCaption();  
    $(id).css({
        marginLeft: -parseInt((imgObj.width+20)/2)+"px",
        marginTop: -parseInt(($(id).height()+20)/2)+"px"
    });            
}

function addCaption(){   
    var capt = '<div style="height:14px;padding:5px 0;width:'+imgObj.width+'px;"><a class="next" onclick="updateWindow('+(imgIndex+1)+');return false;" href="#"> </a><a class="prev" onclick="updateWindow('+(imgIndex-1)+');return false;" href="#"> </a></div><div class="caption" style="width:'+imgObj.width+'px;">'+imgCaption+'</div>';
    $('#window').append(capt);
    if(!imgIndex > 0)
        $('.prev').css('visibility','hidden');
    else    
        $('.prev').show();
    if(imgIndex == ($('.slideshow').size()-1))
        $('.next').css('visibility','hidden');
    else
        $('.next').show();
}

function removeModalGallery(){
    $('#overlay').click(function(){
        $('#window, #overlay').fadeOut(400, function(){
            $(this).remove();
        });    
    });
}


document.onload = InitializeModalGallery;