var imgObj;
var imgIndex; 
var imgCaption;
var imgHeight;
var imgWidth;

function InitializeSample(){
    CreateSlideGallery();
    $('body').append('<div class="hidden" style="visibility:hidden;"><a class="prevHidden" href="#"> </a><span></span></div>');
    $('.sample').click(function(){
        var rel = $(this).attr('rel');
        var i = new Image();
        
        var winH = $(window).height()-140;
        var winW = $(window).width()-140;
        var imgRatio = "";
        
        imgHeight = rel.substring(rel.indexOf("height=")+7);
        imgWidth = rel.substring(rel.indexOf("width=")+6, rel.indexOf("&height"));        
        imgRatio = imgWidth/imgHeight;
        
        i.src = rel.substring(0, rel.indexOf("?"));
        
        if(imgWidth > winW)
        {
            i.width = winW;
            i.height = parseInt(winW/imgRatio);
        }
        else if (imgHeight > winH)
        {
            i.width = parseInt(winH*imgRatio);
            i.height = winH;
        }
        else
        {
            i.width = imgWidth;
            i.height = imgHeight;        
        }
                         
        imgObj = i;
        imgIndex = 0;
        imgCaption = $(this).attr('title');
        addOverlay();           
        removeModalGallery();  
    });
    $('.sample').each(function(){
        i = new Image();
        i.src = $(this).attr('rel');
    });  
}

function updateWindow(index){   
    var rel = $('.sample:eq('+index+')').attr('rel');
    var winH = $(window).height()-140;
    var winW = $(window).width()-140;
    var imgRatio = "";    
    
    imgHeight = rel.substring(rel.indexOf("height=")+7);
    imgWidth = rel.substring(rel.indexOf("width=")+6, rel.indexOf("&height")); 
    imgRatio = imgWidth/imgHeight;    
    
    i = new Image();
    i.src = rel.substring(0, rel.indexOf("?"));

    if(imgWidth > winW)
    {
        i.width = winW;
        i.height = parseInt(winW/imgRatio);
    }
    else if (imgHeight > winH)
    {
        i.width = parseInt(winH*imgRatio);
        i.height = winH;
    }
    else
    {
        i.width = imgWidth;
        i.height = imgHeight;        
    }
            
     
    imgCaption = $('.sample: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').hide();
            });  
        });        
    });      
}

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);
        $('.prev').css('visibility','hidden');
        $('.next').css('visibility','hidden');
}

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

function CreateSlideGallery(){
       for (i = 1; i <= $('.caseImgCont').length; i++) {
            $("#viewerFrame" + i).fadeIn("slow");
            $('.linkprop').fadeIn("slow");
            $('.loopSlide' + i).jCarouselLite({
                mouseWheel: true
            });
            $('.loopSlide' + i +' li').width(72);
           
            $("#viewerFrame").fadeIn("slow");
            $('.linkprop').fadeIn("slow");
            $('.loopSlide').jCarouselLite({
                mouseWheel: true
            });
            $('.loopSlide li').width(72);
        };
};


window.onload = InitializeSample;