﻿

(function(a) {
    $.fn.hslider = function(options) {
        var defaults = {
            slider: null,
            movinglayer: null,
            sliderClickXOffset: 0,
            currentSliderIndex: 0

        };

        var options = $.extend(defaults, options);

        var $this = this;

        this.initialize = function() {

            this.visibleAreaWidth = options.visiblearea.width();
            this.totalAreaWidth = options.movingarea.width();
            this.movinglayer = options.movingarea;
            this.currentSliderIndex = 0;
            this.registerEvents();
        };

        this.updateSliderPosition = function(x) {

            var sliderx = (x - this.sliderClickXOffset);
            sliderx = Math.max(sliderx, 0);
            sliderx = Math.min(sliderx, this.maxSliderX);
            var sliderpositionindex = sliderx / this.maxSliderX;
            this.updateMovingLayer(sliderpositionindex);
            this.currentSliderIndex = sliderpositionindex;
        };


        this.updateMovingLayer = function(sliderpositionindex) {
            // sliderpositionindex in range 0=>1
            var left = (-sliderpositionindex * (this.totalAreaWidth - this.visibleAreaWidth));
            this.movinglayer.css('left', left + 'px');
        };

        this.docMouseMove = function(event) {
            if ($this.dragging) {
                var x = event.pageX;
                $this.updateSliderPosition(x);
            }
        };

        this.docMouseUp = function(event) {
            $this.dragging = false;
            $(document).unbind('mouseup', $this.docMouseUp);
            $(document).unbind('mousemove', $this.docMouseMove);
        };

        this.railClick = function(event) {

            var $target = $(event.target);
            if ($target.is('img'))
                return;

            var x = event.pageX;
            var l = $this.rail.position().left;
            var index = (x - l) / ($this.railWidth - $this.sliderWidth);


            if (index < $this.currentSliderIndex)
                $this.buttonSlideLeft();
            else
                $this.buttonSlideRight();
        };

        this.gotoIndex = function(index) {

            index = Math.max(index, 0);
            index = Math.min(index, 1);

            $this.movinglayer.stop();
            $this.currentSliderIndex = index;

            $this.movinglayer.animate(
                { left: (($this.totalAreaWidth - $this.visibleAreaWidth) * -1 * index) + 'px' },
                600
            );
        };

        this.buttonSlideLeft = function() {
            var index = $this.currentSliderIndex - (($this.visibleAreaWidth / $this.totalAreaWidth));
            $this.gotoIndex(index);
        };

        this.buttonSlideRight = function() {
            var index = $this.currentSliderIndex + (($this.visibleAreaWidth / $this.totalAreaWidth));
            $this.gotoIndex(index);
        };

        this.registerEvents = function() {
            options.buttonleft.mousedown(this.buttonSlideLeft);
            options.buttonright.mousedown(this.buttonSlideRight);
        };

        this.centerOn = function(cellindex) {
            if (cellindex == -1) 
                return;
            var cell = $('td:eq(' + cellindex + ')', options.movingarea);
            
            var cellleft = cell.position().left;
            var cellw = cell.width();
            var index = (cellleft - cellw / 2) / this.totalAreaWidth;
            $('img', cell).parent().addClass('gallerytableitemon');
            index = Math.max(index, 0);
            index = Math.min(index, 1);

            this.updateMovingLayer(index);
            this.currentSliderIndex = index;
        };



        return this.initialize();

    };

})(jQuery);

