function mycarousel_itemLoadCallback(carousel, state)
{
	// Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }

    jQuery.post(
        '/carousel/getbooktopx',
        {
            first: carousel.first,
            last: carousel.last,
            collection: 'top15'
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('book', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery('id', this).text(), jQuery('ean', this).text(), jQuery('title', this).text(), jQuery('author', this).text(), jQuery('price', this).text(), jQuery('url', this).text(), jQuery('rating', this).text()));
    });
	// initialize tooltip 
    $("#carouseltop15 img[title]").tooltip({ 
     
        // use single tooltip element for all tips 
        tip: '.carouseltip',  
         
        // tweak the position 
//        offset: [0, 0], 
         
        // use "slide" effect 
        effect: 'slide' 
         
    // add dynamic plugin  
    }).dynamic({ 
        
        right: { 
         
            // slide downwards 
//            direction: 'up',
            
            //offset
            offset: [0, 90]
             
            // bounce back when closed 
            //bounce: true 
        } 
    }); 
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(id, ean, title, author, price, url, rating)
{
	rating_calc = rating * 0.7;
//    return '<a href="'+ url +'" class="carousellink" style="float:left; display:block;"><img src="/images/carousel/' + ean + '_front.jpg" alt="'+ title +'" title="' + title + '" /></a><div class="carouselratingwrapper"><div class="carouselratingbg" style="height:'+ rating_calc +'px;"><div class="carouselratingfg"></div></div></div>';
    return '<a href="'+ url +'" class="carousellink" style="float:left; display:block;"><img src="/images/covers/' + ean + '_front.jpg" style="width:56px; height:87px;" alt="'+ title.replace(/"/gi, "&quot;") +'" title="' + title.replace(/"/gi, "&quot;") + '<br/>Auteur: ' + author + '<br/>Prijs: € ' + price + '" /></a><div class="carouselratingwrapper"><div class="carouselratingbg" style="height:'+ rating_calc +'px;"><div class="carouselratingfg"></div></div></div>';
    
};

/**
 * Standalone html creation helper.
 */
function standalone_getItemHTML(id, ean, title, url, rating)
{
	return '<div class="ie6carousel-item"><a href="' + url + '"><img src="/images/carousel/' + ean + '_front.jpg" width="65" height="87" alt="" /></a><img src="/images/rating_3.gif"/><br/><div style="width:85px;"><a href="' + url + '">' + title + '</a></div></div>';
};

/**
 * Standalone callback function
 */
function standalone_itemCallback(xml)
{
	var content = '';
	jQuery('book', xml).each(function(i) {
    	//alert('test: '+jQuery('id', this).text());
        content += standalone_getItemHTML(jQuery('id', this).text(), jQuery('ean', this).text(), jQuery('title', this).text(), jQuery('url', this).text(), jQuery('rating', this).text())+'\n';	
	});
	$("#carouseltop15").after('<div id="ie6carousel">'+content+'</div>').remove(); 
};


/** Browser detection
 * The following properties are available 
 * - BrowserDetect.browser -> for browser name
 * - BrowserDetect.version -> for browser version
 * - BrowserDetect.OS	   -> for operating system
 */
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]
};
BrowserDetect.init();

/**
 * Check if client browser equals to IE6 or lower
 * then don't show standard carousel
 * instead show IE6 compatible carousel
 */
if(BrowserDetect.browser == 'Explorer' && BrowserDetect.version < '7') {
	//alert('ie browser <= 6');
	var t = setTimeout( function() { 
	jQuery.post(
        '/carousel/getbooktopx',
        {
            first: 0,
            last: 8,
            collection: 'top15'
        },
        function(xml) {
            standalone_itemCallback(xml);
        },
        'xml'
    )}, 40 ); 
} else {
	jQuery(document).ready(function() {
	    jQuery('#carouseltop15').jcarousel({
	    	start:0,
	    	visible:8,
	    	scroll:2,
	    	size:45,
	    	buttonNextHTML: '<button style="background:url(/images/btn-top15-left.png) no-repeat; height:67px; width:29px; text-indent:-9000px; border:0; padding:0;">next</button>',
	        buttonPrevHTML: '<button style="background:url(/images/btn-top15-right.png) no-repeat; height:67px; width:29px; text-indent:-9000px; border:0; padding:0;">prev</button>', 
	        
	        // 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
	    });
	});	
};