var banner = {
    'images': new Array,
    'index': 0,
    'noOfSlides': 0,
    'interval': 5000,
    'positionTop': 0,
    'imageHeight': 390,
    'divHeight': 0,
    'goingUp': false
};





//get the data from xml file and store as properties of the banner object
banner.load = function() {

    $jq.ajax({
        type: "GET",
        url: "/ajax/BannerXml.ashx",
        dataType: "xml",
        error: function() {
            return;
        },

        //this function is only called once the data has been successfully retrieved
        success: function(xml) {

            banner.arrayOfSlides = $jq(xml).find('slide');
            banner.noOfSlides = $jq(banner.arrayOfSlides).length;
            banner.divHeight = banner.noOfSlides * banner.imageHeight;


            $jq.each(banner.arrayOfSlides, function(index, value) {
                banner.images[index] = {
                    src: $jq(this).find('image').text(),
                    title: $jq(this).find('title').text(),
                    subheading: $jq(this).find('caption').text(),
                    link: $jq(this).find('href').text()
                }


                $jq('#banner .images').append('<img src="' + banner.images[index].src + '" width="916" height="390" alt="Previous" />');


            });

            banner.init();
        }
    });
}

banner.init = function() {
    banner.setupControls();
    banner.bindEvents();
    banner.startTimer();

}

banner.startTimer = function() {
    banner.timer = window.setInterval('banner.changeSlide();', banner.interval);
}

banner.resetTimer = function() {

    if (banner.timer != null) window.clearInterval(banner.timer);
    banner.timer = null;

    banner.startTimer();
}

banner.setupControls = function() {

    //move all of the html for the controls into here so they don't show when javascript disabled...
$jq('#banner').append('<div class="controls"><div class="info"><span class="title">' + banner.images[banner.index].title + '</span><span class="sub-title">' + banner.images[banner.index].subheading + ' / ' + '</span><a href="' + banner.images[banner.index].link + '" class="link">show more</a> </div> <div class="counter"><span class="number"> 0' + (banner.index + 1) + '</span><span class="pipe">| </span><span class="tot"> 0' + banner.noOfSlides + '</span> <img src="images/up_inactive.png" width="14" height="7" alt="up" class="button up" /> <img src="images/down.png" width="14" height="7" alt="down" class="button down" /> </div> </div>');
    $jq('#banner').append('<div class="overlay"></div>');
    Cufon.replace('#banner .title', { fontFamily: 'Museo 900', hover: true });
    Cufon.replace('#banner .sub-title', { fontFamily: 'Museo 500', hover: true });
    Cufon.replace('#banner a.link', { fontFamily: 'Museo 500', hover: true });
    Cufon.replace('#banner .number, #banner .tot', { fontFamily: 'Museo 500' });
    $jq('.overlay').fadeOut(2000);
    $jq('.controls').animate({ bottom: 0 }, 1000);
    $jq('.up').attr('src', 'images/site-furniture/up-inactive.png').css({ 'cursor': 'pointer' });
    $jq('.down').attr('src', 'images/site-furniture/down.png').css({ 'cursor': 'pointer' });

}

banner.bindEvents = function() {

    // assign event handlers
    $jq('.controls .button').bind('click', function(event) { banner.changeSlide(this); });
}

banner.changeSlide = function(clicked) {

    // First change the index
    if ($jq(clicked).hasClass('down')) {

        banner.resetTimer();

        if (banner.index == banner.noOfSlides - 1) {
            banner.index = 0;
        }
        else {
            banner.index = banner.index + 1;
        }

        banner.slideDown();
    }

    else if ($jq(clicked).hasClass('up')) {

        banner.resetTimer();

        if (banner.index == 0) {

            banner.index = banner.noOfSlides - 1;
        }
        else {
            banner.index = banner.index - 1;
        }

        banner.slideUp();
    }

    else {
        if ((banner.index == banner.noOfSlides - 1) || (banner.goingUp == true)) {
            banner.index = banner.index - 1;
            banner.slideUp();
            banner.goingUp = true;

            if (banner.index == 0) {
                banner.goingUp = false;
            }

        }
        else {
            banner.index++;
            banner.slideDown();
        }
    }

}




banner.slideDown = function() {
    if (banner.positionTop > -(banner.divHeight - banner.imageHeight)) {

        banner.positionTop = banner.positionTop - banner.imageHeight;
        $jq("#banner .images")
			.animate(
			{
			    top: banner.positionTop}, 800, 'swing', function() {
			    // Animation complete.
			});


        banner.arrowVisibility();
        banner.changeText();
    }
}


banner.slideUp = function() {
    //move images div down
    if (banner.positionTop < 0) {
        banner.positionTop = banner.positionTop + banner.imageHeight;
        $jq("#banner .images")
			.animate(
			{
			    top: banner.positionTop
			}, 800, 'swing', function() {
			    // Animation complete.
			});

        banner.arrowVisibility();
        banner.changeText();
    }

}





banner.changeText = function() {
    var new_image = banner.images[banner.index];
    $jq('#banner .number').html(banner.index + 1).prepend('0');
    $jq('#banner .title').html(new_image.title);
    $jq('#banner .sub-title').html(new_image.subheading + ' / ');
    $jq('#banner .link').attr('href', new_image.link);
    Cufon.replace('#banner .title', { fontFamily: 'Museo 900' });
    Cufon.replace('#banner .sub-title', { fontFamily: 'Museo 500', hover: true });
    Cufon.replace('#banner a.link', { fontFamily: 'Museo 500', hover: true });
    Cufon.replace('#banner .number, #banner .tot', { fontFamily: 'Museo 500' });
}


//show/hide arrows
banner.arrowVisibility = function() {
    if (banner.positionTop == 0)
        $jq('.up').attr('src', 'images/site-furniture/up-inactive.png').css({ 'cursor': 'auto' });
    else
        $jq('.up').attr('src', 'images/site-furniture/up.png').css({ 'cursor': 'pointer' });


    if (banner.positionTop == -(banner.divHeight - banner.imageHeight))
        $jq('.down').attr('src', 'images/site-furniture/down-inactive.png').css({ 'cursor': 'auto' });
    else
        $jq('.down').attr('src', 'images/site-furniture/down.png').css({ 'cursor': 'pointer' });
}





$jq(document).ready(function() {
    banner.load();
});