var slideDelayTicks = 10;
var slideDurationPerPixal = 5; // speed based of image width

$(document).ready(function () {
    setInterval(function () { ImageSliderTick(); }, 500);
});

function ImageSliderTick() {
    $('.Image-Slider-Wrapper').each(function () {
        if ($(this).children('.Image-Slider-Slide').length > 1) {

            var DelayTicksLeft = $(this).attr('DelayTicksLeft');
            var Paused = $(this).attr('Paused');
            var nextSlide = null;

            if (Paused == 'true') {
                DelayTicksLeft = slideDelayTicks;
            } else {
                DelayTicksLeft = DelayTicksLeft - 1;
            }

            var NextSlideId = $(this).attr('NextSlideId');
            if (NextSlideId != undefined) {
                DelayTicksLeft = 0;
                $(this).removeAttr('NextSlideId');
                nextSlide = $('#ImageSliderItemSlide' + NextSlideId);
            }

            if (DelayTicksLeft == 0) {
                var CurrentSlideId = $(this).attr('CurrentSlideId');
                var CurrentSlide = $('#ImageSliderItemSlide' + CurrentSlideId);
                NextSlide(this, CurrentSlide, nextSlide);
                DelayTicksLeft = slideDelayTicks;
            }

            $(this).attr('DelayTicksLeft', DelayTicksLeft);
        }
    });
}

// Would be nice to be able to use $.live to set this. but is currently not supporting load as event
function LoadImageSlider(imageSliderID_, HideInactiveTabs_) {
    var imageSlider = $('#' + imageSliderID_);
    var GalleryWidth = $(imageSlider).width();
    var GalleryHeight = $(imageSlider).height();

    // Move all slides to right of the window
    $(imageSlider).children('.Image-Slider-Slide').css('left', (GalleryWidth) + 'px');
    $(imageSlider).children('.Image-Slider-Slide').hide();
    var currentSlide = $(imageSlider).children('.Image-Slider-Slide').first();
    
    // Move the first into position
    currentSlide.css('left', '0px');
    currentSlide.css("display", "block");

    // Set the resting points on the tabs

    var TabSpacing = 5;

    // set up the tabs' positon
    $(imageSlider).children('.Image-Slider-Slide').each(function (index_, slideItem_) {
        var TabWidth = 0;
        var LastTabRight = 0;
        var TabCount = $(slideItem_).children('.Image-Slider-Tab').length;
        if (TabCount > 0) {
            TabWidth = (GalleryWidth / TabCount) - TabSpacing;
        }

        if (TabWidth > 275) {
            TabWidth = 275;
        }

        $(slideItem_).children('.Image-Slider-Tab').each(function (index_, tabItem_) {
            var RestingPoint = 0;
            var TitleText = $(tabItem_).find('.Image-Slider-Tab-Title');
            var HeaderHeight = $(TitleText).outerHeight(true);
            var TabHeight = $(tabItem_).outerHeight();

            if (HideInactiveTabs_ == true) {
                RestingPoint = 0;
            } else {
                RestingPoint = HeaderHeight;
            }

            $(tabItem_).attr('RestingPoint', RestingPoint);
            $(tabItem_).attr('HeaderHeight', HeaderHeight);
            $(tabItem_).css('top', (GalleryHeight - RestingPoint) + 'px')
                    .css('left', LastTabRight + 'px')
                    .css('width', TabWidth + 'px');

            LastTabRight += TabWidth + TabSpacing;
        });
    });

    // set up the tabs' mouse over events
    $(imageSlider).children('.Image-Slider-Slide').children('.Image-Slider-Tab')
    .mouseenter(function () {
        var TabTop = $(this).css('top').replace('px', '');
        var TabTarget = GalleryHeight - $(this).height() + 1;

        if (TabTop > TabTarget) {
            $(this).stop(true).animate({ top: '-=' + (TabTop - TabTarget) }, 400);
        } else {
            $(this).css('top', TabTarget);
        }
    }).mouseleave(function () {
        var TabTop = $(this).css('top').replace('px', '');
        var RestingPoint = $(this).attr('RestingPoint');
        var TabTarget = GalleryHeight - RestingPoint;

        if (TabTop < TabTarget) {
            $(this).stop(true).animate({ top: '-=' + (TabTop - TabTarget) }, 400);
        } else {
            $(this).css('top', TabTarget);
        }
    });

    // Set pause values methods when mouse is over slide
    $(imageSlider).children('.Image-Slider-Slide')
    .mousemove(function () {
        $(this).parent().attr('Paused', true);
        // Move all tabs that have a resting point of zero to
        $(this).children('.Image-Slider-Tab').each(function () {
            var TabTop = $(this).css('top').replace('px', '');
            var RestingPoint = $(this).attr('RestingPoint');
            var HeaderHeight = $(this).attr('HeaderHeight');
            var moveDist = RestingPoint - HeaderHeight;
            if (TabTop == GalleryHeight) {
                $(this).stop(true).animate({ top: '+=' + (moveDist) }, 200);
            }
        });
    }).mouseleave(function () {
        $(this).parent().attr('Paused', false);
    });

    // Set up the click events for the quick slides
//    $(imageSlider).find('.Quick-Slide').click(function () {
//        var curId = $(imageSlider).attr('CurrentSlideId');
//        var selId = $(this).attr('SlideId');
//        if (curId != selId) {
//            $(imageSlider).attr('NextSlideId', selId);
//        }
//    });

    // Set up the values fpor the current/first slide
    var CurrentSlideId = $(currentSlide).attr('SlideId');
    $(imageSlider).attr('CurrentSlideId', CurrentSlideId);
  //  $('#QuickSlide' + CurrentSlideId).addClass('Quick-ActiveSlide');

    // Set the start delay value
    $(imageSlider).attr('DelayTicksLeft', slideDelayTicks);
}

function NextSlide(ImageSlider, currentSlide_, nextSlide_) {
    var GalleryWidth = $(ImageSlider).width();
    var GalleryHeight = $(ImageSlider).height();

    // if there hasn't been a next slide passed in. Look for the next One
    if (nextSlide_ == undefined || nextSlide_ == null) {
        nextSlide_ = $(currentSlide_).next('.Image-Slider-Slide');
        // If the next one could not be founf. get the first
        if ($(nextSlide_).length == 0) {
            nextSlide_ = $(ImageSlider).children('.Image-Slider-Slide').first();
        }
    }

    var CurrentSlideId = $(currentSlide_).attr('SlideId');
    var NextSlideId = $(nextSlide_).attr('SlideId');

    // Deactive the quick link for the current slide and active the new one
//    $('#QuickSlide' + CurrentSlideId).removeClass('Quick-ActiveSlide');
//    $('#QuickSlide' + NextSlideId).addClass('Quick-ActiveSlide');

    // Move all the slides of the to the left (this was we clean up any issues)
//    $(ImageSlider).children('.Image-Slider-Slide').css('left', GalleryWidth + 'px');
    // Move the current one to the correct position
    $(currentSlide_).css('left', '0px');
    //    $(nextSlide_).css('left', GalleryWidth + 'px');
    $(nextSlide_).css('left', '0px');
    var dur = (GalleryWidth * slideDurationPerPixal);

    // Slide current slide of and move the to the right once finished
//    $(currentSlide_).animate({
//        left: '-=' + GalleryWidth
//    }, dur, function () { $(this).css('left', GalleryWidth + 'px'); });
    $(currentSlide_).css("z-index", 1);
    $(nextSlide_).css("z-index", 0);
    $(nextSlide_).show();
    $(currentSlide_).fadeOut(1200);
    // Slide next slide in and move the to the correct position once finished
//    $(nextSlide_).animate({
//        left: '-=' + GalleryWidth
//    }, dur, function () { $(this).css('left', '0px'); });

    // Set the new slide id on the gallery
    $(ImageSlider).attr('CurrentSlideId', NextSlideId);
}