//this line sets a variable to see if we are using ie6 or not
var IE6 = (navigator.userAgent.indexOf("MSIE 6") >= 0) ? true : false;
$(document).ready(function() {
    var currentPosition = 0;
    var slideWidth = 694;
    var slides = $('.slide');
    var duration = 5000;
    var numberOfSlides = slides.length;
    var imageFileExt = "png";
    if (IE6)
        imageFileExt = "gif";
    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner div
    slides
  .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
  .css({
      'float': 'left',
      'width': slideWidth
  });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert left and right arrow controls in the DOM
    $('#slideshow .lozenge')
    .prepend('<img class="control" id="leftControl" src="/images/banner-nav-arrow-left.' + imageFileExt + '" height="9px" width="9px" alt="" /><div class="text"><span id="CurrentPositionIndicator">1</span> of ' + numberOfSlides + '</div>')
    //.prepend('<span><img class="control" id="leftControl" src="/images/banner-nav-arrow-left.png" alt="" /></span>&nbsp;<span><span id="CurrentPositionIndicator">1</span> of ' + numberOfSlides + '</span>&nbsp;')
    .append('<img class="control" id="rightControl" src="/images/banner-nav-arrow-right.' + imageFileExt + '" height="9px" width="9px" alt="" />');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control')
    .bind('click', function() {
        // Determine new position
        currentPosition = ($(this).attr('id') == 'rightControl')
    ? currentPosition + 1 : currentPosition - 1;

        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
        //$('.BannerContainer .Offer').hide();
    });

    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position) {
        // Hide left arrow if position is first slide
        if (position == 0) { $('#leftControl').hide() }
        else { $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if (position == numberOfSlides - 1) { $('#rightControl').hide() }
        else { $('#rightControl').show() }
	 document.getElementById('CurrentPositionIndicator').innerHTML = position + 1;

    }
    //animator function
    var stopper = false;
    var animator = function(time, slideCount, currentPos) {
        if (stopper != true) {
            var nextslide = currentPos + 1;
            if (nextslide >= slideCount) {
                nextslide = 0;
            }
            currentPosition = nextslide;
            // Move slideInner using margin-left
            if (nextslide == 0) {
                $('#slideInner').css({
                    'marginLeft': slideWidth * (-nextslide)
                });
            }
            else {
                $('#slideInner').animate({
                    'marginLeft': slideWidth * (-nextslide)
                });
                //$('.BannerContainer .Offer').hide();
            }
            // Hide / show controls
            manageControls(nextslide);
            //restart animation
            setTimeout(function() { animator(time, slideCount, nextslide); }, time);
        }
    }
    //start anim
    setTimeout(function() { animator(duration, numberOfSlides, currentPosition); }, duration);
    
    //Stop the animation
    $(".BannerContainer").hover(function() {
        stopper = true;
    });
});