function mycarousel_itemLoadCallback(carousel, state)
{
    
	// Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        jQuery('#pager a').addClass("bulletpage");
		jQuery('#pager a').removeClass("selected");
		jQuery('#page'+(carousel.last/2)).addClass("bulletpage");  
		jQuery('#page'+(carousel.last/2)).addClass("selected");
		
		return;
    }
	
    jQuery.get(
        'ajax-items?shortName='+shortName+'&bare=1',
        {
            first: carousel.first,
            last: carousel.last
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
	var total = parseInt(jQuery('total', xml).text());
    carousel.size(total);
	var elem = jQuery('#pager').get(0);
	elem.style.width = ((total/2)*14)+"px";
	str = "";
	
	for (i=carousel.first;i<total;i=i+2)
	{
		page = Math.ceil(i/2);
		class1 = '';
		if (i==1)
		{
			class1= ' selected';
		}
		str = str + '<a href="#" class="bulletpage'+class1+'" id="page'+page+'"></a> ';
	}
	elem.innerHTML = str;
	
	jQuery('#pager a').bind('click', function() {
        var to_var = jQuery.jcarousel.intval(jQuery(this).attr("id").replace("page", "")*2)-1;
		jQuery('#pager a').removeClass("selected");
		//alert(to_var);
        carousel.scroll(to_var);
		jQuery(this).addClass("selected");
        return false;
    });

    jQuery('item', xml).each(function(i) {
		carousel.add(first + i, mycarousel_getItemHTML(jQuery(this)));
    });
	
};

function URLDecode (encodedString) {
  var output = encodedString;
  var binVal, thisString;
  var myregexp = /(%[^%]{2})/;
  while ((match = myregexp.exec(output)) != null
             && match.length > 1
             && match[1] != '') {
    binVal = parseInt(match[1].substr(1),16);
    thisString = String.fromCharCode(binVal);
    output = output.replace(match[1], thisString);
  }
  return output;
}

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
	photoName = jQuery('photoName', url).text();
	photoNameDec = URLDecode(photoName);
	
	
	return '<div class="card-one"> <a title="' + photoName + '" class="card" href="gallery/' + jQuery('shortName', url).text() + '/' + jQuery('categoryShortName', url).text() + '/' + jQuery('photoShortName', url).text() + '.html"><img width="177"  alt="' + photoName + '" src="images/pfgalleryImages/' + jQuery('photoId', url).text() + '-f1.jpg" /></a><div class="card-type"><span><span><span>' + photoNameDec + '</span></span></span></div><div class="card-buttons"> <a class="order-now" title="Order Now" href="gallery/' + jQuery('shortName', url).text() + '/' + jQuery('categoryShortName', url).text() + '/' + jQuery('photoShortName', url).text() + '.html"><img alt="Order Now" src="images/btn-order-now.gif" /></a> <a title="See More" href="gallery/' + jQuery('shortName', url).text() + '/' + jQuery('categoryShortName', url).text() + '/"><img alt="See More" src="images/btn-see-more.gif" /></a> </div><div class="card-shadow"><img alt="card buttons shadow" src="images/img-card-shadow.gif" /></div></div>';
	
};

jQuery(document).ready(function() {
    
	jQuery('#mycarousel').jcarousel({
        // Uncomment the following option if you want items
        // which are outside the visible range to be removed
        // from the DOM.
        // Useful for carousels with MANY items.

        // itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
        itemLoadCallback: mycarousel_itemLoadCallback,
		buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
    jQuery('#mycarousel2').jcarousel({itemLoadCallback: mycarousel_itemLoadCallback2,
		buttonNextHTML: null,
        buttonPrevHTML: null
	});
	

	
});



	

function mycarousel_itemLoadCallback2(carousel, state)
{
	total = jQuery('#mycarousel2 ul li').size();
	carousel.size(total);
	
	
	
	var elem = jQuery('#pager').get(0);
	if (elem.innerHTML == "")
	{
		elem.style.width = ((total/2)*14)+"px";
		str = "";
		
		for (i=carousel.first;i<total;i=i+2)
		{
			page = Math.ceil(i/2);
			class1 = '';
			if (i==1)
			{
				class1= ' selected';
			}
			str = str + '<a href="#" class="bulletpage'+class1+'" id="page'+page+'"></a> ';
		}
		elem.innerHTML = str;
	}
	
	jQuery('#pager a').bind('click', function() {
											  
		var to_var = jQuery.jcarousel.intval(jQuery(this).attr("id").replace("page", "")*2)-1;
		jQuery('#pager a').removeClass("selected");
		
        carousel.scroll(to_var);
		jQuery(this).addClass("selected");
        return false;
    });
	
	
	// Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        jQuery('#pager a').addClass("bulletpage");
		jQuery('#pager a').removeClass("selected");
		jQuery('#page'+(carousel.last/2)).addClass("bulletpage");  
		jQuery('#page'+(carousel.last/2)).addClass("selected");
		
		return;
    }
	
}