﻿$(document).ready(function(){
    $("body").append("<table id='picbox_table' style='height: 100%; width: 100%; position: absolute; left: 0px; top:0px'><tr style='vertical-align:center'><td style='vertical-align:center'><div>"+
    "<table id='picbox_mainbox' cellpadding=0 cellspacing=0 border=0 style='margin-left: auto; margin-right: auto; width: 780px; height: 530px; background-image: url(\"images/site/black80.png\"); padding: 0px 0px 0px 0px; position:relative; text-align: center'><tr><td style='width:100%; height: 100%; '><div style='width:100%; height: 100%; position: relative'>"+
    "<div id='picbox_closebox' style='cursor:pointer; position: absolute; bottom: 3px; right: 3px; vertical-align: middle; text-align: center; width: 20px; height: 20px; '><img style='vertical-align: middle' src='images/site/close.png'/></div>"+    
    "<table style='width:100%; height:100%'><tr><td rowspan=2 style='width: 30px; padding: 0px 20px 0px 20px'><a href='javascript:void(0)' id='picbox_left'><img border=0  src='images/site/leftarrow.png' style='border:0px;vertical-align: middle'/></a></td>"+
    "<td style='padding: 20px 0px 0px 0px'><div id='picbox_imagebox' style='overflow:hidden; width: 640px; min-height: 50px; background-image:url(\"images/site/loading.gif\"); background-repeat: no-repeat; background-position:50% 50%; vertical-align:middle'></div></td>"+
    "<td rowspan=2 style='width: 30px; padding: 0px 20px 0px 20px'><a href='javascript:void(0)' id='picbox_right' ><img border=0  src='images/site/rightarrow.png' style='vertical-align: middle'/></a></td></tr><tr><td style='padding: 10px 0px 20px 0px; text-align: left;vertical-align: top'>"+
    "<div id='picbox_descriptionbox' style='width: 100%; height:100%'></div></td></tr></table>"+
    "</div></td></tr></table>"+
    "</div></td></tr></table>");    
    
    //$("#picbox_mainbox").fadeTo(0.8);
    $("#picbox_table").hide();
    $("#picbox_closebox").hover(function(){ $(this).addClass('boxed');}, function(){ $(this).removeClass('boxed');});
    $("#picbox_closebox").click(function(){ $("#picbox_table").hide();});
});

function initialize_picbox(descriptionheight)
{      
    var count=0;
    $(".picbox").each(function(){
        $(this).attr("ordinal",count);
        $(this).attr("image",$(this).attr("href"));
        $(this).attr("onClick","$(this).picbox()");
        $(this).attr("href","javascript:void(0)");
        $(this).attr("setheight",descriptionheight);
        count++;
    });
    
   
}

(function( $ ){

  $.fn.picbox = function() {

        $("#picbox_table").hide();
        var currentordinal = eval($(this).attr('ordinal'));
        if( $(".picbox[ordinal='"+(currentordinal-1)+"']").length==0)
        {
            $("#picbox_left").hide();
        }
        else
        {
            $("#picbox_left").show();
            $("#picbox_left").attr("onClick","$(\".picbox[ordinal='"+(currentordinal-1)+"']\").picbox()");
        }
        
        if( $(".picbox[ordinal='"+(currentordinal+1)+"']").length==0)
        {
            $("#picbox_right").hide();
        }
        else
        {
            $("#picbox_right").show();
            $("#picbox_right").attr("onClick","$(\".picbox[ordinal='"+(currentordinal+1)+"']\").picbox()");
        }
        
        
        $('#picbox_descriptionbox').parent().css("height", $(this).attr("setheight"));
        $('#picbox_descriptionbox').html("");
        $('#picbox_imagebox').html("");        
        $("#picbox_table").fadeIn(300,null);
        $('#picbox_imagebox').html("<img style='text-align: center; vertical-align: middle' src='"+$(this).attr('image')+"'/>");
        $('#picbox_descriptionbox').html($(this).attr('description'));        
  };

})( jQuery );
