$(function () {

    if (typeof (SVG) == 'undefined') { SVG = {}; }
    if (typeof (SVG.FlyerBoard) == 'undefined') { SVG.FlyerBoard = {}; }

    SVG.FlyerBoard.Canvas = {

        MainContainer: null,
        ImageContainer: null,
        HeaderContainer: null,
        ScrollerContainer: null,
        Height: 350, //px
        Width: 670,  //px
        BorderWidth: 27,
        BorderHeight: 30,
        Scrolling: false,
        LastCursorX: null,

        Build: function (outterDiv) {

            var canvas = this;

            var headerContainer = $("<div />");
            var mainContainer = $("<div />").addClass('flyerboard-canvas'); //Cork board canvas
            var outterImageContainerWrapper = $("<div />");         //Outter Image Container Wrapper
            var innerImageContainerWrapper = $("<div />");          //Inner Image Container Wrapper
            var scrollerContainer = $("<div />").addClass('flyerboard-nav');
            var leftScroller = $("<div>").addClass('flyerboard-nav-item flyerboard-nav-left');
            var rightScroller = $("<div>").addClass('flyerboard-nav-item flyerboard-nav-right');

            mainContainer.css({
                "position": "relative",
                "width": canvas.Width + 'px',
                "height": canvas.Height + 'px'
            });

            outterImageContainerWrapper.css({
                "position": "relative",
                "overflow": "hidden",
                "width": (canvas.Width - (canvas.BorderWidth * 2) - 1) + 'px', //-1 Because firefox is off by a pixel
                "height": (canvas.Height - canvas.BorderHeight) + 'px',
                "top": canvas.BorderHeight + 'px',
                "left": canvas.BorderWidth + 'px'
            });

            innerImageContainerWrapper.css({
                "position": "absolute",
                "overflow": "hidden",
                "width": (canvas.Width - (canvas.BorderWidth * 2)) + 'px',
                "height": (canvas.Height - canvas.BorderHeight) + 'px',
                "left": "0px",
                "top": "0px"
            });

            leftScroller.attr("src", SVG.URLS.LeftScroller);
            leftScroller.mouseover(function () { $(this).addClass('flyerboard-nav-item-hover'); });
            leftScroller.mouseout(function () { $(this).removeClass('flyerboard-nav-item-hover'); });
            leftScroller.mousedown(function () { $(this).addClass('flyerboard-nav-item-hover'); canvas.TurnButtonScrollingOn(this, true); });
            leftScroller.mouseup(function () { $(this).removeClass('flyerboard-nav-item-hover'); canvas.TurnButtonScrollingOff(this); });

            rightScroller.attr("src", SVG.URLS.RightScroller);
            rightScroller.mouseover(function () { $(this).addClass('flyerboard-nav-item-hover'); });
            rightScroller.mouseout(function () { $(this).removeClass('flyerboard-nav-item-hover'); });
            rightScroller.mousedown(function () { $(this).addClass('flyerboard-nav-item-hover'); canvas.TurnButtonScrollingOn(this, false); });
            rightScroller.mouseup(function () { $(this).removeClass('flyerboard-nav-item-hover'); canvas.TurnButtonScrollingOff(this); });

            scrollerContainer.append(leftScroller);
            scrollerContainer.append(rightScroller);
            mainContainer.append(scrollerContainer);

            outterImageContainerWrapper.append(innerImageContainerWrapper);
            mainContainer.append(outterImageContainerWrapper);

            canvas.ScrollerContainer = scrollerContainer;
            canvas.MainContainer = mainContainer;
            canvas.ImageContainer = innerImageContainerWrapper;

            $(outterDiv).append(headerContainer);
            $(outterDiv).append(mainContainer);

        },


        TurnMouseScrollingOn: function () {
            $(document).mousemove(
                    function (event) {
                        SVG.FlyerBoard.Canvas.ScrollToMouse(event);
                    });
            $(document).mouseup(
                    function () {
                        SVG.FlyerBoard.Canvas.TurnMouseScrollingOff();
                        setTimeout(function () { SVG.FlyerBoard.Canvas.Scrolling = false; }, 500);       //TODO: Fix Bubbling issue with mouseup                   
                    });
        },

        TurnMouseScrollingOff: function () {
            if (this.LastCursorX == null) { return; }
            this.Center();
            this.LastCursorX = null;
            $(document).unbind("mousemove");
        },

        TurnButtonScrollingOn: function (el, left) {
            $(el).attr("mousedown", "true");
            (function scroll(el) {
                if ($(el).attr("mousedown") != "true") { return; }
                var columnCount = left ? -1 : 1;
                SVG.FlyerBoard.Canvas.ScrollColumn(columnCount);
                //setTimeout(function() { scroll(el); }, 500);
            })(el);

            //TODO: Fix bubbling issue
            //$(document).mouseup(function() { alert("here"); });

        },

        TurnButtonScrollingOff: function (el) {
            $(el).attr("mousedown", "false");
        },

        ScrollToMouse: function (event) {

            this.Scrolling = true;
            event = $.event.fix(event);

            var pageX = event.pageX;
            var canvas = SVG.FlyerBoard.Canvas;

            if (!canvas.LastCursorX) { canvas.LastCursorX = pageX; }

            var xDif = parseInt(pageX - canvas.LastCursorX, 10);

            this.ScrollPixel(xDif);

            canvas.LastCursorX = pageX;

            return false; //Needed to prevent image highlighting
        },

        ScrollPixel: function (amount, animate) {

            var canvas = SVG.FlyerBoard.Canvas;
            var images = SVG.FlyerBoard.Images;
            var el = canvas.ImageContainer;

            var totalFlyerWidth = images.FlyerWidth + images.ImageSpacingWidth;
            var imageContainerWidth = $(el).width() + (canvas.BorderWidth * 2);

            var currentX = parseInt($(el).css("left").split('px')[0], 10) || 0;
            var newX = (currentX + amount);

            if (((newX + imageContainerWidth >= canvas.Width) || animate) && (newX <= 0 || animate)) {
                if (animate) {
                    canvas.Scrolling = true;
                    $(el).animate({
                        left: (newX) + "px"
                    }, 500
                     , function () { canvas.Scrolling = false; });
                } else {
                    $(el).css({ "left": newX + "px" });
                }
            }

        },

        ScrollColumn: function (columnCount) {
            if (this.Scrolling) { return; }
            columnCount = columnCount == null ? 1 : columnCount;

            var canvas = SVG.FlyerBoard.Canvas;
            var images = SVG.FlyerBoard.Images;

            var left = columnCount < 0;
            var el = canvas.ImageContainer;
            var totalFlyerWidth = (images.FlyerWidth + images.ImageSpacingWidth);
            var imageContainerWidth = $(el).width() + (canvas.BorderWidth * 2);
            var currentX = parseInt($(el).css("left").split('px')[0], 10) || 0;
            var newX = left ? currentX + totalFlyerWidth : currentX - totalFlyerWidth;
            var newWidth = newX + imageContainerWidth;

            if (left && currentX >= 0) { return; }
            else if (!left && canvas.Width > newWidth) { return; }

            if (left) { this.ScrollPixel(totalFlyerWidth, true); }
            else { this.ScrollPixel(1 - totalFlyerWidth, true); }

        },

        Center: function () {

            var el = SVG.FlyerBoard.Canvas.ImageContainer;
            var left = (parseInt($(el).css("left").split('px')[0], 10) || 0) * -1;
            var totalWidth = SVG.FlyerBoard.Images.FlyerWidth + SVG.FlyerBoard.Images.ImageSpacingWidth;
            var leftColumnCount;

            if (left < (totalWidth / 2)) { leftColumnCount = 0; }
            else { leftColumnCount = Math.ceil(left / totalWidth); }   //Left should always be negative, so get abs of it 

            left = leftColumnCount * totalWidth;
            $(el).animate({
                left: (left * -1) + "px"
            }, 500);

        },

        SetHeaderText: function (text) {
            $(this.HeaderContainer).html(text);
        },

        Block: function (text, overlay) {
            if (SVG.FlyerBoard.Canvas.Scrolling) { return; }
            SVG.Block(SVG.FlyerBoard.Canvas.MainContainer, (text || "Loading..."), overlay, SVG.FlyerBoard.Images.ExpandSpeed + 400);
        },

        Unblock: function () {
            $(this.MainContainer).unblock();
        }
    }
});