// JavaScript Document

var mycarousel_itemList = [
    {img: "visual/pic/spots/001.jpg"},
    {img: "visual/pic/spots/002.jpg"},
	{img: "visual/pic/spots/003.jpg"},
	{img: "visual/pic/spots/004.jpg"},
	{img: "visual/pic/spots/005.jpg"},
	{img: "visual/pic/spots/006.jpg"},
	{img: "visual/pic/spots/007.jpg"},
	{img: "visual/pic/spots/008.jpg"},
	{img: "visual/pic/spots/009.jpg"},
	{img: "visual/pic/spots/010.jpg"}
];

function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }

        if (i > mycarousel_itemList.length) {
            break;
        }

        carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
    }
	
	// Disable autoscrolling if the user clicks the prev or next button.
	carousel.buttonNext.bind('click', function() {
		carousel.startAuto(3);
	});

	carousel.buttonPrev.bind('click', function() {
		carousel.startAuto(3);
	});

	// Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.hover(function() {
		carousel.stopAuto();
	}, function() {
		carousel.startAuto();
	});
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    //return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />';
	return '<li><img src="' + item.img + '" alt="" /></li>';
};

jQuery(document).ready(function() {
    jQuery('#spot').jcarousel({
		auto: 5,			//	2 saniye de bir otomatik hareket
		scroll: 1,			//	1 kayma herketi
		start: 1,			//	1. ile baslama
		wrap: 'last',		//	Sonuncudan sonra basa don
		animation: 3000,	//	animasyon suresi
		size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});

var spot = '<ul id="spot" class="jcarousel-skin-spot"></ul>';