/// <reference path="prototype.js" />
/// <author name="Lichun" pubdate="2009/06"/>
/// <summary>Prototype Controls Toolkit v1.0.0 alpha2</summary>

if (Prototype.Browser.IE) {
    Prototype.Browser.IE.Version = parseFloat(navigator.appVersion.match(/MSIE (\d+\.\d+)/)[1]);
}

var $T = {};
$T.Util = {};
$T.Util.OldForumUrlReplaceNewForumUrl = function(content){
    var reg = /(\w+).baa.com.cn/gi;
    return content.replace(reg,"baa.bitauto.com/$1");
};
$T.Util.$B = Prototype.Browser;
var $B = $T.Util.$B;
$B.IE6 = ($B.IE && parseFloat(navigator.appVersion.match(/MSIE (\d+\.\d+)/)[1]) <= 6);
$T.Util.ExecuteOnLoaded = function(handler, frame) {
    if (!frame) frame = window;
    if (($B.IE && frame.document.readyState == 'complete') || (!$B.IE && frame.document.loaded === true)) {
        handler();
    }
    else {
        handler();
    }
};
$T.Util.Date = function(date) {
    var result;
    if (typeof date == 'string') {
        date = date.replace('-', '/');
        result = new Date(Date.parse(date));
    }
    else {
        result = date ? new Date(date) : new Date();
    }
    if (isNaN(result) == true)
        result = new Date();
    return result;
};
$T.Util.Date.AddDays = function(date, days) {
    var result = new Date(date);
    result.setDate(date.getDate() + days);
    return result;
};
$T.Util.Date.AddMonths = function(date, months) {
    var result = new Date(date);
    result.setMonth(date.getMonth() + months);
    return result;
};
$T.Util.Date.AddYears = function(date, years) {
    var result = new Date(date);
    result.setFullYear(date.getFullYear() + years);
    return result;
};
$T.Util.Date.AddHours = function(date, hours) {
    var result = new Date(date);
    result.setHours(date.getHours() + hours);
    return result;
};
$T.Util.Date.AddMinutes = function(date, minutes) {
    var result = new Date(date);
    result.setMinutes(date.getHours() + minutes);
    return result;
};
$T.Util.Date.AddSeconds = function(date, seconds) {
    var result = new Date(date);
    result.setSeconds(date.getSeconds() + seconds);
    return result;
};
$T.Util.Date.AddMilliseconds = function(date, milliseconds) {
    var result = new Date(date);
    result.setMilliseconds(date.getMilliseconds() + milliseconds);
    return result;
};


$T.Util.Date.GetFirtDayOfMonth = function(date) {
    return (8 + date.getDay() - date.getDate() % 7) % 7;
};
$T.Util.Date.GetLastDateOfMonth = function(date) {
    var lastDate = new Date(date);
    lastDate.setDate(31);
    var offset = lastDate.getDate() % 31;
    if (offset > 0) {
        lastDate = new Date(date);
        lastDate.setDate(31 - offset);
    }
    return lastDate.getDate();
};
$T.Util.Date.ToString = function(date, format) {
    date = new $date(date);
    format = format.replace('yyyy', date.getFullYear())
    .replace('MM', (date.getMonth() + 1).toPaddedString(2))
    .replace('dd', date.getDate().toPaddedString(2))
    .replace('HH', date.getHours().toPaddedString(2))
    .replace('mm', date.getMinutes().toPaddedString(2))
    .replace('ss', date.getSeconds().toPaddedString(2));

    return format;
};
var $date = $T.Util.Date;

$T.Util.String = {};
$T.Util.String.CountContain = function(password, check) {
    if (password && check) {
        // Declare variables
        var count = 0;
        for (i = 0; i < password.length; i++) {
            if (check.indexOf(password.charAt(i)) > -1) {
                count++;
            }
        }
        return count;
    } else return 0;
};
$T.Util.String.Password = {};
$T.Util.String.Password.UpperCase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
$T.Util.String.Password.LowerCase = 'abcdefghijklmnopqrstuvwxyz';
$T.Util.String.Password.Number = '0123456789';
$T.Util.String.Password.Characters = '!@#$%^&*?_~';

$T.Util.String.Password.Strength = function(password) {
    if (password) {
        // Reset combination count
        var score = 0;

        // Password length
        // -- Less than 4 characters
        if (password.length < 5) {
            score += 5;
        }
        // -- 5 to 7 characters
        else if (password.length > 4 && password.length < 8) {
            score += 10;
        }
        // -- 8 or more
        else if (password.length > 7) {
            score += 25;
        }

        // Letters
        var upperCount = $T.Util.String.CountContain(password, $T.Util.String.Password.UpperCase);
        var lowerCount = $T.Util.String.CountContain(password, $T.Util.String.Password.LowerCase);
        var lowerUpperCount = upperCount + lowerCount;
        // -- Letters are all lower case
        if (upperCount == 0 && lowerCount != 0) {
            score += 10;
        }
        // -- Letters are upper case and lower case
        else if (upperCount != 0 && lowerCount != 0) {
            score += 20;
        }

        // Numbers
        var numberCount = $T.Util.String.CountContain(password, $T.Util.String.Password.Number);
        // -- 1 number
        if (numberCount == 1) {
            score += 10;
        }
        // -- 3 or more numbers
        if (numberCount >= 3) {
            score += 20;
        }

        // Characters
        var characterCount = $T.Util.String.CountContain(password, $T.Util.String.Password.Characters);
        // -- 1 character
        if (characterCount == 1) {
            score += 10;
        }
        // -- More than 1 character
        if (characterCount > 1) {
            score += 25;
        }

        // Bonus
        // -- Letters and numbers
        if (numberCount != 0 && lowerUpperCount != 0) {
            score += 2;
        }
        // -- Letters, numbers, and characters
        if (numberCount != 0 && lowerUpperCount != 0 && characterCount != 0) {
            score += 3;
        }
        // -- Mixed case letters, numbers, and characters
        if (numberCount != 0 && upperCount != 0 && lowerCount != 0 && characterCount != 0) {
            score += 5;
        }
        return score;
    } else return 0;
};
var $string = $T.Util.String;
var $pwd = $string.Password;

$T.UI = {};


$T.UI.AlwaysVisible = {};
$T.UI.AlwaysVisible.DOM = [];
$T.UI.AlwaysVisible.Show = function(targetId, cssClass) {
    var target = $(targetId);
    if (cssClass) {
        target.className = cssClass;
    }
    if ($B.IE6 == true) {
        target.style.position = 'absolute';
        target.reposition = function(event) {
            target.style.top = Math.floor(document.documentElement.scrollTop + document.documentElement.clientHeight / 2) + 'px';
            target.style.left = Math.floor(document.documentElement.scrollLeft + document.documentElement.clientWidth / 2) + 'px';
        };
        $T.UI.AlwaysVisible.DOM.push(target);
        window.onscroll = function() {
            $T.UI.AlwaysVisible.DOM.each(
            function(s) {
                s.reposition();
            }
            );
        };
        window.onresize = window.onscroll;
        target.reposition();
    } else {
        target.style.position = 'fixed';
    }
};

$T.UI.MaskLayer = {};
$T.UI.MaskLayer.DOM = null;
$T.UI.MaskLayer.Modals = [];
$T.UI.MaskLayer.modalLock =
function(event) {

    if (event && $T.UI.MaskLayer.Modals.length > 0 && !Element.descendantOf(event.element(), $T.UI.MaskLayer.Modals[$T.UI.MaskLayer.Modals.length - 1])) {
        event.stop();
        return;
    }
};
$T.UI.MaskLayer.Show = function(opacity) {
    var modal = $T.UI.MaskLayer.Modals[$T.UI.MaskLayer.Modals.length - 1];
    modal.modalLock = function(event) {
        if (event && $T.UI.MaskLayer.Modals.length > 0 && !Element.descendantOf(event.element(), $T.UI.MaskLayer.Modals[$T.UI.MaskLayer.Modals.length - 1])) {
            event.stop();
            return;
        } else {
            if ($T.UI.MaskLayer.Modals.length == 0) {
                document.stopObserving('click', modal.modalLock);
            }
        }
    };
    document.body.focus();

    if (!$T.UI.MaskLayer.DOM) {
        var maskDiv = document.createElement('div');
        maskDiv.style.opacity = opacity;
        maskDiv.style.filter = new Template('alpha(opacity=#{opacity})').evaluate({ 'opacity': (opacity * 100) });
        maskDiv.style.backgroundColor = '#999999';
        maskDiv.style.position = ($B.IE6 == true) ? 'absolute' : 'fixed';
        maskDiv.style.top = '0px';
        maskDiv.style.left = '0px';
        maskDiv.style.width = '100%';
        maskDiv.style.height = '100%';
        maskDiv.innerHTML = '<iframe frameborder="0" scrolling="no" style="width: 100%; height: 100%; background-color: #999999; alpha: 0; filter:alpha(opacity=0);"></iframe>';
        var appendMask = function(event) {
            document.body.appendChild(maskDiv);
            if ($B.IE6) {
                maskDiv.style.height = new Template('#{height}px').evaluate({ 'height': document.documentElement.scrollHeight });
            }
        };

        $T.Util.ExecuteOnLoaded(appendMask);
        $T.UI.MaskLayer.DOM = maskDiv;
    }
    document.observe('click', modal.modalLock);
};
$T.UI.MaskLayer.Close = function() {
    if ($T.UI.MaskLayer.DOM && $T.UI.MaskLayer.Modals.length <= 1) {
        Element.remove($T.UI.MaskLayer.DOM);
        $T.UI.MaskLayer.DOM = null;
    }
    var modal = $T.UI.MaskLayer.Modals[$T.UI.MaskLayer.Modals.length - 1];
    document.stopObserving('click', modal.modalLock);
    $T.UI.MaskLayer.Modals.pop();
};

$T.UI.ModalPopup = {};
$T.UI.ModalPopup.DOM = null;
$T.UI.ModalPopup.Show = function(title, content, cssClass, handlerClose, template) {
    var modal = document.createElement('div');
    modal.className = cssClass;
    if (!template)
        template = '<h2>#{title}</h2><div class="close"><a href="javascript:void($modal.close());">关闭</a></div><div class="bot">#{content}</div>';
    modal.innerHTML = new Template(template)
                        .evaluate({ 'title': title, 'content': content, 'cssClass': cssClass });
    if (handlerClose)
        modal.handlerClose = handlerClose;
    var appendModal = function(event) {
        $T.UI.MaskLayer.Modals.push(modal);
        $T.UI.MaskLayer.Show(0.2);
        document.body.appendChild(modal);
        $T.UI.AlwaysVisible.Show(modal);
    };

    $T.Util.ExecuteOnLoaded(appendModal);
    $T.UI.ModalPopup.DOM = modal;
};
$T.UI.ModalPopup.Close = function() {
    if ($T.UI.ModalPopup.DOM) {
        document.body.removeChild($T.UI.ModalPopup.DOM);
        $T.UI.ModalPopup.DOM = null;
        $T.UI.MaskLayer.Close();
    }
};
$modal = $T.UI.ModalPopup.Show;
$modal.close = function() {
    if ($T.UI.ModalPopup.DOM) {
        var handlerClose = $T.UI.ModalPopup.DOM.handlerClose;
        $T.UI.ModalPopup.Close();
        if (handlerClose)
            handlerClose();
    }
}

$T.UI.ExpandPanel = {};
$T.UI.ExpandPanel.Show = function(panelId, cssClass, triggerId, onShow, onClose) {
    var panel = $(panelId);
    var trigger = $(triggerId);
    if (!panel.autoHide) {
        panel.autoHide = function(event) {
            if (event && trigger && event.element && (trigger == event.element() || Element.descendantOf(event.element(), panel) || Element.descendantOf(event.element(), trigger))) {
                return;
            }
            else {
                $T.UI.ExpandPanel.Close(panelId);
            }
        };
    }
    document.observe('click', panel.autoHide);
    if (!panel.stopAutoHide) {
        panel.stopAutoHide = function(event) {
            if (panel.autoHideTimeout) {
                clearTimeout(panel.autoHideTimeout);
            }
        };
    }
    if (!panel.startAutoHide) {
        panel.startAutoHide = function(event) {
            if (panel.autoHideTimeout) {
                clearTimeout(panel.autoHideTimeout);
            }
            if (event) {
                panel.autoHideTimeout = setTimeout(panel.autoHide, 670);
            }
        };
    }

    if (panel.style.display == 'none') {
        panel.className = cssClass;
        panel.style.display = '';
        panel.style.zIndex = 999998;
    }
    Event.observe(panel, 'mouseover', panel.stopAutoHide);
    Event.observe(panel, 'mouseout', panel.startAutoHide);
    if (trigger) {
        Event.observe(trigger, 'mouseover', panel.stopAutoHide);
        Event.observe(trigger, 'mouseout', panel.startAutoHide);
        Event.observe(trigger, 'click', panel.autoHide);
        panel.trigger = trigger;
    }
    panel.startAutoHide();
    if (onShow) {
        onShow();
    }
    if (onClose) {
        panel.onClose = onClose;
    }
};
$T.UI.ExpandPanel.Close = function(panelId) {
    var panel = $(panelId);
    if (panel.autoHideTimeout) {
        clearTimeout(panel.autoHideTimeout);
    }
    document.stopObserving('click', panel.autoHide);
    Event.stopObserving(panel, 'mouseover', panel.stopAutoHide);
    Event.stopObserving(panel, 'mouseout', panel.startAutoHide);
    var trigger = panel.trigger;
    if (trigger) {
        Event.stopObserving(trigger, 'mouseover', panel.stopAutoHide);
        Event.stopObserving(trigger, 'mouseout', panel.startAutoHide);
        Event.stopObserving(trigger, 'click', panel.autoHide);
        panel.trigger = null;
    }
    if (panel.style.display != 'none') {
        panel.style.display = 'none';
    }
    if (panel.onClose) {
        panel.onClose();
    }
};

$T.UI.Confirm = {};
$T.UI.Confirm.DOM = null;
$T.UI.Confirm.Show = function(title, content, cssClass, handlerOk, handlerCancel, parentModal, template) {
    if (!$T.UI.Confirm.DOM) {
        var div = document.createElement('div');
        div.className = cssClass;
        if (!template)
            template = '<h2>#{title}</h2><div class="close"><a href="javascript:void($confirm.cancel());">关闭</a></div><div class="bot">#{content}<p><input type="button" class="button_queding" onclick="javascript:void($confirm.ok());"/><input type="button" class="button_quxiao" onclick="javascript:void($confirm.cancel());"/></p></div>';
        div.innerHTML = new Template(template).evaluate({ 'title': title, 'content': content });
        var appendConfirm = function(event) {
            $T.UI.MaskLayer.Modals.push(div);
            $T.UI.MaskLayer.Show(0.2);
            if ($T.UI.MaskLayer.DOM) {
                $T.UI.MaskLayer.DOM.style.zIndex = 999999;
                div.style.zIndex = 1000000;
            }
            $T.UI.AlwaysVisible.Show(div);
            document.body.appendChild(div);
        };
        div.handlerCancel = handlerCancel;
        div.handlerOk = handlerOk;
        div.parentModal = parentModal;
        $T.Util.ExecuteOnLoaded(appendConfirm);
        $T.UI.Confirm.DOM = div;
    }
};
$T.UI.Confirm.Close = function() {
    if ($T.UI.Confirm.DOM) {
        Element.remove($T.UI.Confirm.DOM);
        if ($T.UI.MaskLayer.DOM && $T.UI.Confirm.DOM.parentModal) {
            $T.UI.MaskLayer.DOM.style.zIndex = '';
        }
        $T.UI.MaskLayer.Close();
        $T.UI.Confirm.DOM = null;
    }
};
var $confirm = $T.UI.Confirm.Show;
$confirm.ok = function() {
    if ($T.UI.Confirm.DOM) {
        var handlerOk = $T.UI.Confirm.DOM.handlerOk;
        $T.UI.Confirm.Close();
        if (handlerOk) {
            handlerOk();
        }
    }
};
$confirm.cancel = function() {
    if ($T.UI.Confirm.DOM) {
        var handlerCancel = $T.UI.Confirm.DOM.handlerCancel;
        $T.UI.Confirm.Close();
        if (handlerCancel) {
            handlerCancel();
        }
    }
};

$T.UI.Alert = {};
$T.UI.Alert.DOM = null;
$T.UI.Alert.Show = function(title, content, cssClass, handlerOk, parentModal, template) {
    if (!$T.UI.Alert.DOM) {
        var div = document.createElement('div');
        div.className = cssClass;
        if (!template)
            template = '<h2>#{title}</h2><div class="close"><a href="javascript:void($alert.ok());">关闭</a></div><div class="bot">#{content}<p><input type="button" class="button_queding" onclick="javascript:void($alert.ok());"/></p></div>';
        div.innerHTML = new Template(template).evaluate({ 'title': title, 'content': content });
        var appendAlert = function(event) {
            $T.UI.MaskLayer.Modals.push(div);
            $T.UI.MaskLayer.Show(0.2);
            if ($T.UI.MaskLayer.DOM) {
                $T.UI.MaskLayer.DOM.style.zIndex = 999999;
                div.style.zIndex = 1000000;
            }

            $T.UI.AlwaysVisible.Show(div);
            document.body.appendChild(div);
        };
        div.handlerOk = handlerOk;
        div.parentModal = parentModal;
        $T.Util.ExecuteOnLoaded(appendAlert);
        $T.UI.Alert.DOM = div;
    }
};
$T.UI.Alert.Close = function() {
    if ($T.UI.Alert.DOM) {
        Element.remove($T.UI.Alert.DOM);
        if ($T.UI.MaskLayer.DOM && $T.UI.Alert.DOM.parentModal) {
            $T.UI.MaskLayer.DOM.style.zIndex = '';
        }
        $T.UI.MaskLayer.Close();
        $T.UI.Alert.DOM = null;
    }
};
var $alert = $T.UI.Alert.Show;
$alert.ok = function() {
    if ($T.UI.Alert.DOM) {
        var handlerOk = $T.UI.Alert.DOM.handlerOk;
        $T.UI.Alert.Close();
        if (handlerOk) {
            handlerOk();
        }
    }
};

$T.UI.DropDownPicker = {};
$T.UI.DropDownPicker.DOM = null;
$T.UI.DropDownPicker.Show = function(containerDOM, cssClass, handlerOk, handlerCancel) {
    if (!$T.UI.DropDownPicker.DOM) {
        var picker = document.createElement('div');
        picker.handlerOk = handlerOk;
        picker.handlerCancel = handlerCancel;
        $T.UI.DropDownPicker.DOM = picker;
        if (cssClass)
            picker.className = cssClass;

        $(containerDOM).appendChild(picker);
        var autoCancel = function(event) {
            document.stopObserving('click', autoCancel);
            $picker.cancel();
        };
        Event.observe(picker, 'mouseout', function(event) {
            if (event.element() == picker || Element.descendantOf(event.element(), picker)) {
                document.observe('click', autoCancel);
            }
        });
        Event.observe(picker, 'mouseover', function(event) {
            document.stopObserving('click', autoCancel);
        });
        document.observe('click', autoCancel);
    }
};
$T.UI.DropDownPicker.Close = function() {
    if ($T.UI.DropDownPicker.DOM) {
        $T.UI.DropDownPicker.DOM.parentNode.removeChild($T.UI.DropDownPicker.DOM);
        $T.UI.DropDownPicker.DOM = null;
    }
};
$picker = $T.UI.DropDownPicker.Show;
$picker.ok = function(data) {
    if ($T.UI.DropDownPicker.DOM) {
        var handlerOk = $T.UI.DropDownPicker.DOM.handlerOk;
        if (handlerOk) {
            handlerOk(data);
        }
        $T.UI.DropDownPicker.Close();
    }
};
$picker.cancel = function() {
    if ($T.UI.DropDownPicker.DOM) {
        var handlerCancel = $T.UI.DropDownPicker.handlerCancel;
        if (handlerCancel) {
            handlerCancel();
        }
        $T.UI.DropDownPicker.Close();
    }
};
$picker.DOM = $T.UI.DropDownPicker.DOM;

$T.UI.ColorPicker = {};
$T.UI.ColorPicker.Colors = [
    '#000000', '#770000', '#773300', '#777700', '#007700', '#003377', '#000077', '#770077',
    '#333333', '#BB0000', '#BB5500', '#BBBB00', '#00BB00', '#0055BB', '#0000BB', '#BB00BB',
    '#777777', '#FF0000', '#FF7700', '#FFFF00', '#00FF00', '#0077FF', '#0000FF', '#FF00FF',
    '#BBBBBB', '#FF5555', '#FF9900', '#FFFF55', '#55FF55', '#0099FF', '#5555FF', '#FF55FF',
    '#FFFFFF', '#FFBBBB', '#FFBB00', '#FFFFBB', '#BBFFBB', '#00BBFF', '#BBBBFF', '#FFBBFF'];
$T.UI.ColorPicker.Temlate = new Template('\
<table>\
    <colgroup>\
        <col />\
        <col />\
        <col />\
        <col />\
        <col />\
        <col />\
        <col />\
        <col />\
    </colgroup>\
    <tbody align="center">\
        <tr>\
            <td><a href="javascript:void($colorPicker.ok(\'#{0}\'));" style="background-color: #{0};"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{1}\'));" style="background-color: #{1}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{2}\'));" style="background-color: #{2}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{3}\'));" style="background-color: #{3}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{4}\'));" style="background-color: #{4}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{5}\'));" style="background-color: #{5}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{6}\'));" style="background-color: #{6}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{7}\'));" style="background-color: #{7}"></a></td>\
        </tr>\
        <tr>\
            <td><a href="javascript:void($colorPicker.ok(\'#{8}\'));" style="background-color: #{8}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{9}\'));" style="background-color: #{9}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{10}\'));" style="background-color: #{10}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{11}\'));" style="background-color: #{11}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{12}\'));" style="background-color: #{12}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{13}\'));" style="background-color: #{13}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{14}\'));" style="background-color: #{14}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{15}\'));" style="background-color: #{15}"></a></td>\
        </tr>\
        <tr>\
            <td><a href="javascript:void($colorPicker.ok(\'#{16}\'));" style="background-color: #{16}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{17}\'));" style="background-color: #{17}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{18}\'));" style="background-color: #{18}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{19}\'));" style="background-color: #{19}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{20}\'));" style="background-color: #{20}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{21}\'));" style="background-color: #{21}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{22}\'));" style="background-color: #{22}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{23}\'));" style="background-color: #{23}"></a></td>\
        </tr>\
        <tr>\
            <td><a href="javascript:void($colorPicker.ok(\'#{24}\'));" style="background-color: #{24}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{25}\'));" style="background-color: #{25}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{26}\'));" style="background-color: #{26}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{27}\'));" style="background-color: #{27}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{28}\'));" style="background-color: #{28}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{29}\'));" style="background-color: #{29}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{30}\'));" style="background-color: #{30}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{31}\'));" style="background-color: #{31}"></a></td>\
        </tr>\
        <tr>\
            <td><a href="javascript:void($colorPicker.ok(\'#{32}\'));" style="background-color: #{32}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{33}\'));" style="background-color: #{33}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{34}\'));" style="background-color: #{34}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{35}\'));" style="background-color: #{35}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{36}\'));" style="background-color: #{36}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{37}\'));" style="background-color: #{37}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{38}\'));" style="background-color: #{38}"></a></td>\
            <td><a href="javascript:void($colorPicker.ok(\'#{39}\'));" style="background-color: #{39}"></a></td>\
        </tr>\
    </tbody>\
</table>\
');
$T.UI.ColorPicker.Show = function(containerDOM, cssClass, handlerOk, handlerCancel) {
    if (!$T.UI.DropDownPicker.DOM) {
        $picker(containerDOM, cssClass, handlerOk, handlerCancel);
        $T.UI.DropDownPicker.DOM.innerHTML = $T.UI.ColorPicker.Temlate.evaluate($T.UI.ColorPicker.Colors);
    }
};
$T.UI.ColorPicker.Close = $T.UI.DropDownPicker.Close();
$colorPicker = $T.UI.ColorPicker.Show;
$colorPicker.ok = $picker.ok;
$colorPicker.cancel = $picker.cancel;

$T.UI.Calendar = {};
$T.UI.Calendar.Dates = [];
$T.UI.Calendar.Template = new Template('\
<table>\
    <colgroup>\
        <col />\
        <col />\
        <col />\
        <col />\
        <col />\
        <col />\
        <col />\
    </colgroup>\
    <tbody align="center">\
        <tr>\
            <td><a href="javascript:void($calendar.PreviousYear());">&lt;&lt;</a></td>\
            <td><a href="javascript:void($calendar.PreviousMonth());">&lt;</a></td>\
            <td colspan="3">\
                <div class="calendardropdown"><ol class="getyear" style="display: none;"></ol></div>\
                <div class="calendardropdown"><ol class="getmonth" style="display: none;"></ol></div>\
                <a href="javascript:void($calendar.ShowYearPage(#{Year}));">#{Year}</a> - <a href="javascript:void($calendar.ShowMonthPage());">#{Month}</a>\
            </td>\
            <td><a href="javascript:void($calendar.NextMonth());">&gt;</a></td>\
            <td><a href="javascript:void($calendar.NextYear());">&gt;&gt;</a></td>\
        </tr>\
        <tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>\
        <tr>\
            <td class="#{2}"><a href="javascript:void($calendar.ok(\'#{0}\'));">#{1}</a></td>\
            <td class="#{5}"><a href="javascript:void($calendar.ok(\'#{3}\'));">#{4}</a></td>\
            <td class="#{8}"><a href="javascript:void($calendar.ok(\'#{6}\'));">#{7}</a></td>\
            <td class="#{11}"><a href="javascript:void($calendar.ok(\'#{9}\'));">#{10}</a></td>\
            <td class="#{14}"><a href="javascript:void($calendar.ok(\'#{12}\'));">#{13}</a></td>\
            <td class="#{17}"><a href="javascript:void($calendar.ok(\'#{15}\'));">#{16}</a></td>\
            <td class="#{20}"><a href="javascript:void($calendar.ok(\'#{18}\'));">#{19}</a></td>\
        </tr>\
        <tr>\
            <td class="#{23}"><a href="javascript:void($calendar.ok(\'#{21}\'));">#{22}</a></td>\
            <td class="#{26}"><a href="javascript:void($calendar.ok(\'#{24}\'));">#{25}</a></td>\
            <td class="#{29}"><a href="javascript:void($calendar.ok(\'#{27}\'));">#{28}</a></td>\
            <td class="#{32}"><a href="javascript:void($calendar.ok(\'#{30}\'));">#{31}</a></td>\
            <td class="#{35}"><a href="javascript:void($calendar.ok(\'#{33}\'));">#{34}</a></td>\
            <td class="#{38}"><a href="javascript:void($calendar.ok(\'#{36}\'));">#{37}</a></td>\
            <td class="#{41}"><a href="javascript:void($calendar.ok(\'#{39}\'));">#{40}</a></td>\
        </tr>\
        <tr>\
            <td class="#{44}"><a href="javascript:void($calendar.ok(\'#{42}\'));">#{43}</a></td>\
            <td class="#{47}"><a href="javascript:void($calendar.ok(\'#{45}\'));">#{46}</a></td>\
            <td class="#{50}"><a href="javascript:void($calendar.ok(\'#{48}\'));">#{49}</a></td>\
            <td class="#{53}"><a href="javascript:void($calendar.ok(\'#{51}\'));">#{52}</a></td>\
            <td class="#{56}"><a href="javascript:void($calendar.ok(\'#{54}\'));">#{55}</a></td>\
            <td class="#{59}"><a href="javascript:void($calendar.ok(\'#{57}\'));">#{58}</a></td>\
            <td class="#{62}"><a href="javascript:void($calendar.ok(\'#{60}\'));">#{61}</a></td>\
        </tr>\
        <tr>\
            <td class="#{65}"><a href="javascript:void($calendar.ok(\'#{63}\'));">#{64}</a></td>\
            <td class="#{68}"><a href="javascript:void($calendar.ok(\'#{66}\'));">#{67}</a></td>\
            <td class="#{71}"><a href="javascript:void($calendar.ok(\'#{69}\'));">#{70}</a></td>\
            <td class="#{74}"><a href="javascript:void($calendar.ok(\'#{72}\'));">#{73}</a></td>\
            <td class="#{77}"><a href="javascript:void($calendar.ok(\'#{75}\'));">#{76}</a></td>\
            <td class="#{80}"><a href="javascript:void($calendar.ok(\'#{78}\'));">#{79}</a></td>\
            <td class="#{83}"><a href="javascript:void($calendar.ok(\'#{81}\'));">#{82}</a></td>\
        </tr>\
        <tr>\
            <td class="#{86}"><a href="javascript:void($calendar.ok(\'#{84}\'));">#{85}</a></td>\
            <td class="#{89}"><a href="javascript:void($calendar.ok(\'#{87}\'));">#{88}</a></td>\
            <td class="#{92}"><a href="javascript:void($calendar.ok(\'#{90}\'));">#{91}</a></td>\
            <td class="#{95}"><a href="javascript:void($calendar.ok(\'#{93}\'));">#{94}</a></td>\
            <td class="#{98}"><a href="javascript:void($calendar.ok(\'#{96}\'));">#{97}</a></td>\
            <td class="#{101}"><a href="javascript:void($calendar.ok(\'#{99}\'));">#{100}</a></td>\
            <td class="#{104}"><a href="javascript:void($calendar.ok(\'#{102}\'));">#{103}</a></td>\
        </tr>\
        <tr>\
            <td class="#{107}"><a href="javascript:void($calendar.ok(\'#{105}\'));">#{106}</a></td>\
            <td class="#{110}"><a href="javascript:void($calendar.ok(\'#{108}\'));">#{109}</a></td>\
            <td class="#{113}"><a href="javascript:void($calendar.ok(\'#{111}\'));">#{112}</a></td>\
            <td class="#{116}"><a href="javascript:void($calendar.ok(\'#{114}\'));">#{115}</a></td>\
            <td class="#{119}"><a href="javascript:void($calendar.ok(\'#{117}\'));">#{118}</a></td>\
            <td class="#{122}"><a href="javascript:void($calendar.ok(\'#{120}\'));">#{121}</a></td>\
            <td class="#{125}"><a href="javascript:void($calendar.ok(\'#{123}\'));">#{124}</a></td>\
        </tr>\
    </tbody>\
</table>');
$T.UI.Calendar.SetYearTemplate = new Template('\
<li class="#{1}"><a href="javascript:void($calendar.SetYear(#{0}));">#{0}</a></li>\
<li class="#{3}"><a href="javascript:void($calendar.SetYear(#{2}));">#{2}</a></li>\
<li class="#{5}"><a href="javascript:void($calendar.SetYear(#{4}));">#{4}</a></li>\
<li class="#{7}"><a href="javascript:void($calendar.SetYear(#{6}));">#{6}</a></li>\
<li class="#{9}"><a href="javascript:void($calendar.SetYear(#{8}));">#{8}</a></li>\
<li class="#{11}"><a href="javascript:void($calendar.SetYear(#{10}));">#{10}</a></li>\
<li class="#{13}"><a href="javascript:void($calendar.SetYear(#{12}));">#{12}</a></li>\
<li class="#{15}"><a href="javascript:void($calendar.SetYear(#{14}));">#{14}</a></li>\
<li class="#{17}"><a href="javascript:void($calendar.SetYear(#{16}));">#{16}</a></li>\
<li class="#{19}"><a href="javascript:void($calendar.SetYear(#{18}));">#{18}</a></li>\
<li class="#{21}"><a href="javascript:void($calendar.SetYear(#{20}));">#{20}</a></li>\
<li class="#{23}"><a href="javascript:void($calendar.SetYear(#{22}));">#{22}</a></li>\
<li class="#{25}"><a href="javascript:void($calendar.SetYear(#{24}));">#{24}</a></li>\
<li class="#{27}"><a href="javascript:void($calendar.SetYear(#{26}));">#{26}</a></li>\
<li class="#{29}"><a href="javascript:void($calendar.SetYear(#{28}));">#{28}</a></li>\
<li class="#{31}"><a href="javascript:void($calendar.SetYear(#{30}));">#{30}</a></li>\
<li class="#{33}"><a href="javascript:void($calendar.SetYear(#{32}));">#{32}</a></li>\
<li class="#{35}"><a href="javascript:void($calendar.SetYear(#{34}));">#{34}</a></li>\
<li class="#{37}"><a href="javascript:void($calendar.SetYear(#{36}));">#{36}</a></li>\
<li class="#{39}"><a href="javascript:void($calendar.SetYear(#{38}));">#{38}</a></li>\
<li><a href="javascript:void($calendar.PreviousYearPage());">上二十年</a></li>\
<li></li>\
<li></li>\
<li><a href="javascript:void($calendar.NextYearPage());">下二十年</a></li>');
$T.UI.Calendar.SetMonthTemplate = new Template('\
<li class="#{1}"><a href="javascript:void($calendar.SetMonth(#{0}));">一月</a></li>\
<li class="#{3}"><a href="javascript:void($calendar.SetMonth(#{2}));">二月</a></li>\
<li class="#{5}"><a href="javascript:void($calendar.SetMonth(#{4}));">三月</a></li>\
<li class="#{7}"><a href="javascript:void($calendar.SetMonth(#{6}));">四月</a></li>\
<li class="#{9}"><a href="javascript:void($calendar.SetMonth(#{8}));">五月</a></li>\
<li class="#{11}"><a href="javascript:void($calendar.SetMonth(#{10}));">六月</a></li>\
<li class="#{13}"><a href="javascript:void($calendar.SetMonth(#{12}));">七月</a></li>\
<li class="#{15}"><a href="javascript:void($calendar.SetMonth(#{14}));">八月</a></li>\
<li class="#{17}"><a href="javascript:void($calendar.SetMonth(#{16}));">九月</a></li>\
<li class="#{19}"><a href="javascript:void($calendar.SetMonth(#{18}));">十月</a></li>\
<li class="#{21}"><a href="javascript:void($calendar.SetMonth(#{20}));">十一月</a></li>\
<li class="#{23}"><a href="javascript:void($calendar.SetMonth(#{22}));">十二月</a></li>\
');
$T.UI.Calendar.Show = function(date, containerDOM, cssClass, handlerOk, handlerCancel) {
    if (!$T.UI.DropDownPicker.DOM) {
        date = new $date(date);
        $picker(containerDOM, cssClass, handlerOk, handlerCancel);
        var calendar = $T.UI.DropDownPicker.DOM;
        calendar.OriginalDate = new $date(date);
        $T.UI.Calendar.SetDate(date);
    }
};
$T.UI.Calendar.SetDate = function(date) {
    var firstDate = $date.AddDays(date, 1 - $date.GetFirtDayOfMonth(date) - date.getDate());
    if ($T.UI.DropDownPicker.DOM) {
        $T.UI.DropDownPicker.DOM.innerHTML = '';
        $T.UI.DropDownPicker.DOM.Date = date;
        $T.UI.Calendar.Dates.Year = date.getFullYear().toPaddedString(4);
        $T.UI.Calendar.Dates.Month = (date.getMonth() + 1).toPaddedString(2);

        $T.UI.Calendar.Dates.length = 0;
        for (var i = 0; i < 42; i++) {
            var ithDate = $date.AddDays(firstDate, i);
            $T.UI.Calendar.Dates.push(ithDate.toDateString());
            $T.UI.Calendar.Dates.push(ithDate.getDate().toPaddedString(2));
            $T.UI.Calendar.Dates.push($date.ToString(ithDate, 'yyyyMMdd') == $date.ToString($T.UI.DropDownPicker.DOM.OriginalDate, 'yyyyMMdd') ? 'current' : $date.ToString(ithDate, 'MM') != $date.ToString($T.UI.DropDownPicker.DOM.Date, 'MM') ? 'othermonth' : null);
        }
        $T.UI.DropDownPicker.DOM.innerHTML = $T.UI.Calendar.Template.evaluate($T.UI.Calendar.Dates);
        $T.UI.DropDownPicker.DOM.YearSelector = Element.getElementsBySelector($T.UI.DropDownPicker.DOM, '.getyear')[0];
        $T.UI.DropDownPicker.DOM.MonthSelector = Element.getElementsBySelector($T.UI.DropDownPicker.DOM, '.getmonth')[0];
    }
};
$T.UI.Calendar.Show.ShowYearPage = function(year) {
    if ($T.UI.DropDownPicker.DOM) {
        $T.UI.DropDownPicker.DOM.MonthSelector.style.display = 'none';
        var ddl = $T.UI.DropDownPicker.DOM.YearSelector;
        ddl.Year = year;
        var years = [];
        ddl.yearFrom = year - year % 20;
        var curYear = $T.UI.DropDownPicker.DOM.Date.getFullYear();
        for (var i = 0; i < 20; i++) {
            years.push(ddl.yearFrom + i);
            years.push(curYear == ddl.yearFrom + i ? 'current' : null);
        }
        ddl.innerHTML = $T.UI.Calendar.SetYearTemplate.evaluate(years);
        ddl.style.display = 'block';
    }
};
$T.UI.Calendar.Show.NextYearPage = function() {
    if ($T.UI.DropDownPicker.DOM) {
        var ddl = $T.UI.DropDownPicker.DOM.YearSelector;
        $calendar.ShowYearPage(ddl.yearFrom + 20);
    }
};
$T.UI.Calendar.Show.PreviousYearPage = function() {
    if ($T.UI.DropDownPicker.DOM) {
        var ddl = $T.UI.DropDownPicker.DOM.YearSelector;
        $calendar.ShowYearPage(ddl.yearFrom - 20);
    }
};
$T.UI.Calendar.Show.SetYear = function(year) {
    if ($T.UI.DropDownPicker.DOM) {
        var ddl = $T.UI.DropDownPicker.DOM.YearSelector;
        ddl.innerHTML = '';
        ddl.style.display = 'none';
        $T.UI.DropDownPicker.DOM.Date.setYear(year);
        $T.UI.Calendar.SetDate($T.UI.DropDownPicker.DOM.Date);
    }
};
$T.UI.Calendar.Show.ShowMonthPage = function() {
    if ($T.UI.DropDownPicker.DOM) {
        $T.UI.DropDownPicker.DOM.YearSelector.style.display = 'none';
        var ddl = $T.UI.DropDownPicker.DOM.MonthSelector;
        var months = [];
        var curMonth = $T.UI.DropDownPicker.DOM.Date.getMonth();
        for (var i = 0; i < 12; i++) {
            months.push(i);
            months.push(curMonth == i ? 'current' : null);
        }
        ddl.innerHTML = $T.UI.Calendar.SetMonthTemplate.evaluate(months);
        ddl.style.display = 'block';
    }
};
$T.UI.Calendar.Show.SetMonth = function(month) {
    if ($T.UI.DropDownPicker.DOM) {
        var ddl = $T.UI.DropDownPicker.DOM.MonthSelector;
        ddl.innerHTML = '';
        ddl.style.display = 'none';
        $T.UI.DropDownPicker.DOM.Date.setMonth(month);
        $T.UI.DropDownPicker.DOM.Date.setMonth(month);
        $T.UI.Calendar.SetDate($T.UI.DropDownPicker.DOM.Date);
    }
};
$T.UI.Calendar.Show.NextMonth = function() {
    if ($T.UI.DropDownPicker.DOM) {
        var nextMonth = new $date($T.UI.DropDownPicker.DOM.Date);
        nextMonth.setDate(1);
        nextMonth = $date.AddMonths(nextMonth, 1)
        $T.UI.Calendar.SetDate(nextMonth);
    }
};
$T.UI.Calendar.Show.PreviousMonth = function() {
    if ($T.UI.DropDownPicker.DOM) {
        var prevMonth = new $date($T.UI.DropDownPicker.DOM.Date);
        prevMonth.setDate(1);
        prevMonth = $date.AddDays(prevMonth, -1)
        $T.UI.Calendar.SetDate(prevMonth);
    }
};
$T.UI.Calendar.Show.NextYear = function() {
    if ($T.UI.DropDownPicker.DOM) {
        $T.UI.Calendar.SetDate($date.AddYears($T.UI.DropDownPicker.DOM.Date, 1));
    }
};
$T.UI.Calendar.Show.PreviousYear = function() {
    if ($T.UI.DropDownPicker.DOM) {
        $T.UI.Calendar.SetDate($date.AddYears($T.UI.DropDownPicker.DOM.Date, -1));
    }
};
$T.UI.Calendar.Close = $T.UI.DropDownPicker.Close;
$calendar = $T.UI.Calendar.Show;
$calendar.ok = $picker.ok;
$calendar.cancel = $picker.cancel;