/// <reference path="i.js" />

function Slider(sliderContainer)
{
    //properties / fields
    this.Width = $(sliderContainer).width();
    this.Items = $('.Item');
    this.ItemWidth = $('.Item').width();
    //this.LeftBound = $(sliderContainer).offset().x;
    this.SliderContainer = sliderContainer;
    this.CurrentItemId = null;
    this.ButtonHandler = new SliderButtonHandler($(sliderContainer).find("#slider"), this.LeftBound, sliderContainer, this.Width, function(e) {
        //button callback 
        ScrollTo({ _x: e.x, sliderContainer: sliderContainer });
    }, function(e) {

        if (e.x != undefined) {
            var sliderPercent = e.x / slider.SliderContainer.width();
            var id = Math.round((slider.Items.length * sliderPercent) + 1);
            slider.CurrentItemId = id;
            ScrollTo({ itemId: id, sliderContainer: sliderContainer });
        }
    });
}
var slider;
$(document).ready(function()
{
    slider = new Slider($('.SliderCont'));
    $('.NegMarg').width(slider.Items.length * slider.ItemWidth);
});

//Methods/Getters/Setters
Slider.prototype.SelectItem = function(item)
{
    item.addClass('Active');
    this.ScrollTo({sliderItem: item});
}

function ScrollTo(args)
{
    var negMargin = $('.NegMarg');
    var scrollerBtnIncrement = slider.SliderContainer.width() / slider.Items.length;
    function AnimateToX(x, callback)
    {
        negMargin.css('margin-left', x);
    }
    if (args.itemId != null)
    {
        //scroll to item
        //var x = (args.itemId - 1) * slider.ItemWidth;
        var X = (args.itemId - 1) * slider.ItemWidth;
        var sliderMargin = (scrollerBtnIncrement * (args.itemId)) - scrollerBtnIncrement;
        //HACK vvvvv -> the solution: break out the slider bar into its own object... the "timeline" should listen for this sliders % position
        //      vvv                   ex: 53%, then it should scroll to 53% of the timeline's width,
        //       v                    math to get id: id = Math.round((timelineWidth / totalItems) * sliderPercent)
        if (args.itemId == slider.Items.length || sliderMargin >= args.sliderContainer.width())
        {
            sliderMargin = args.sliderContainer.width() - $('#slider').width(); //100%
        }
        $(slider.sliderContainer).find('#slider').animate({ marginLeft: sliderMargin}, "slow"); ;
        //AnimateToX(X * -1);
        $(negMargin).animate({marginLeft: X * -1}, "fast");
        return;
    }
    if (args._x != null)
    {
        //var X = (slider.Items.length) * args._x * -1;
        //X is the timeline's x position
        //it should be the ratio of the sliders x position to the sliders width
        //times the width of the whole timeline
        //args._x is the sliders position

        var X = (args._x / slider.SliderContainer.width()) * negMargin.width() * -1;
        //var X = (args._x / slider.ItemWidth) * ((slider.Items.length - 1) * slider.ItemWidth) * -1;
        AnimateToX(X);
        //scroll to x;
    }
}

function SliderItem(id, data, orderNum)
{
    var _el = $('<div id="sliderItem' + id + '"></div>');
    //get data and populate image and text
    this.El = _el;
    this.orderNum = 0;
}
SliderItem.prototype.IsCurrentItem = function()
{
    return this.El.hasClass('Active');
}

function GetDistanceFromXtoX(x1, x2)
{
    return Math.abs(x1 - x2);
}

var XX;//hack
function SliderButtonHandler(el, leftBound, containerEl, width, callback, mouseUpCallback)
{
    $(el).parent().mousedown(function()
    {
        disableSelection(document.getElementsByTagName("body")[0]);
        document.disableSelection = true;
        var scrollerBtnIncrement = slider.SliderContainer.width() / slider.Items.length;
        $(document).bind("mousemove", function(e)
        {
            var posx = e.pageX;
            var os = $(el).parent().offset();
            var left = posx - os.left;
            if (left <= ($(containerEl).width() - $(el).width()) && left > 0)//possible performance flag
            {
                $(el).css('margin-left', left);
                XX = left;
                callback({ x: left });
            }
        });
    });
    $(document).mouseup(function()
    {
        $(document).unbind("mousemove");
        mouseUpCallback({ x: XX });
        enableSelection(document.getElementsByTagName("body")[0])
    });

}

function disableSelection(element)
{
    element.onselectstart = function()
    {
        return false;
    };
    element.unselectable = "on";
    element.style.MozUserSelect = "none";
}

function enableSelection(element)
{
    element.onselectstart = null;
    element.unselectable = "off";
    element.style.MozUserSelect = null;
}