$(document).ready(function() {

    loadXmlDoc('/cms/photo.xml');

});

function loadXmlDoc(xmlFile) {
    var xmlDoc;
    
    $.ajax({
        type: "GET",
        url: xmlFile,
        dataType: "xml",
        success: function(xml) {
            getGalleries(xml);
        }
    });
 
    return xmlDoc;
}

function setLeftReg(img) {
    img.src='/resources/images/photos_arrow_left_reg.jpg';
}
function setLeftHover(img) {
    img.src='/resources/images/photos_arrow_left_hov.jpg';
}
function setRightReg(img) {
    img.src='/resources/images/photos_arrow_right_reg.jpg';
}
function setRightHover(img) {
    img.src='/resources/images/photos_arrow_right_hov.jpg';
}

function getGalleries(xmlDoc) {
    var galleriesContainer = $('#content_photo');
    galleriesContainer.append('<a class="prevPage"><span  title="Previous Page"><img src="/resources/images/photos_arrow_left_reg.jpg" onmouseover="setLeftHover(this);" onmouseout="setLeftReg(this);" /></span></a>');
//    galleriesContainer.append('<a class="prev"><span title="Previous Column">&lt;</span></a>');
    galleriesContainer.append('<div class="scrollable"></div>');
//    galleriesContainer.append('<a class="next"><span title="Next Column">&gt;</span></a>');
    galleriesContainer.append('<a class="nextPage"><span title="Next Page"><img src="/resources/images/photos_arrow_right_reg.jpg" onmouseover="setRightHover(this);" onmouseout="setRightReg(this);" /></span></a>');
    galleriesContainer.append('<div class="clear_left"></div>');

    var scrollable = $('.scrollable');
    scrollable.append('<div class="items"></div>');
    
    var i = 0;
    var perItem = 24;
    $('gallery', xmlDoc).each(function() {
    	if (i % perItem == 0) {
    	    $('.items').append('<div class="item"></div>');
    	}
    	
        var toAppend = '';
	toAppend += '<a target="_blank" href="' + $('picasa', $(this)).attr('href') + '">';
        toAppend += '<div title="' + $(this).attr('title') + '">';
	toAppend += '<img src="' + $('thumbnail', $(this)).attr('src') + '" width="64" height="64" />';
	toAppend += '</div>';
	toAppend += '</a>';
	
	$('.item:last').append(toAppend);
	
	i++;
    });
    
   
    // scrollable
    scrollable.scrollable({
        clickable: false,
        loop: true,
        size: 1
    });
	
}