function cycleImage(action){
    var boxes = $('.items').find('.grid-box');
    var api = $(".scrollable").data("scrollable");

	var currentItem =  parseInt($('#next_image').html())-1;

    var totalImages = api.getSize();

    if (action == 'forward' && currentItem < totalImages) {
    	$("#image-prev").show();
    	var next = currentItem + 1;
		var prev = currentItem - 1;
		if (prev < 0) prev = 0;
	    if (currentItem <= (totalImages - 15)) api.seekTo(parseInt(next)); 

	    $(boxes[currentItem+1]).click(); 
	    next++;
    }
    else {
     	var next = currentItem;
		var prev = currentItem - 1;
		if (prev < 0) prev = 0;
	    if (currentItem <= (totalImages - 15)) api.seekTo(parseInt(prev)); 
	    $(boxes[currentItem-1]).click();
	  
    }
    $('#next_image').html(next);
    $('#prev_image').html(currentItem);
    
    if (next == totalImages) $("#image-next").fadeOut(300); else $("#image-next").show();
    if (next == 1) $("#image-prev").fadeOut(300); else $("#image-prev").show();
}

function createCacheArea() {
    // Create an invisible div and let large images load in the background.
    var image_cache_div = document.createElement("div");
    $(image_cache_div).css("display", "none");
    $(image_cache_div).attr("id", "image-cache-div");
    $("body").append($(image_cache_div));
}