//
// Lightbox image loading
// Set the title text and load the image
//
function loadImage( title, url ) {
    var lb = $( "#lightbox" )
    var lbtarget = $("#lbtarget" )
    
    if( lb.is('.loading') ) {
        return;
    }
    lb.addClass('loading');
    
    var img = new Image();
    
    img.title = title;
    $("#lbtitle").empty().append( title );
    
    $( img ).click( function(e) {
        e.preventDefault();
        $("#overlay").add("#lightbox").fadeOut( "normal" );
        $("#lbtarget").children().remove();
    });

    
    img.onload = function() {
        img.style.display = 'none';

        var winWidth = $(window).width() - parseInt(lb.css('padding-left'),10) - parseInt(lb.css('padding-right'), 10);
        var winHeight = ($(window).height() > window.innerHeight ? window.innerHeight : $(window).height())
                         - parseInt(lb.css('padding-top'),10) - parseInt(lb.css('padding-bottom'), 10);
                
        var maxWidth  = winWidth - 100;
        var maxHeight = winHeight - 100;

        if ( img.width > maxWidth || img.height > maxHeight ) { // One of these is larger than the window
            var ratio = img.width / img.height;
            if ( img.height >= maxHeight ) {
                img.height = maxHeight;
                img.width = maxHeight * ratio;
            } else {
                img.width = maxWidth;
                img.height = maxWidth * ratio;
            }
        }
      
        lb.animate( 
            { 'width':  img.width,
              'height': img.height,
              'top':  Math.round( (winHeight - img.height) / 2 ) + 'px',
              'left': Math.round( (winWidth - img.width) / 2 ) + 'px'
            },
           'normal',
            function() { lbtarget.append(img); $(img).fadeIn('normal', function() { lb.removeClass('loading'); } ); }
        );
    }
    img.src = url;
}

function addPaintings( categories, paintings )
{
    //console.log( "adding images" );
        
    for ( var p in paintings ) {
        var pname = paintings[p][0];
        var size  = paintings[p][1];
        var tags  = paintings[p][2];
        
        var content  = '<div class="painting ' + tags + '">';
        content += '<img  class="thumb" alt="' + pname +'" title="' + pname +
                   '" src="../images/Paintings/Thumbs/' + encodeURIComponent( pname ) + '.jpg">';
        content += '<div class="thumbtitle"><span class="name">' + pname + '</span><br/>';
        content += '<span class="size">' + size + '</span>';
        if( tags.search(/sold/) >= 0 ) {
            content += '<br><span class="Sold">Sold</span>';
        }
        content += '</div></div>';
        $("div.content").append( content );
    }
    //
    // Now add the 'tab' buttons to the header
    //
    for ( var c in categories ) {
        var cname = categories[c][0];
        var ctag  = categories[c][1];
        
        $("div.tabs").append( '<div class="tab" id="' + ctag + '">' + cname + '</div>' );
    }
}

$(document).ready( function() {
    //console.log("Ready function");
    //
    // add the images to the content divs
    //
    addPaintings( Categories, Paintings )
    //
    // wrap the paintings with drop shadows
    //
    $("img.thumb").wrap( '<div class="outerpair1"><div class="outerpair2"><div class="shadowbox"><div class="innerbox">' +
                         '</div></div></div></div>' );
    //
    // highlight an image when moused
    //
    $("img.thumb").mouseover( function(e) {
        e.currentTarget.style.border = "red solid 1px";
        e.currentTarget.style.margin = "3px";
        
    } ).mouseout( function(e) {
        e.currentTarget.style.border = "black 0px";
        e.currentTarget.style.margin = "4px";
    } );
    //
    // Set up the lightbox interface
    //
    $("img.thumb").click( function(e) {
        e.preventDefault();
    	// console.log( "img click: target = " + e.target + "currentTarget = " + e.currentTarget );
        var c = e.currentTarget;
        var url = c.src.replace(/Thumbs/, "Gallery");
        var title = c.title;
        // console.log("click: title - " + title + ", URL - " + url );
        $("#overlay").add("#lightbox").fadeIn( "normal", function() { loadImage( title, url ); } )
    });
    lb = $("#lightbox");
    
    lb.show().css(
         { 'top': Math.round( (($(window).height() > window.innerHeight ? window.innerHeight : $(window).height()) - lb.outerHeight() ) / 2 ) + 'px',
           'left': Math.round( ($(window).width() - lb.outerWidth() ) / 2 ) + 'px',
           'margin-top': 0,
           'margin-left': 0
         }
      ).hide();
    //
    // manage 'tab' clicks
    //
    $("div.tab").click( function(e) {  
        e.preventDefault();
        var tag = e.currentTarget.id;
	    //console.log( "click: " + tag );
	    
        $("div.selecttab").removeClass( "selecttab" );
        $("#" + tag).addClass( "selecttab" );
        
        if( tag == "all" ) {
            $("div.painting").fadeIn();
        } else {
            $("div.content").fadeOut( 400, function() { $("div.painting").hide(); } );
            $("div.content").fadeIn( 400, function() { $("div." + tag).fadeIn(); } );
        }
        return false;
    } );
    $("#" + DefaultCat).click();
} );