var imgObj;
var imgIndex; 
var imgCaption;

function InitializeModalGallery(){
    $('body').append('<div class="hidden" style="visibility:hidden;"><a class="prevHidden" href="#">&#160;</a><span></span></div>');
    $('.slideshow').click(function(){
        var i = new Image();
        i.src = $(this).attr('rel');
        imgObj = i;
        imgIndex = $('.slideshow').index(this);
        //imgCaption = $(this).attr('title');
        imgCaption = "";
        addOverlay();           
        removeModalGallery();  
    });
    $('.slideshow').each(function(){
        i = new Image();
        i.src = $(this).attr('rel');
    });
}

function updateWindow(index){    
    i = new Image();
    i.src = $('.slideshow:eq('+index+')').attr('rel');   
    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);">&#160;</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+'" />');  
    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="#">&#160;</a><a class="prev" onclick="updateWindow('+(imgIndex-1)+');return false;" href="#">&#160;</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();
        });    
    });
}


window.onload = InitializeModalGallery;