﻿/**
* Masque Layout Library 0.0.2.0
* Copyright(c) 2008, 青岛领创网络科技有限公司
* @author Lookingon Team
* Tabs 控件
*/

/// <reference path="Jquery/jquery.js" />
/// <reference path="MBase.js" />

if (!Masque)
    Masque = {};
if (!Masque.L) {
    Masque.L = {

        MoveDirection: {
            Up: 0, //向上
            Right: 1, //向右
            Down: 2, //向下
            Left: 3, //向左
            Parse: function(n) {
            },
            isDefined: function(n) {
            }
        },
        PositionDirection: {
            Up: 0, //向上
            Right: 1, //向右
            Down: 2, //向下
            Left: 3, //向左
            RightUp: 4, //向上
            RightDown: 5, //向右
            LeftUp: 6, //向下
            LeftDown: 7, //向左
            DownRight: 8, //底部左侧对齐
            Parse: function(n) {
            },
            isDefined: function(n) {
            }
        },
        ShowAgainst: function(_obj, _layer, _Position, _offsetTop, _offsetLeft) {
            if (_obj == null || _layer == null) {
                return;
            }
            if (_layer.style.position != "absolute")
                _layer.style.position = "absolute";
            if (_layer.style.display != "block")
                _layer.style.display = "block";
            var top = 0;
            var left = 0;
            var p = GetPosition(_obj);
            top = p.Top;
            left = p.Left;
            switch (_Position) {
                case this.PositionDirection.Up:
                    //top -= _obj.clientHeight;
                    break;
                case this.PositionDirection.Down:
                    top += _obj.clientHeight;
                    break;
                case this.PositionDirection.Left:
                    //left -= (Masque.W.GetVisibleWidth(_obj) );
                    break;
                case this.PositionDirection.RightUp:
                    left += _obj.clientWidth;
                    top -= _obj.clientHeight;
                    break;
                case this.PositionDirection.RightDown:
                    left -= _obj.clientWidth;
                    top += _obj.clientHeight;
                    break;
                case this.PositionDirection.LeftUp:
                    left -= _obj.clientWidth;
                    top -= _obj.clientHeight;
                    break;
                case this.PositionDirection.LeftDown:
                    left -= _obj.clientWidth;
                    top += _obj.clientHeight;
                    break;
                case this.PositionDirection.DownRight:
                    left = left + Masque.W.GetVisibleWidth(_obj) - _layer.clientWidth;
                    top += Masque.W.GetVisibleHeight(_obj);
                default:
                    left += Masque.W.GetVisibleWidth(_obj);
                    break;
            }
            if (Masque.V.isNumber(_offsetTop))
                top += _offsetTop;
            if (Masque.V.isNumber(_offsetLeft))
                left += _offsetLeft;
            if (top < 0)
                top = 0;
            if (left < 0)
                left = 0;

            if (_layer.style.left != left + "px")
                _layer.style.left = left + "px"
            if (_layer.style.top != top + "px")
                _layer.style.top = top + "px"

        },
        ShowPopup: function(_obj, _layer, _Position, _offsetTop, _offsetLeft) {
            var top = 0;
            var left = 0;
            if (_obj == null || _layer == null) {
                return;
            }
            if (_layer.style.display != "block")
                _layer.style.display = "block";

            var p = GetPosition(_obj, _layer.offsetParent);
            top = p.Top;
            left = p.Left;
            switch (_Position) {
                case this.PositionDirection.Up:
                    //top -= _obj.clientHeight;
                    break;
                case this.PositionDirection.Down:
                    top += _obj.clientHeight;
                    break;
                case this.PositionDirection.Left:
                    //left -= Masque.W.GetVisibleWidth(_obj);
                    break;
                case this.PositionDirection.RightUp:
                    left += _obj.clientWidth;
                    top -= _obj.clientHeight;
                    break;
                case this.PositionDirection.RightDown:
                    left -= _obj.clientWidth;
                    top += _obj.clientHeight;
                    break;
                case this.PositionDirection.LeftUp:
                    left -= _obj.clientWidth;
                    top -= _obj.clientHeight;
                    break;
                case this.PositionDirection.LeftDown:
                    left -= _obj.clientWidth;
                    top += _obj.clientHeight;
                    break;
                case this.PositionDirection.DownRight:
                    left = left + Masque.W.GetVisibleWidth(_obj) - _layer.clientWidth;
                    top += Masque.W.GetVisibleHeight(_obj);
                    break;
                default:
                    left += _obj.clientWidth;
                    break;
            }
            if (top < 0)
                top = 0;
            if (left < 0)
                left = 0;
            if (Masque.V.isNumber(_offsetTop))
                top += _offsetTop;
            if (Masque.V.isNumber(_offsetLeft))
                left += _offsetLeft;

            if (_layer.style.position != "absolute")
                _layer.style.position = "absolute";
            if (_layer.style.left != left + "px")
                _layer.style.left = left + "px"
            if (_layer.style.top != top + "px")
                _layer.style.top = top + "px"
            var me = this;
            var a = function() {
                if (window.event.srcElement.getAttribute("Pupup") == 'true') {
                    if (window.event.button == 2) {
                        removeEvent(document, "click", a)
                        _layer.style.display = 'none';
                    }
                }
                else {
                    _layer.style.display = 'none';
                    removeEvent(document, "click", a)
                }

            };
            window.setTimeout(function() { addEvent(document, "click", a) }, 50);

        }

    };
}
if (!Masque.L.MoveDirection) {
    Masque.L.MoveDirection = {};
}
Object.extend(Masque.L.MoveDirection, {
    Up: 0, //向上
    Right: 1, //向右
    Down: 2, //向下
    Left: 3, //向左
    Parse: function(n) {
    },
    isDefined: function(n) {
    }
});

Masque.L.Scrollor = Class();
Masque.L.Scrollor.extend({
    State: 'None',
    initialize: function(ScrollBox, options) {
        this.option = {
            Speed: 10, //滚动速度间隔， 数值越大，速度越慢。int类型
            Step: 1, //滚动长度，数值越大，速度越快。int类型
            StepCount: 0, //每次滚动的次数
            Interval: 0, //滚动间隔。
            Direction: Masque.L.MoveDirection.Up, //滚动方向， 枚举自Masque.L.MoveDirection。也可以为0-3的整数。
            Roll: false, //是否循环滚动（仿marquee），可以调用SetRoll控制。bool类型
            AutoStop: false //在鼠标移到到容器时，是否自动停止滚动,可以调用SetAutoStop进行控制。bool类型
        };
        var me = this;
        me.__IntervalTimer = 0; //间隔记时器
        me.__runTimer = 0; //滚动记时器
        this.ScrollBox = $(ScrollBox); //受控的HTML容器。object类型，为string类型时则认为是对像的ID。
        //        if (me.ScrollBox.style.overflow != "hidden")
        //            me.ScrollBox.style.overflow = "hidden";
        //        if (me.ScrollBox.css("width") == "" || me.ScrollBox.css("width") == "auto")
        //            me.ScrollBox.css("width", "100%");
        //        if (me.ScrollBox.css("height") == "" || me.ScrollBox.css("height") == "auto")
        me.ScrollBox.css("height", me.ScrollBox.parent().attr("clientHeight"));

        this.SetOption(options);

        if (me.option.Roll) {
            me.SetRoll(me.option.Roll);
        }
        if (me.option.AutoStop) {
            me.SetAutoStop(me.option.AutoStop);
        }

    },
    Move: function(options) {
        if (options)
            this.SetOption(options);

        var me = this;
        me.State = "Move";
        if (me.__IntervalTimer > 0)
            window.clearTimeout(me.__IntervalTimer);

        this.___TempStepCount = this.option.StepCount;
        me.__IntervalTimer = window.setTimeout(function() {
            me.__MoveStep();
        }, me.option.Interval);
    },
    __MoveStep: function() {
        var me = this;
        if (this.State == "MovePause" || this.State == "StepPause")
            return;
        this.__runTimer = window.setTimeout(function() {
            me.__doMove();
        }, this.option.Speed);
    },
    __doMove: function() {
        var me = this;
        me.State = "Step";
        if (me.__runTimer > 0) {
            window.clearTimeout(me.__runTimer);
        }
        var me = this;
        var cb = $(me.ScrollBox.children()[0]);
        if (cb != null) {
            switch (me.Direction) {
                case Masque.L.MoveDirection.Right:
                    if (me.option.isRoll) {
                        if (me.ScrollBox.attr("scrollLeft") <= cb.attr("offsetWidth") - me.ScrollBox.attr("clientWidth")) {
                            me.ScrollBox.attr("scrollLeft", cb.attr("offsetWidth") * 2 - me.ScrollBox.attr("clientWidth"));
                        } else {
                            me.ScrollBox.attr("scrollLeft", me.ScrollBox.attr("scrollLeft") + me.option.Step);
                        }
                    } else {
                        if (Masque.isFirefox) {
                            var fl = me.ScrollBox.attr("scrollLeft");
                            //var gap = me.ScrollBox.attr("clientWidth") - cb.offsetWidth;
                            me.ScrollBox.attr("scrollLeft", me.ScrollBox.attr("scrollLeft") + me.option.Step);
                            if (me.ScrollBox.attr("scrollLeft") == fl) {
                                me.Stop();
                            }
                        } else {
                            if (me.ScrollBox.attr("scrollLeft") < me.ScrollBox.attr("scrollWidth") - me.ScrollBox.attr("clientWidth")) {
                                me.ScrollBox.attr("scrollLeft", me.ScrollBox.attr("scrollLeft") + me.option.Step);
                            } else {
                                me.Stop();
                            }
                        }
                    }
                    break;
                case Masque.L.MoveDirection.Down:
                    if (me.option.isRoll) {
                        if (me.ScrollBox.attr("scrollTop") <= cb.attr("offsetHeight") - me.ScrollBox.attr("clientHeight")) {
                            me.ScrollBox.attr("scrollTop", cb.attr("offsetHeight") * 2 - me.ScrollBox.attr("clientHeight"));
                        } else {
                            me.ScrollBox.attr("scrollTop", me.ScrollBox.attr("scrollTop") - me.option.Step);
                        }
                    } else {
                        if (me.ScrollBox.attr("scrollTop") > 0) {
                            me.ScrollBox.attr("scrollTop", me.ScrollBox.attr("scrollTop") - me.option.Step);
                        } else {
                            me.Stop();
                        }
                    }
                    break;
                case Masque.L.MoveDirection.Left:
                    if (this.option.isRoll) {
                        if (me.ScrollBox.attr("scrollLeft") >= cb.attr("offsetWidth") + me.ScrollBox.attr("clientWidth")) {

                            me.ScrollBox.attr("scrollLeft", me.option.Step);
                        } else {
                            me.ScrollBox.attr("scrollLeft", me.ScrollBox.attr("scrollLeft") - me.option.Step);
                        }
                    } else {
                        if (me.ScrollBox.attr("scrollLeft") > 0) {
                            me.ScrollBox.attr("scrollLeft", me.ScrollBox.attr("scrollLeft") - me.option.Step);
                        } else {
                            me.Stop();
                        }
                    }
                    break;
                default:
                    if (this.option.isRoll) {
                        if (cb.attr("offsetHeight") - this.ScrollBox.attr("scrollTop") <= 0) {
                            me.ScrollBox.attr("scrollTop", me.option.Step);
                            //log("<br/>[0]");
                        } else {
                            //log(me.ScrollBox.attr("scrollTop") + me.option.Step);
                            me.ScrollBox.attr("scrollTop", me.ScrollBox.attr("scrollTop") + me.option.Step);
                        }
                    } else {

                        if (me.ScrollBox.attr("scrollHeight") - me.ScrollBox.attr("scrollTop") > me.ScrollBox.attr("clientHeight")) {
                            me.ScrollBox.attr("scrollTop", me.ScrollBox.attr("scrollTop") + me.option.Step);
                        } else {
                            me.Stop();
                        }
                    }
                    break;
            }
        }
        if (me.___TempStepCount > 1) {
            me.___TempStepCount = me.___TempStepCount - 1;
            me.__MoveStep();
        }
        else {
            //log("*");
            me.Move();
            return;
        }
    },
    SetRoll: function(roll) {
        if (roll == true) {
            if (!this.option.isRoll) {
                this.option.isRoll = true;
                var copyObject = this.ScrollBox.children()[0];

                if (copyObject != null) {
                    copyObject = copyObject.cloneNode(this.ScrollBox);
                    this.ScrollBox.append(copyObject);
                }
                //初始化位置 未完成。
            }
        }
        else {
            if (this.option.isRoll) {
                this.option.isRoll = false;
                var copyObject = this.ScrollBox.childred()[1];

                if (copyObject != null) {
                    document.remove(copyObject);
                }
            }

        }
    },
    SetAutoStop: function(autoStop) {
        var me = this;

        if (autoStop == true) {
            if (!me.option.autoStop) {
                me.ScrollBox.bind("mouseover", (function() { me.Pause(); }));
                me.ScrollBox.bind("mouseout", (function() { me.Continue(); }));
            }
        }
        //        else {
        //            if (me.option.autoStop == true) {
        //                me.ScrollBox.unbind("mouseover", me.Stop);
        //                me.ScrollBox.unbind("mouseout", me.__doMove);
        //            }

        //        }
    },
    Stop: function() {
        this.State = "Stop";
        this.__Stop();
    },
    __Stop: function() {
        var me = this;
        if (this.__IntervalTimer > 0)
            window.clearTimeout(this.__IntervalTimer);
        if (me.__runTimer > 0) {
            window.clearTimeout(me.__runTimer);
        }
    },
    Pause: function() {
        if (this.State == "Move") {
            this.State = "MovePause";
        } else if (this.State == "Step") {
            this.State = "StepPause";
        }
        this.__Stop();
    },
    Continue: function() {
        if (this.State == "MovePause") {
            this.Move();

            this.State = "Move";
        }
        else if (this.State == "StepPause") {
            this.State = "Step";
            this.__MoveStep();
        }
    }
});

if (!Masque.L) {
    Masque.L = {};
}
Masque.L.Tabs = Class();
Masque.L.Tabs.extend({
    __SelectIndex: -1,
    __SelectTab: null,
    initialize: function(TabsBox, options) {
        this.option = {
            SelectedCSS: 'Selected', //选中时的默认样式。程序将自动读取第一个tab的样式，并加入容器ID 如：  '#TabsBox Selected'
            NoneCSS: 'NoSelected', //未选中时的样式。程序自动读取第二个tab的样式，并加入容器ID 如：'#TabsBox NoSelected'
            Select: null, //择选tab时引发的行为，默认是根据元件 href 中的 id 显示的隐藏对象 如： <a href="#tab-1">tab1</a> 显示 ID为 tab-1的元素。
            Selected: function(selectTab, index) { }, //选中tab后引发的事件。
            Event: "mouseover", //引发tab选中的事件，默认为点击，其它可先项有：mouseover
            TurnTime: 0, //自动轮循的时间。
            Roll: false //使用上一个、下一个接口时，是否自动循环
        };

        var me = this;
        this.TabsBox = $(TabsBox); //受控的HTML容器。object类型，为string类型时则认为是对像的ID。

        //默认样式。
        if (this.TabsBox.children().length > 1) {
            var dNoneCSS = this.TabsBox.children().eq(1).attr("class");
            if (dNoneCSS) {
                this.option.NoneCSS = dNoneCSS;
            }
        }
        var dSelectedCSS = this.TabsBox.children().eq(0).attr("class");
        if (dSelectedCSS) {
            this.option.SelectedCSS = dSelectedCSS;
        }
        var id = this.TabsBox.attr("id");
        if (id) {
            if (this.option.NoneCSS.indexOf(id) == -1) {
                this.option.NoneCSS = id + " " + this.option.NoneCSS;
            }
            if (this.option.SelectedCSS.indexOf(id) == -1) {
                this.option.SelectedCSS = id + " " + this.option.SelectedCSS;
            }
        }
        this.SetOption(options);
        this.__bindEvent();
        this.Select(0);
        var me = this;
        if (this.option.TurnTime > 0) {
            this.__TurnInterval = window.setInterval(function() { me.__Turn(); }, this.option.TurnTime);
        }
    },
    __TurnInterval: -1,
    __Turn: function() {
        this.__TurnState = true;
        this.SelectNext();
    },
    __Select: function(handler) {
        var ctabs = handler.data;
        if (ctabs.__TurnInterval > 0) {
            window.clearInterval(ctabs.__TurnInterval);
            ctabs.__TurnInterval = window.setInterval(function() { ctabs.__Turn(); }, ctabs.option.TurnTime);
        }

        ctabs.____Select($(this));
        return false;
    },
    ____Select: function(tab) {
        if (tab != null && this.__SelectTab != tab) {
            var sIndex = this.TabsBox.children().index(tab);
            if (sIndex > -1) {
                if (this.__SelectTab != null) {
                    var thref = this.__SelectTab.attr("href");
                    if (thref && thref.length > 1 && thref.indexOf("#") == 0) {
                        var t = $(thref);
                        if (t != null) t.hide();
                    }
                    this.__SelectTab.attr("class", this.option.NoneCSS);
                }
                var href = tab.attr("href");
                if (href && href.length > 1 && href.indexOf("#") == 0) {
                    var t = $(href);
                    if (t != null) t.show();
                }
                this.__SelectIndex = sIndex;
                this.__SelectTab = tab;
                this.__SelectTab.attr("class", this.option.SelectedCSS);
                this.option.Selected(this.__SelectTab, this.__SelectIndex);
            }
        }
    },
    __bindEvent: function() {
        var me = this;
        var selectCallBack = null;
        if (this.option.Select != null) {
            selectCallBack = this.option.Select;
        }
        else {
            selectCallBack = this.__Select;
        }
        var event = "";
        if (this.option.Event.toLowerCase() == "mouseover") {
            event = "mouseover";
        }
        else {
            event = "click";
        }
        this.TabsBox.children().bind(event, me, selectCallBack);
    },
    Select: function(index) {
        if (index > -1 && index != this.__SelectIndex) {
            this.____Select(this.TabsBox.children().eq(index));
        }
    },
    SelectNext: function(stopRoll) {
        var index = this.__SelectIndex + 1;
        var length = this.TabsBox.children().length;
        if (index >= length) {
            if (this.option.Roll || this.option.TurnTime > 0) {
                index = 0;
            }
            else {
                index--;
            }
        }
        if (stopRoll == true && this.__TurnInterval > 0) {
            window.clearInterval(this.__TurnInterval);
            var me = this;
            this.__TurnInterval = window.setInterval(function() { me.__Turn(); }, this.option.TurnTime);
        }
        this.Select(index);
    },
    SelectPrve: function(stopRoll) {
        var index = this.__SelectIndex - 1;
        if (index < 0) {
            if (this.option.Roll || this.option.TurnTime > 0) {
                index = this.TabsBox.children().length - 1;
            }
            else {
                index = 0;
            }
        }
        if (stopRoll == true && this.__TurnInterval > 0) {
            window.clearInterval(this.__TurnInterval);
            var me = this;
            this.__TurnInterval = window.setInterval(function() { me.__Turn(); }, this.option.TurnTime);
        }
        this.Select(index);
    }
});

