var gallery;
var galleryXML;
var galleryIndex;
var galleryImage;
var galleryImages;
var galleryImagePrefix = 'admin-resources/image-tools.php?h=300&src=';
var galleryThumbnailPrefix = 'admin-resources/image-tools.php?h=50&src=';

$(document).ready(function () { 
    $.get('admin-resources/repository/assets/photo_gallery/1.xml', {}, function(xml) {
        galleryXML = xml;
    	galleryInit();
    });
});

function galleryInit() {
    gallery = $('#gallery');
    
    // Update the interface
    $('h1', gallery).text($('photo-gallery-title', galleryXML).text());
    $('.detail', gallery).text($('photo-gallery-caption', galleryXML).text());
    
    // Draw the thumbnails
    thumbnailSection = $('.thumbnails ul');
    $('photo', galleryXML).each(function (index, photo) { 
        thumbnailTemplate = $('.example', thumbnailSection).clone();
        thumbnailTemplate.removeClass('example');

        // Load the image
        $('img', thumbnailTemplate)
            .attr('src', galleryThumbnailPrefix + $('file', photo).text())
            .attr('alt', $('title', photo).text());

        // Make the thumbnails clickable
        $('a', thumbnailTemplate)
            .attr('title', $('title', photo).text())
            .click(function () {
                galleryShowImage(index);    
                return false;        
            });
        
        // Add the thumbnail
        thumbnailSection.width(thumbnailSection.width() + 90);
        thumbnailTemplate.show();
        thumbnailSection.append(thumbnailTemplate);
    });
    
    // Slide up/down
    $('.thumbnailSlider', gallery)
        .mouseover(function () { 
            $('.thumbnailSlider', gallery).stop().animate({top: "-80px"}, 150);
        })
        .mouseout(function () { 
            $('.thumbnailSlider', gallery).stop().animate({top: "-20px"}, 150);
        });
    // Slide left/right, Carousel style
    $('.thumbnailSlider .start a').click(function () { 
            galleryThumbsSlide(-1); 
            return false;           
        });
    $('.thumbnailSlider .end a').click(function () { 
            galleryThumbsSlide(1);
            return false;
        });
    
    // Show the first image
    galleryShowImage(0);
}

function galleryThumbsSlide(direction) {
    // Get the variables TODO: Consider lazy init
    slider = $('.thumbnailSlider .thumbnails ul', gallery);
    thumbnailWidth = $('.thumbnailSlider .thumbnails ul li:last', gallery).width();
    currentLeft = parseInt(slider.css('left'));
    width = parseInt($('.thumbnailSlider .thumbnails', gallery).width());
    
    // Get the bounds
    maxLeft = 0;
    minLeft = -1 * parseInt((($('photo', galleryXML).length - 1) * thumbnailWidth) - width);
    
    // Determine the slide action
    if(direction > 0) {
        // show stuff right
        newLeft = currentLeft - width;
        if(newLeft < minLeft) newLeft = minLeft;
    } else {
        // show stuff left
        newLeft = currentLeft + width;
        if(newLeft > maxLeft) newLeft = maxLeft;
    }
    
    // Slide to the spot
    $(slider).stop().animate({left: newLeft + 'px'}, 150);
}

function galleryShowImage(index) {
    // Update the index
    galleryIndex = index;
    photo = $('photo:eq(' + galleryIndex + ')', galleryXML);
    
    // Load the image
    galleryImage = new Image();
    $(galleryImage)
        .attr('src', galleryImagePrefix + $('file', photo).text())
        .attr('alt', $('title', photo).text())
        .load(function () { 
            $('.image', gallery)
                .html('')
                .append($(this))
                .attr('title', $(this).attr('alt'))
                .click(function () { return false; });
        });
    
    // Update the caption
    $('.caption', gallery).text($('caption', photo).text());    
    
    // Thumbnails
    $('.thumbnails li img').removeClass('selected');
    $('.thumbnails li:eq(' + (galleryIndex + 1) + ') img').addClass('selected');
    
    // Update the prev/next links
    $('.navigation a', gallery).unbind();
    $('.navigation a', gallery).click(function () { return false; });
    if(galleryIndex > 0) {
        // Update the previous
        $('.navigation a.previous', gallery)
            .click(function() { 
                galleryShowImage(galleryIndex - 1);
                return false;
            });
    }
    if(galleryIndex < ($('photo', galleryXML).length -1)) {
        // Update the next
        $('.navigation a.next', gallery)
            .click(function() { 
                galleryShowImage(galleryIndex + 1);
                return false;
            });
    }
    
    // Update the location
    $('.location', gallery).text((galleryIndex + 1) + ' of ' + $('photo', galleryXML).length); 
}