barcode.loadData = function()
{
    $('#loadingMessage').fadeIn(1000);
    // LOADING THE JSON DATA /////////////
    $.getJSON('photos.inc.txt', function(data)
    {
        $('#counter').html('<span id="imgCounter">0</span><span id="amountOfImages">' + data.amount + '</span>');

        $.each(data.sets, function(i, imageSet)
        {
            var $li = $('<li></li>');
            var smallWidth = imageSet.images.length;
            var startImageSrc = imageSet.images[0].src;
            $li.attr({ "title": imageSet.title, "id": 'set' + i, "tags": imageSet.tags, "description": imageSet.description, "width": smallWidth });
            $.each(imageSet.images, function(j, image)
            {
                var $img = $('<img style="display:none"/>');
                //$img.attr({ "src": image.src, "width": image.width }).appendTo($li);
                startImageSrc = (j > 0) ? '_img/placeholder.gif' : startImageSrc;
                $img.attr({ "src": startImageSrc, "width": image.width, "realsrc": image.src }).appendTo($li);
            });

            $li.appendTo("#barcode");
        });

        $('#barcode').WhenImagesLoad({
            callback: function()
            {
                $('#loadingMessage').fadeOut(500);
                $('#tagnav').show();
                legend.ini();
                barcode.ini();
                barcode.draw();
                $('#loadingImagesUI').animate({ left: -windowWidth }, 3000, function() { $(this).remove(); });
            },
            imgCallback: function()
            {
                var currentAmountLoaded = $.fn.WhenImagesLoad.loadedImgCnt;
                var percent = Math.floor((data.amount / 100) * currentAmountLoaded);
                $('#imgCounter').html(currentAmountLoaded);
                if (percent > 1)
                {
                    $('#loadingMessage').text('Please wait, loading images.');
                }
            }
        });
    });
    // END FUNCTION AFTER LOADING JSON
}

/////////////////////////////////////////////////////////////////////////////////////////
// runtime ! ////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
window.onload = function()
{
    document.onselectstart = function() { return false; } // ie
    document.onmousedown = function() { return false; } // mozilla
}
$(document).ready(function()
{
    $('body').addClass('js');
    $('#page').hide();
    $(".email").defuscate();
    $('body,html').css({
        overflow: 'hidden'
    });



    $('#legendContainer h2').css({ color: barcode.backgroundColor });
    windowWidth = $(window).width();
    windowHeight = $(window).height();

    var centerTop = (windowHeight - $('#page').height()) / 2;
    $('#page').css({ top: centerTop }).show();

    // HELP PANEL
    var theAbstract = $('#abstract');
    theAbstract.css('left', 0 - windowWidth - 20);
    $('#helpButton').toggle(function()
    {
        theAbstract.show().animate({ left: 0 }, 2000);
        $('#closeHelp').click(function()
        {
            theAbstract.animate({ left: 0 - windowWidth - 20 }, 2000);
        });
    },
    function()
    {
        theAbstract.animate({ left: 0 - windowWidth - 20 }, 2000);
    });

    var usableWidth = windowWidth - 25;
    //$('#page').css({backgroundColor: 'grey',height:550});
    $('h1.summary,#tagnav,#contactInfo,#caption,#legendContainer').css({ width: 790, left: (windowWidth / 2 - 395) });
    // TAG NAVIGATION ///////////////////////////////////////////////
    $('#tagnav li span').attr({
        title: 'Click to filter the barcode according to this keyword'
    }).each(function()
    {
        var tag = $(this).attr('filter');
        var $this = $(this);
        if (jQuery.inArray(tag, barcode.activeTags) === -1)
        {
            $this.addClass('disabled');
        }
        //tag selection, exclusive mode
        $this.bind('click', function()
        {
            barcode.canOpen = false;
            $('#tagnav li span').not(this).addClass('disabled');
            $this.removeClass('disabled');
            barcode.activeTags[0] = tag;
            $.log('active tags = ' + barcode.activeTags.join(',').toString());
            barcode.ini();
            barcode.draw();
            // legend.ini();
        });

        //tag selection,  combinatory mode
        /* $this.bind('click', function()
        {
        barcode.canOpen = false;
        if ($this.is('.disabled'))
        {
        $this.removeClass('disabled');
        barcode.activeTags.push(tag);
        }
        else
        {
        $this.addClass('disabled');
        var tagPosInIndex = jQuery.inArray(tag, barcode.activeTags);
        barcode.activeTags.splice(tagPosInIndex, 1);
        }
        // //$.log('active tags = ' + barcode.activeTags.join(',').toString());
        barcode.ini();
        barcode.draw();
        });
        
        */

    });
    $('#tagnav').hide();

    // LOAD THE PICTURES ////
    $('#barcodeContainer').width(windowWidth).append('<div id="loadingImagesUI"><span id="counter"></span><p id="loadingMessage">Please wait, loading images...</p></div><div id="scrollLeft"></div><ul id="barcode" style="left:0;width:' + windowWidth + 'px"></ul><div id="scrollRight"></div>');
    barcode.el = $('#barcode');
    $('#loadingMessage').hide();
    // right / left arrows
    $('#scrollLeft').bind('click', function()
    {
        barcode.move('left');
    });
    $('#scrollRight').bind('click', function()
    {
        barcode.move('right');
    });
    $('#loadingImagesUI').width(0).animate({ width: windowWidth }, 3000, barcode.loadData);

    // redraw the UI if the window is resized...
    $(window).resize(function()
    {
        windowWidth = $(window).width();
        windowHeight = $(window).height();
        var usableWidth = windowWidth - 25;
        $('h1.summary,#tagnav,#contactInfo,#caption,#legendContainer').css({ width: 790, left: (windowWidth / 2 - 395) });
        $('#barcodeContainer').width(windowWidth);
        barcode.ini();
        barcode.draw();
    });

});