// default slider settings
var settings =
{
    timestamp: 5000,
    size: { width: 986, height: 365 },
    slides:[],
    logoSize: { width: 130, height: 60 }
};


$(document).ready(function() {

    $.ajax({
        url: "/GetBanners.ashx?StoreID=" + $("#StoreID").val(),
        success: function(data) {
            var items = eval(data);

            for (i = 0; i < items.length; i++) {
                settings.slides.push(items[i]);
            }

            initializeSlider('.slider');
        }
    });

});

// initialize slider component into the given (JQuery) element
// note: it uses default settings for this
function initializeSlider(selector) {
    var $slider = $(selector);

    if ($slider.length > 0 && $slider.data("settings") == undefined) {
        var s = window.settings; // need to be cloned
        s.slideIndex = 0;
        s.slideCount = s.slides.length;

        // initialize style and layout
        var $controlPanel = $slider.find(".control-panel");
        var $container = $slider.find(".logo-container").empty();

        //var cw = 0;
        for (var li = 0; li < s.slideCount; li++) {
            var $logo = $("<div class='logo'></div>").appendTo($container);

            if (li == 0) $logo.addClass("first-logo");

            var $image = $("<img src='/handlers/ImageHandler.ashx?PhotoPath=" + s.slides[li].logo +
            (li == 0 ? "&h=56&w=66"
            : "&h=56&w=126") +
            "&AltPhotoPath=Images/products/PhotoNotAvailable.png' />");

            $logo.append($image);
            $image.css
			({
			    width: 126,
			    height: 56
			});
			if (s.slides[li].width) $image.width(66);

			$logo.bind("click", handleSlideLogoClicked);
            

            //cw += $logo.get(0).offsetWidth;
        }
        $container.width(s.slideCount * 126);

        // intialize event handlers
        $slider.find(".pane")
			.bind("mouseenter", handleSliderPaneMouseEnter)
			.bind("mouseleave", handleSliderPaneMouseLeave);

        $slider.find(".logo")
			.bind("mouseenter", handleSlideLogoClicked);			

        $slider.find(".prev:first")
			.bind("click", handlePrevButtonClicked);
        $slider.find(".next:last")
			.bind("click", handleNextButtonClicked);

        // keep a track of settings
        $slider.data("settings", s);

        // select the first slide
        selectSlide(selector, 0);
    }
}

function stopSliderAnimation(selector) {
    var $slider = $(selector);
    if ($slider.data("settings").animationId != undefined) {
        window.clearTimeout($slider.data("settings").animationId);
        delete $slider.data("settings").animationId;
    }
}
function startSliderAnimation(selector) {
    var $slider = $(selector);
    var s = $slider.data("settings");

    s.animationId = window.setTimeout
	(
		function() {
		    showNextSlide(selector);
		},
		s.timestamp
	);
}

function handleSlideLogoClicked() {
    var $logo = $(this);
    var $slider = $logo.closest(".slider");
    var $pane = $slider.find(".pane");

    // stop animation
    stopSliderAnimation($slider);

    $logo.parent().find(".logo").removeClass("selected");
    $logo.addClass("selected");

    // animate content to the desired slide
    var desiredSlide = $slider.data("settings").slides[$logo.index()];
    var $desiredContent = $(desiredSlide.content);

    $desiredContent.css({ visibility: "hidden", position: "relative" });
    $slider.find(".pane").empty().append($desiredContent);

    // keep aspect ratio
    var cs = { width: $desiredContent.width(), height: $desiredContent.height() };
    var ps = { width: $pane.width(), height: $pane.height() };

    if (cs.width > ps.width || cs.height > ps.height) {
        var r = cs.width / cs.height;
        var sr = { width: ps.width, height: ps.height };

        if (cs.width >= cs.height) sr.width = sr.height * r;
        else sr.width = sr.height * r;

        cs = { width: sr.width, height: sr.height };
        $desiredContent.css({ width: sr.width, height: sr.height });
    }
    // and center content
    $desiredContent.css({ visibility: '' });
    //$desiredContent.css({ display: 'none', left: (ps.width - cs.width) / 2, top: (ps.height - cs.height) / 2 });
    $desiredContent.css({ display: 'none', left: -6.5, top: 0 });
    $desiredContent.fadeIn(1500);
    scrollSlideLogo($logo);

    $slider.data("settings").slideIndex = $logo.index();

    // run (default) animation
    startSliderAnimation($slider);
}

// select the desired slide of the given (JQuery) element
function selectSlide(selector, slideNumber) {
    $(selector).find(".logo-container").find(".logo:eq(" + slideNumber + ")").click();
}

function getSlideLogoOffset($logo) {
    var $controlPanel = $logo.closest(".control-panel");
    var offset =
	{
	    left: ($logo.offset().left - $controlPanel.offset().left - $controlPanel.find(".prev").width()),
	    top: ($logo.offset().top - $controlPanel.offset().top)
	};

    if ($logo.index() != 0) {
        offset.left -= $controlPanel.find(".logo-container>.logo:eq(0)").get(0).offsetWidth;
    }

    return offset;
}
function scrollSlideLogo($logo) {
    var $slider = $logo.closest(".slider");
    var $controlPanel = $slider.find(".control-panel");
    var offset = getSlideLogoOffset($logo);
    var padding = $slider.find(".next:last").width() + $slider.find(".prev:first").width() + 3;
    var firstLogoWidth = $controlPanel.find(".logo-container>.logo:eq(0)").get(0).offsetWidth;

    if (offset.left < 0) {
        $controlPanel.find(".logo-container>.logo")
			.slice(1, $slider.data("settings").slideCount)
				.stop()
					.animate({ left: ('+=' + ((offset.left * -1) + 2)) }, 500);
    }
    else {
        if ($logo.index() == 0) {
            // since it's the first logo that is requested to slide, reposition following logos
            $controlPanel.find(".logo-container>.logo")
					.slice(1, $slider.data("settings").slideCount)
						.stop()
							.animate({ left: 0 }, 500);
        }
        else {
            var diff = ($controlPanel.get(0).offsetWidth - padding - firstLogoWidth) - (offset.left + $logo.get(0).offsetWidth);
            if (diff < 0) {
                $controlPanel.find(".logo-container>.logo")
					.slice(1, $slider.data("settings").slideCount)
						.stop()
							.animate({ left: ('-=' + (diff * -1)) }, 500);
            }
        }
    }
}


function handleNextButtonClicked() {
    var $slider = $(this).closest(".slider");

    if (($slider.data("settings").slideIndex + 1) < $slider.data("settings").slideCount)
        selectSlide($slider, ($slider.data("settings").slideIndex + 1));
    else
        selectSlide($slider, 0);
}
// show the next slide
function showNextSlide(selector) {
    $(selector).find(".next:last").click();
}

function handlePrevButtonClicked() {
    var $slider = $(this).closest(".slider");

    if ($slider.data("settings").slideIndex > 0)
        selectSlide($slider, ($slider.data("settings").slideIndex - 1));
}
// show the previous slide
function showPreviousSlide(selector) {
    $(selector).find(".prev:first").click();
}

function handleSliderPaneMouseEnter() {
    stopSliderAnimation($(this).closest(".slider"));
}
function handleSliderPaneMouseLeave() {
    startSliderAnimation($(this).closest(".slider"));
}