ABOUT = {
	static_path : '',
	total_items : 0,
	selected : false,
	carousel : [],
	section : ''
}


var mycarousel_itemLoadCallback = function(carousel, state) {
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }
    	
    items = ABOUT.carousel.slice(carousel.first-1, carousel.last);
    mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, items);
    
};

var mycarousel_itemAddCallback = function(carousel, first, last, items) {
    // Set the size of the carousel
    total = ABOUT.total_items;
    carousel.size(total);
    
	//alert(items);
	
    $.each(items, function(i) {
    	carousel.add(first + i, mycarousel_getItemHTML(i, this, carousel));
    });
    
    if (total < 8) {
    	for (i = total; i <= 8; i++) {
    		carousel.add(first + i,'<div class="thumbnail"></div>');
    	}
    }
    
    $('ul#screenshots li div.thumbnail a').click(show_big_image);
};

var mycarousel_getItemHTML = function (i, element, carousel) {
	//alert(element);

	big_url = ABOUT.static_path + 'TheKingdom/img/v2/' + ABOUT.section + '/big/' + element;
	small_url = ABOUT.static_path + 'TheKingdom/img/v2/' + ABOUT.section + '/small/' + element;
	
	html = '<div class="thumbnail" link="' + big_url  + '">' +
           '<a href="#"><img src="' + small_url + '" width="72" height="72" alt="" /></a>' +
           '</div>';
	if (i == carousel.options.start - 1 && !ABOUT.selected){
		ABOUT.selected = true;
		html += '<div class="selector select">&#160;</div>';
	} else {
		html += '<div class="selector">&#160;</div>';
	}
    return html;
};

var show_big_image = function(){
	var element = $(this).parent();
    var imageLarge = $('.view img');                    
    var newHref = element.attr('link');
    
    if (imageLarge.attr('src') != newHref) {    	
    	
    	$('ul#screenshots li').removeClass('select');
        $('.selector').removeClass('select');
        
        element.parents('li').addClass('select');
        element.parents('li').find('div.selector').addClass('select');
        
        ABOUT.selected = true;
        
        imageLarge.attr({
        	'src': newHref
        });        
    }
    
    return false;
}