jQuery.fn.carousel = function(options) {

    settings = jQuery.extend({
        xml_file: "carousel/data.xml",
        delay: 1000
    }, options);

    // properties
    var totalItems;
    var currentItem = 0;
    var previousItem = 0;
    var isPlaying = true;
    var _xml;
    var carousel = $(this);
    var board;
    var t;

    // start it by loading xml data
    getXML();

    // get the data
    function getXML() {

        $.ajax({
            type: "GET",
            url: settings.xml_file + '?rnd=' + Math.floor(Math.random() * 11),
            dataType: "xml",
            success: function(xml) {
                initCarousel(xml);
            }
        });
    }

    // init the plugin after data is loaded
    function initCarousel(xml) {

        // load the css
        setCarouselCSS();

        // set xml data to global variable
        _xml = xml;

        // set total items
        totalItems = $(xml).find('item').size();

        // add div#board that will contain ratating linked imaged
        carousel.append('<div id="carouselBoard"></div>');
        board = carousel.find('#carouselBoard');

        // create navigation buttons
        setNavButtons();

        // start the animation
        play();


    }

    // set the navigation buttons
    function setNavButtons() {

        // add nav container
        carousel.append('<div id="carouselNav"></div>');
        var carouselNav = carousel.find("#carouselNav");

        carouselNav.click(function() {
            return false;
        });


        // add nav item buttons
        for (i = 0; i < totalItems; i++) {
            carouselNav.append('<div class="nav_item" id="nav_' + i + '">' + (i + 1) + '</div>');
            carouselNav.find('#nav_' + i).hover(function() {
                $(this).toggleClass('nav_item_hover');
            });
        }

        // add item nav click event
        carouselNav.find('.nav_item').click(function() {
            clearTimeout(t);
            board.clearQueue();
            board.stop();
            carousel.find('.nav_item').removeClass('nav_item_current');
            currentItem = this.id.substr(4, 2);
            carousel.find('#nav_' + currentItem).addClass('nav_item_current');
            isPlaying = true;
            play();
            return false;
        });

        // add pause button
        carouselNav.append('<div class="nav_item" id="nav_pause"><span>=</span></div>');

        // set click event to pause button
        carouselNav.find('#nav_pause').click(function() {
            if (isPlaying) {
                isPlaying = false;
                clearTimeout(t);
                $(this).addClass('nav_pause_active');
            } else {
                isPlaying = true;
                play();
                $(this).removeClass('nav_pause_active');
            }
        });
        // add hover to pause
        carouselNav.find('#nav_pause').hover(function() {
            $(this).toggleClass('nav_pause_hover');
        });

        // add credit placeholder
        carouselNav.append('<div class="" id="cCredit"></div>');

    }

    // control play
    function play() {
        if (isPlaying) {
            nextFrame(currentItem);
            if (currentItem == totalItems - 1) {
                currentItem = 0;
            } else {
                currentItem++;
            }
            t = setTimeout(play, settings.delay);
        } else {
            clearTimeout(t);
        }
    }

    // load next frame
    function nextFrame(itemIndex) {
        board.fadeOut("fast", function() {
            loadItem(itemIndex);
        });
    }

    // load the item
    function loadItem(itemIndex) {

        // set nav button bg
        carousel.find('#nav_' + itemIndex).addClass('nav_item_current');

        // remove previous navbutton bg
        previousItem = (itemIndex == 0) ? totalItems - 1 : itemIndex - 1;
        carousel.find('#nav_' + previousItem).removeClass('nav_item_current');

        // get item data and display it
        var imageURL = 'carousel/' + $(_xml).find('item:eq(' + itemIndex + ')').find('image').text() + '?rnd=' + Math.floor(Math.random() * 11);
        var pageURL = $(_xml).find('item:eq(' + itemIndex + ')').find('url').text();
        var credit = $(_xml).find('item:eq(' + itemIndex + ')').find('credit').text();
        output = '<a href="' + pageURL + '"><img src="' + imageURL + '" border="0" /></a>';
        //output = '<img src="' + imageURL + '" border="0" id="item_' + itemIndex + '" />';
        board.html(output);

        board.find('#item_' + itemIndex).click(function() {
            alert("asd");
        });

        // set credit
        if (credit != '&nbsp;' && credit != '') {
            $('#cCredit').html(credit);
        }


        board.fadeIn("fast", function() {
            board.show();
            board.css('opacity', '1');
        });


    }

    // load carousel css
    function setCarouselCSS() {
        $("head").append('<link id="carouselCSS" href="js/carousel/carousel.css" type="text/css" rel="stylesheet" />');
    }


};