window.cyui = {};
cyui.browser = {};
cyui.browser.userAgent = navigator.userAgent.toLowerCase();
cyui.browser.isOpera = (cyui.browser.userAgent.indexOf('opera') != -1);
cyui.browser.isSafari = (cyui.browser.userAgent.indexOf('safari') != -1);
cyui.browser.isIE = (cyui.browser.userAgent.indexOf('msie') != -1 && !cyui.browser.isOpera);
cyui.browser.isFF = (cyui.browser.userAgent.indexOf('firefox') != -1);
cyui.$ = function(id) {
    return document.getElementById(id);
};
cyui.$T = function(name, root) {
    if (name.match(':')) {
        var str = name.split(':');
        var elements = (root || document).getElementsByTagName(str[0]);
        if (elements.length == 0) return undefined;
        var element = [];
        var l = elements.length;
        for (var i = 0; i < l; i++) if (elements[i].type == str[1]) element.push(elements[i]);
        return element;
    } else {
        var element = (root || document).getElementsByTagName(name);
        if (element.length == 0) element = undefined;
        return element;
    }
};
cyui.dom = {};
cyui.dom._getPosition_ie = function(element, parentElement) {
    var parent = null;
    var pos = { x: 0, y: 0 };

    var rect = element.getBoundingClientRect();
    pos.x = rect.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
    pos.y = rect.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    rect = null;

    if (parentElement) {
        var ppos = this._getPosition_ie(parentElement);
        pos.x -= ppos.x;
        pos.y -= ppos.y;
        parentElement = null;
        ppos = null;
    }
    element = null;
    parent = null;
    return { x: isNaN(pos.x) ? 0 : pos.x, y: isNaN(pos.y) ? 0 : pos.y };
};
cyui.dom._getPosition_ff = function(element, parentElement) {
    var parent = null;
    var pos = { x: 0, y: 0 };

    var rect = document.getBoxObjectFor(element);
    pos = { x: rect.x, y: rect.y };
    rect = null;

    if (element.parentNode) { parent = element.parentNode; }
    else { parent = null; }

    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {
        pos.x -= parent.scrollLeft;
        pos.y -= parent.scrollTop;

        if (parent.parentNode) { parent = parent.parentNode; }
        else { parent = null; }
    }

    if (parentElement) {
        var ppos = this._getPosition_ff(parentElement);
        pos.x -= ppos.x;
        pos.y -= ppos.y;
        parentElement = null;
        ppos = null;
    }
    element = null;
    parent = null;
    return { x: isNaN(pos.x) ? 0 : pos.x, y: isNaN(pos.y) ? 0 : pos.y };
};
cyui.dom._getPosition_etc = function(element, parentElement) {
    var parent = null;
    var pos = { x: 0, y: 0 };

    pos = { x: element.offsetLeft, y: element.offsetTop };
    parent = element.offsetParent;
    if (parent != element) {
        while (parent) {
            pos.x += parent.offsetLeft;
            pos.y += parent.offsetTop;
            parent = parent.offsetParent;
        }
    }
    if (cyui.browser.isOpera || (cyui.browser.isSafari && element.style.position == 'absolute')) {
        pos.x -= document.body.offsetLeft;
        pos.y -= document.body.offsetTop;
    }

    if (parentElement) {
        var ppos = this._getPosition_etc(parentElement);
        pos.x -= ppos.x;
        pos.y -= ppos.y;
        parentElement = null;
        ppos = null;
    }
    element = null;
    parent = null;
    return { x: isNaN(pos.x) ? 0 : pos.x, y: isNaN(pos.y) ? 0 : pos.y };
};
cyui.dom._getPosition = null,
cyui.dom.getPos = function(element, parentElement) {
    if (!cyui.dom._getPosition) {
        if (element.getBoundingClientRect) cyui.dom._getPosition = cyui.dom._getPosition_ie;
        else if (document.getBoxObjectFor) cyui.dom._getPosition = cyui.dom._getPosition_ff;
        else cyui.dom._getPosition = cyui.dom._getPosition_etc;
    }
    return cyui.dom._getPosition(element, parentElement);
};
cyui.dom.getPadding = function(element) {
    var l = parseInt(cyui.style.get(element, 'paddingLeft'), 10);
    var t = parseInt(cyui.style.get(element, 'paddingTop'), 10);
    var r = parseInt(cyui.style.get(element, 'paddingRight'), 10);
    var b = parseInt(cyui.style.get(element, 'paddingBottom'), 10);
    return { left: isNaN(l) ? 0 : l, top: isNaN(t) ? 0 : t, right: isNaN(r) ? 0 : r, bottom: isNaN(b) ? 0 : b };
};
cyui.dom.getSize = function(element) {
    return { width: element.offsetWidth, height: element.offsetHeight };
};
cyui.dom.getBorderWidth = function(element) {
    var l = parseInt(cyui.style.get(element, 'borderLeftWidth'), 10);
    var t = parseInt(cyui.style.get(element, 'borderTopWidth'), 10);
    var r = parseInt(cyui.style.get(element, 'borderRightWidth'), 10);
    var b = parseInt(cyui.style.get(element, 'borderBottomWidth'), 10);
    return { left: isNaN(l) ? 0 : l, top: isNaN(t) ? 0 : t, right: isNaN(r) ? 0 : r, bottom: isNaN(b) ? 0 : b };
};
cyui.event = {};
cyui.event.hnd = [];
cyui.event.Dispatcher = function() {
    var q = {};
    this.addListener = function(evt, fnc, tar, args) {
        if (!q[evt]) q[evt] = [];
        q[evt].push([fnc, tar, args]);
        return true;
    };
    this.removeListener = function(evt, fnc) {
        if (!q[evt]) return false;
        var l = q[evt].length;
        for (var i = 0; i < l; i++) {
            if (q[evt][i][0] == fnc) {
                q[evt].splice(i, 1);
                return true;
            }
        }
    };
    this.dispatch = function(evt) {
        if (!q[evt]) return false;
        var l = q[evt].length;
        for (var i = 0; i < l; i++) {
            if (q[evt][i][1] && q[evt][i][2]) q[evt][i][0].apply(q[evt][i][1], q[evt][i][2]);
            else q[evt][i][0]();
        }
        return true;
    };
};
cyui.event.remove = function(hnd) {
    if (window.removeEventListener) hnd[0].removeEventListener(hnd[1], hnd[2], false);
    else if (window.detachEvent) hnd[0].detachEvent('on' + hnd[1], hnd[2]);
};
cyui.event.TweenEvent = {
    TWEEN_COMPLETE: 'tweenComplete'
};
cyui.event.add = function(obj, evt, fnc) {
    if (window.addEventListener) obj.addEventListener(evt, fnc, false);
    else if (window.attachEvent) obj.attachEvent('on' + evt, fnc);
    return [obj, evt, fnc];
};
cyui.transition = {};
cyui.transition.ease = {
    easeNone: function(t, b, c, d) {
        return c * t / d + b;
    },
    easeInQuad: function(t, b, c, d) {
        return c * (t /= d) * t + b;
    },
    easeOutQuad: function(t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b;
    },
    easeInOutQuad: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    },
    easeOutInQuad: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutQuad(t * 2, b, c / 2, d);
        return ease.easeInQuad((t * 2) - d, b + c / 2, c / 2, d);
    },
    easeInCubic: function(t, b, c, d) {
        return c * (t /= d) * t * t + b;
    },
    easeOutCubic: function(t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b;
    },
    easeInOutCubic: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
        return c / 2 * ((t -= 2) * t * t + 2) + b;
    },
    easeOutInCubic: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutCubic(t * 2, b, c / 2, d);
        return ease.easeInCubic((t * 2) - d, b + c / 2, c / 2, d);
    },
    easeInQuart: function(t, b, c, d) {
        return c * (t /= d) * t * t * t + b;
    },
    easeOutQuart: function(t, b, c, d) {
        return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    },
    easeInOutQuart: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    },
    easeOutInQuart: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutQuart(t * 2, b, c / 2, d);
        return ease.easeInQuart((t * 2) - d, b + c / 2, c / 2, d);
    },
    easeInQuint: function(t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b;
    },
    easeOutQuint: function(t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
    },
    easeInOutQuint: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
    },
    easeOutInQuint: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutQuint(t * 2, b, c / 2, d);
        return ease.easeInQuint((t * 2) - d, b + c / 2, c / 2, d);
    },
    easeInSine: function(t, b, c, d) {
        return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
    },
    easeOutSine: function(t, b, c, d) {
        return c * Math.sin(t / d * (Math.PI / 2)) + b;
    },
    easeInOutSine: function(t, b, c, d) {
        return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
    },
    easeOutInSine: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutSine(t * 2, b, c / 2, d);
        return ease.easeInSine((t * 2) - d, b + c / 2, c / 2, d);
    },
    easeInExpo: function(t, b, c, d) {
        return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b - c * 0.001;
    },
    easeOutExpo: function(t, b, c, d) {
        return (t == d) ? b + c : c * 1.001 * (-Math.pow(2, -10 * t / d) + 1) + b;
    },
    easeInOutExpo: function(t, b, c, d) {
        if (t == 0) return b;
        if (t == d) return b + c;
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b - c * 0.0005;
        return c / 2 * 1.0005 * (-Math.pow(2, -10 * --t) + 2) + b;
    },
    easeOutInExpo: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutExpo(t * 2, b, c / 2, d);
        return ease.easeInExpo((t * 2) - d, b + c / 2, c / 2, d);
    },
    easeInCirc: function(t, b, c, d) {
        return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
    },
    easeOutCirc: function(t, b, c, d) {
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
    },
    easeInOutCirc: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
    },
    easeOutInCirc: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutCirc(t * 2, b, c / 2, d);
        return ease.easeInCirc((t * 2) - d, b + c / 2, c / 2, d);
    },
    easeInElastic: function(t, b, c, d) {
        var p;
        if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
        var s, a;
        if (!a || a < Math.abs(c)) { a = c; s = p / 4; }
        else s = p / (2 * Math.PI) * Math.asin(c / a);
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    },
    easeOutElastic: function(t, b, c, d) {
        var p;
        if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
        var s, a;
        if (!a || a < Math.abs(c)) { a = c; s = p / 4; }
        else s = p / (2 * Math.PI) * Math.asin(c / a);
        return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
    },
    easeInOutElastic: function(t, b, c, d) {
        var p;
        if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
        var s;
        var a;
        if (!a || a < Math.abs(c)) { a = c; s = p / 4; }
        else s = p / (2 * Math.PI) * Math.asin(c / a);
        if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
    },
    easeOutInElastic: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutElastic(t * 2, b, c / 2, d, a, p);
        return ease.easeInElastic((t * 2) - d, b + c / 2, c / 2, d, a, p);
    },
    easeInBack: function(t, b, c, d) {
        var s;
        if (!s) s = 1.70158;
        return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    easeOutBack: function(t, b, c, d) {
        var s;
        if (!s) s = 1.70158;
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    easeInOutBack: function(t, b, c, d) {
        var s;
        if (!s) s = 1.70158;
        if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
    },
    easeOutInBack: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutBack(t * 2, b, c / 2, d, s);
        return ease.easeInBack((t * 2) - d, b + c / 2, c / 2, d, s);
    },
    easeInBounce: function(t, b, c, d) {
        return c - ease.easeOutBounce(d - t, 0, c, d) + b;
    },
    easeOutBounce: function(t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b;
        } else if (t < (2 / 2.75)) {
            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
        } else if (t < (2.5 / 2.75)) {
            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
        } else {
            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
        }
    },
    easeInOutBounce: function(t, b, c, d) {
        if (t < d / 2) return ease.easeInBounce(t * 2, 0, c, d) * .5 + b;
        else return ease.easeOutBounce(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
    },
    easeOutInBounce: function(t, b, c, d) {
        if (t < d / 2) return ease.easeOutBounce(t * 2, b, c / 2, d);
        return ease.easeInBounce((t * 2) - d, b + c / 2, c / 2, d);
    }
};
cyui.transition.Tween = function(_oTarget, _sProperty, _iBegin, _iFinish, _sUnit, _iDuration, _iFrameRate, _sEaseType) {
    var _iIndex = null;
    var _iFrameSecond = null;
    var _hndTimer = null;
    var _aValue = [];
    var _hndListener = [];
    var _hndEventQueue = {};
    var _evtDispatcher = null;
    // Constructor
    var init = function() {
        // Check arguments
        if (_oTarget == null || _sProperty == null || _iBegin == null || _iFinish == null || _sUnit == null || !!!_iDuration || !!!_iFrameRate || !!!_sEaseType) {
            alert('Any argument is not input.');
            return false;
        } else if ((typeof _oTarget != 'object') || (typeof _sProperty != 'string') || (typeof _iBegin != 'number') || (typeof _iFinish != 'number') || (typeof _sUnit != 'string') || (typeof _iDuration != 'number') || (typeof _iFrameRate != 'number') || (typeof _sEaseType != 'string')) {
            alert('Any argument is not correct.');
            return false;
        }
        _evtDispatcher = new cyui.event.Dispatcher();
        vInitalize();
    };
    // Initalize
    var vInitalize = function() {
        _iIndex = -1;
        _iFrameSecond = 1000 / _iFrameRate;
        _aValue = aGetValue(_sEaseType);
    };
    // Get values
    var aGetValue = function(sEaseType) {
        var rtn = [];
        var dist = _iFinish - _iBegin;
        var l = _iFrameRate * _iDuration;
        for (var i = 1; i <= l; i++) rtn.push(Math.round(cyui.transition.ease[sEaseType](i, _iBegin, dist, l)));
        return rtn;
    };
    // Get begin
    this.getProperty = function() {
        return _sProperty;
    };
    // Set begin
    this.setProperty = function(sProperty) {
        if (typeof sProperty != 'string') return false;
        if (_hndTimer == null && _sProperty != sProperty) {
            _sProperty = sProperty;
            return true;
        }
    };
    // Get begin
    this.getBegin = function() {
        return _iBegin;
    };
    // Set begin
    this.setBegin = function(iBegin) {
        if (typeof iBegin != 'number') return false;
        if (_hndTimer == null && _iBegin != iBegin) {
            _iBegin = iBegin;
            vInitalize();
            return true;
        }
    };
    // Get finish
    this.getFinish = function() {
        return _iFinish;
    };
    // Set finish
    this.setFinish = function(iFinish) {
        if (typeof iFinish != 'number') return false;
        if (_hndTimer == null && _iFinish != iFinish) {
            _iFinish = iFinish;
            vInitalize();
            return true;
        }
    };
    // Get unit
    this.getUnit = function() {
        return _sUnit;
    };
    // Set unit
    this.setUnit = function(sUnit) {
        if (typeof sUnit != 'string') return false;
        _sUnit = sUnit;
        return true;
    };
    // Get position
    this.getPosition = function() {
        return _aValue[_iIndex];
    };
    // Set position
    this.setPosition = function(iIndex) {
        if (typeof iIndex != 'number') return false;
        if (_hndTimer == null && _iIndex != iIndex && iIndex < _aValue.length) _iIndex = iIndex;
        return true;
    };
    // Tween
    var vTween = function() {
        if (_iIndex + 1 < _aValue.length) {
            _iIndex++;
            _oTarget[_sProperty] = _aValue[_iIndex] + _sUnit;
            _hndTimer = setTimeout(vTween, _iFrameSecond);
        } else {
            clearTimeout(_hndTimer);
            _hndTimer = null;
            _evtDispatcher.dispatch(cyui.event.TweenEvent.TWEEN_COMPLETE);
        }
    };
    // Is play
    this.isPlay = function() {
        return !!_hndTimer;
    };
    // Start tween
    this.start = function() {
        if (_hndTimer == null) {
            _iIndex = -1;
            _hndTimer = setTimeout(vTween, _iFrameSecond);
        }
    };
    // Stop tween
    this.stop = function() {
        if (_hndTimer != null) {
            clearTimeout(_hndTimer);
            _hndTimer = null;
        }
    };
    // Add event
    this.addListener = function(sEventType, fncCallBack, oTarget, aArgs) {
        _evtDispatcher.addListener(sEventType, fncCallBack, oTarget, aArgs);
    };
    init();
};
cyui.float = function(_sTargetId, _iTop, _iDelay, _sEaseType) {
    var _iPosition = null;
    var _iTimer = null;
    var _twTween = null;
    var init = function() {
        // Check parameter
        if (!_sTargetId || typeof _sTargetId != 'string') {
            alert('Parameter is not input or type of parameter is wrong.');
            return false;
        }
        if (!_iTop || typeof _iTop != 'number') _iTop = 0;
        if (!_iDelay || typeof _iTop != 'number') _iDelay = 0;
        if (!_sEaseType || typeof _sEaseType != 'string') _sEaseType = 'easeOutCubic';
        // Choose when initalize
        if (!!cyui.$(_sTargetId)) {
            vInitalize();
            return true;
        } else {
            cyui.event.add(window, 'load', vInitalize);
        }
    };
    //Initalize
    var vInitalize = function() {
        if (!cyui.$(_sTargetId)) {
            alert('Argument for _sTargetId is not a id of document element.');
            return false;
        }
        _iPosition = !!document.documentElement.scrollTop ? document.documentElement.scrollTop + _iTop : document.body.scrollTop + _iTop;
        _twTween = new cyui.transition.Tween(cyui.$(_sTargetId).style, 'top', _iTop, _iTop, 'px', 0.5, 48, _sEaseType);
        cyui.event.add(window, 'scroll', hndScroll);
        vSetPosition();
    };
    //Scroll handler
    var hndScroll = function() {
        _iPosition = !!document.documentElement.scrollTop ? document.documentElement.scrollTop + _iTop : document.body.scrollTop + _iTop;
        if (_iTimer) {
            clearTimeout(_iTimer);
            _iTimer = null;
        }
        _iTimer = setTimeout(vSetPosition, 100);
    };
    //Set position when scroll
    var vSetPosition = function() {
        var posTop = !!document.documentElement.scrollTop ? document.documentElement.scrollTop + _iTop : document.body.scrollTop + _iTop;
        if (_iPosition == posTop) {
            if (_twTween.isPlay()) _twTween.stop();
            _twTween.setBegin(_twTween.getPosition());
            _twTween.setFinish(posTop);
            _twTween.start();
        }
    };
    init();
};
cyui.Scroll = function(_sTargetId, _sScrollCSS) {
    var _hndListener = [];
    var _iPosition = 0;
    var _iMouseOffset = null;
    var _iMouseY = null;
    var _elHandle = null;
    var _iRailHeight = null;
    var _iHandleHeight = null;
    var _bMouseDown = false;
    var _oOrgSize = null;
    var _iScrollWidth = null;
    // Constructor
    var init = function() {
        // Check arguments
        if (!_sTargetId || !_sScrollCSS) {
            alert('Any argument is not input.');
            return false;
        } else if ((typeof _sTargetId != 'string') || (typeof _sScrollCSS != 'string')) {
            alert('Any argument is not correct.');
            return false;
        }
        // Choose when initalize
        if (!!cyui.$(_sTargetId) && !!cyui.css.get('.' + _sScrollCSS)) {
            vInitalize();
            return true;
        } else {
            cyui.event.add(window, 'load', vInitalize);
        }
    };
    // Initalize
    var vInitalize = function() {
        if (!cyui.$(_sTargetId) || !cyui.css.get('.' + _sScrollCSS)) {
            alert('Argument for _sTargetId is not a id of document element.');
            return false;
        }
        var elTarget = cyui.$(_sTargetId);
        var elWrapper = document.createElement('DIV');
        // Swap element
        elTarget.parentNode.insertBefore(elWrapper, elTarget);
        elWrapper.appendChild(elTarget);
        _oOrgSize = cyui.dom.getSize(elTarget);
        var oScrollCSS = cyui.css.get('.' + _sScrollCSS);
        var aImage = oScrollCSS.backgroundImage.replace('url(', '').replace(')', '').split(',');
        var sOrgBorderWidth = cyui.dom.getBorderWidth(elTarget);
        var sOrgPadding = cyui.dom.getPadding(elTarget);
        _iScrollWidth = parseInt(oScrollCSS.width, 10);
        var oWrapSize = {};
        oWrapSize.width = _oOrgSize.width - sOrgBorderWidth.left - sOrgBorderWidth.right;
        oWrapSize.height = _oOrgSize.height - sOrgBorderWidth.top - sOrgBorderWidth.bottom;
        cyui.style.set(elWrapper, 'position', 'relative');
        cyui.style.set(elWrapper, 'width', oWrapSize.width + 'px');
        cyui.style.set(elWrapper, 'height', oWrapSize.height + 'px');
        cyui.style.set(elWrapper, 'marginTop', cyui.style.get(elTarget, 'marginTop'));
        cyui.style.set(elWrapper, 'marginRight', cyui.style.get(elTarget, 'marginRight'));
        cyui.style.set(elWrapper, 'marginBottom', cyui.style.get(elTarget, 'marginBottom'));
        cyui.style.set(elWrapper, 'marginLeft', cyui.style.get(elTarget, 'marginLeft'));
        cyui.style.set(elWrapper, 'borderTopStyle', cyui.style.get(elTarget, 'borderTopStyle'));
        cyui.style.set(elWrapper, 'borderRightStyle', cyui.style.get(elTarget, 'borderRightStyle'));
        cyui.style.set(elWrapper, 'borderBottomStyle', cyui.style.get(elTarget, 'borderBottomStyle'));
        cyui.style.set(elWrapper, 'borderLeftStyle', cyui.style.get(elTarget, 'borderLeftStyle'));
        cyui.style.set(elWrapper, 'borderTopColor', cyui.style.get(elTarget, 'borderTopColor'));
        cyui.style.set(elWrapper, 'borderRightColor', cyui.style.get(elTarget, 'borderRightColor'));
        cyui.style.set(elWrapper, 'borderBottomColor', cyui.style.get(elTarget, 'borderBottomColor'));
        cyui.style.set(elWrapper, 'borderLeftColor', cyui.style.get(elTarget, 'borderLeftColor'));
        cyui.style.set(elWrapper, 'borderTopWidth', cyui.style.get(elTarget, 'borderTopWidth'));
        cyui.style.set(elWrapper, 'borderRightWidth', cyui.style.get(elTarget, 'borderRightWidth'));
        cyui.style.set(elWrapper, 'borderBottomWidth', cyui.style.get(elTarget, 'borderBottomWidth'));
        cyui.style.set(elWrapper, 'borderLeftWidth', cyui.style.get(elTarget, 'borderLeftWidth'));
        cyui.style.set(elWrapper, 'overflow', 'hidden');
        cyui.style.set(elTarget, 'position', 'absolute');
        cyui.style.set(elTarget, 'margin', '0');
        cyui.style.set(elTarget, 'borderWidth', '0');
        cyui.style.set(elTarget, 'width', oWrapSize.width - _iScrollWidth - sOrgPadding.left - sOrgPadding.right + 'px');
        cyui.style.set(elTarget, 'height', 'auto');
        cyui.style.set(elTarget, 'overflow', 'visible');
        var elScrollBase = document.createElement('DIV');
        elWrapper.appendChild(elScrollBase);
        cyui.style.set(elScrollBase, 'position', 'absolute');
        cyui.style.set(elScrollBase, 'right', '0');
        cyui.style.set(elScrollBase, 'top', '0');
        cyui.style.set(elScrollBase, 'width', _iScrollWidth + 'px');
        cyui.style.set(elScrollBase, 'height', oWrapSize.height + 'px');
        var elScrollTopButton = document.createElement('DIV');
        elScrollBase.appendChild(elScrollTopButton);
        cyui.style.set(elScrollTopButton, 'height', oScrollCSS.marginTop);
        cyui.style.set(elScrollTopButton, 'backgroundImage', 'url(' + aImage[0] + ')');
        cyui.style.set(elScrollTopButton, 'backgroundRepeat', 'no-repeat');
        cyui.style.set(elScrollTopButton, 'backgroundPosition', '0 0');
        _iRailHeight = oWrapSize.height - parseInt(oScrollCSS.marginTop, 10) - parseInt(oScrollCSS.marginBottom, 10);
        var elScrollRail = document.createElement('DIV');
        elScrollBase.appendChild(elScrollRail);
        cyui.style.set(elScrollRail, 'height', _iRailHeight + 'px');
        cyui.style.set(elScrollRail, 'position', 'relative');
        cyui.style.set(elScrollRail, 'backgroundImage', 'url(' + aImage[1] + ')');
        cyui.style.set(elScrollRail, 'backgroundRepeat', 'repeat-y');
        var iPosY = parseInt(oScrollCSS.marginTop, 10) + parseInt(oScrollCSS.marginBottom, 10);
        var elRailTop = document.createElement('DIV');
        elScrollRail.appendChild(elRailTop);
        cyui.style.set(elRailTop, 'width', _iScrollWidth + 'px');
        cyui.style.set(elRailTop, 'height', oScrollCSS.borderTopWidth);
        cyui.style.set(elRailTop, 'position', 'absolute');
        cyui.style.set(elRailTop, 'backgroundImage', 'url(' + aImage[0] + ')');
        cyui.style.set(elRailTop, 'backgroundRepeat', 'no-repeat');
        cyui.style.set(elRailTop, 'backgroundPosition', '0 -' + iPosY + 'px');
        iPosY += parseInt(oScrollCSS.borderTopWidth, 10);
        var elRailBottom = document.createElement('DIV');
        elScrollRail.appendChild(elRailBottom);
        cyui.style.set(elRailBottom, 'width', _iScrollWidth + 'px');
        cyui.style.set(elRailBottom, 'bottom', '0');
        cyui.style.set(elRailBottom, 'position', 'absolute');
        cyui.style.set(elRailBottom, 'backgroundImage', 'url(' + aImage[0] + ')');
        cyui.style.set(elRailBottom, 'backgroundRepeat', 'no-repeat');
        cyui.style.set(elRailBottom, 'backgroundPosition', '0 -' + iPosY + 'px');
        _elHandle = document.createElement('DIV');
        elScrollRail.appendChild(_elHandle);
        cyui.style.set(_elHandle, 'width', _iScrollWidth + 'px');
        cyui.style.set(_elHandle, 'position', 'absolute');
        iPosY += parseInt(oScrollCSS.borderBottomWidth, 10);
        var elHandleTop = document.createElement('DIV');
        _elHandle.appendChild(elHandleTop);
        cyui.style.set(elHandleTop, 'height', oScrollCSS.paddingTop);
        cyui.style.set(elHandleTop, 'backgroundImage', 'url(' + aImage[0] + ')');
        cyui.style.set(elHandleTop, 'backgroundRepeat', 'no-repeat');
        cyui.style.set(elHandleTop, 'backgroundPosition', '0 -' + iPosY + 'px');
        _oOrgSize = cyui.dom.getSize(elTarget);
        _iHandleHeight = parseInt(oWrapSize.height * _iRailHeight / _oOrgSize.height, 10);
        var elHandleMid = document.createElement('DIV');
        _elHandle.appendChild(elHandleMid);
        cyui.style.set(elHandleMid, 'height', (_iHandleHeight - parseInt(oScrollCSS.paddingTop, 10) - parseInt(oScrollCSS.paddingBottom, 10)) + 'px');
        cyui.style.set(elHandleMid, 'overflow', 'hidden');
        cyui.style.set(elHandleMid, 'backgroundImage', 'url(' + aImage[1] + ')');
        cyui.style.set(elHandleMid, 'backgroundRepeat', 'repeat-y');
        cyui.style.set(elHandleMid, 'backgroundPosition', '-' + _iScrollWidth + 'px 0');
        iPosY += parseInt(oScrollCSS.paddingTop, 10);
        var elHandleBottom = document.createElement('DIV');
        _elHandle.appendChild(elHandleBottom);
        cyui.style.set(elHandleBottom, 'height', oScrollCSS.paddingTop);
        cyui.style.set(elHandleBottom, 'backgroundImage', 'url(' + aImage[0] + ')');
        cyui.style.set(elHandleBottom, 'backgroundRepeat', 'no-repeat');
        cyui.style.set(elHandleBottom, 'backgroundPosition', '0 -' + iPosY + 'px');
        var elScrollBottomButton = document.createElement('DIV');
        elScrollBase.appendChild(elScrollBottomButton);
        cyui.style.set(elScrollBottomButton, 'height', oScrollCSS.marginBottom);
        cyui.style.set(elScrollBottomButton, 'backgroundImage', 'url(' + aImage[0] + ')');
        cyui.style.set(elScrollBottomButton, 'backgroundRepeat', 'no-repeat');
        cyui.style.set(elScrollBottomButton, 'backgroundPosition', '0 -' + oScrollCSS.marginTop);
        // Add event handler
        cyui.event.add(elScrollTopButton, 'click', hndTopButtonClick);
        cyui.event.add(elScrollTopButton, 'mousedown', hndButtonMouseDown);
        cyui.event.add(elScrollTopButton, 'mouseup', hndButtonMouseUp);
        cyui.event.add(elScrollTopButton, 'mouseout', hndButtonMouseUp);
        cyui.event.add(elScrollBottomButton, 'click', hndBottomButtonClick);
        cyui.event.add(elScrollBottomButton, 'mousedown', hndButtonMouseDown);
        cyui.event.add(elScrollBottomButton, 'mouseup', hndButtonMouseUp);
        cyui.event.add(elScrollBottomButton, 'mouseout', hndButtonMouseUp);
        cyui.event.add(_elHandle, 'mousedown', hndMouseDown);
        var oBaseTarget = cyui.browser.isFF ? window : document.body;
        cyui.event.add(oBaseTarget, 'mousemove', hndMouseMove);
        cyui.event.add(oBaseTarget, 'mousedown', hndBodyMouseDown);
        cyui.event.add(oBaseTarget, 'mouseup', hndMouseUp);
        cyui.event.add(oBaseTarget, 'mouseup', hndBodyMouseUp);
        if (cyui.browser.isFF) cyui.event.add(elTarget, 'DOMMouseScroll', hndMouseWheel);
        else cyui.event.add(elTarget, 'mousewheel', hndMouseWheel);
        _iBaseY = cyui.dom.getPos(elScrollRail).y;
    };
    // Top button click handler
    var hndTopButtonClick = function(e) {
        if (_iPosition > 0) {
            _iPosition = _iPosition - 10 < 0 ? 0 : _iPosition - 10;
            vScrollTo(_iPosition);
        }
    };
    // Bottom button click handler
    var hndBottomButtonClick = function(e) {
        if (_iPosition < (_iRailHeight - _iHandleHeight)) {
            _iPosition = (_iPosition + 10) > (_iRailHeight - _iHandleHeight) ? _iRailHeight - _iHandleHeight : _iPosition + 10;
            vScrollTo(_iPosition);
        }
    };
    // Button mouse down handler
    var hndButtonMouseDown = function(e) {
        var e = window.event ? window.event : e;
        var oTarget = e.srcElement ? e.srcElement : e.target;
        var aBgPosition = cyui.style.get(oTarget, 'backgroundPosition').split(' ');
        aBgPosition[0] = '-' + _iScrollWidth + 'px';
        cyui.style.set(oTarget, 'backgroundPosition', aBgPosition[0] + ' ' + aBgPosition[1]);
    };
    // Button mouse up handler
    var hndButtonMouseUp = function(e) {
        var e = window.event ? window.event : e;
        var oTarget = e.srcElement ? e.srcElement : e.target;
        var aBgPosition = cyui.style.get(oTarget, 'backgroundPosition').split(' ');
        aBgPosition[0] = '0';
        cyui.style.set(oTarget, 'backgroundPosition', aBgPosition[0] + ' ' + aBgPosition[1]);
    };
    // Mouse down handler
    var hndMouseDown = function(e) {
        var e = window.event ? window.event : e;
        var oTarget = e.srcElement ? e.srcElement : e.target;
        _iMouseY = e.pageY ? e.pageY : document.documentElement.scrollTop + e.clientY;
        _iMouseOffset = cyui.dom.getPos(_elHandle).y - _iMouseY;
    };
    // Mouse move handler
    var hndMouseMove = function(e) {
        if (_iMouseY && _bMouseDown) {
            var e = window.event ? window.event : e;
            var oTarget = e.srcElement ? e.srcElement : e.target;
            _iMouseY = e.pageY ? e.pageY : document.documentElement.scrollTop + e.clientY;
            var posTop = _iMouseY - _iBaseY + _iMouseOffset;
            if (posTop < 0) posTop = 0;
            else if (posTop > _iRailHeight - _iHandleHeight) posTop = _iRailHeight - _iHandleHeight;
            _iPosition = posTop;
            vScrollTo(_iPosition);
        }
    };
    // Mouse up handler
    var hndMouseUp = function(e) {
        _iMouseY = null;
        _iMouseOffset = null;
    };
    // Body mouse down handler
    var hndBodyMouseDown = function(e) {
        _bMouseDown = true;
    };
    // Body mouse up handler
    var hndBodyMouseUp = function(e) {
        _bMouseDown = false;
    };
    // Mouse wheel handler
    var hndMouseWheel = function(e) {
        if (window.event) {
            e = window.event;
            e.returnValue = false;
        } else {
            if (e.preventDefault) {
                e.preventDefault();
            }
        }
        var delta = e.detail ? e.detail / 3 : -e.wheelDelta / 120;
        var posTop = _iPosition + (10 * delta);
        if (posTop < 0) posTop = 0;
        else if (posTop > _iRailHeight - _iHandleHeight) posTop = _iRailHeight - _iHandleHeight;
        _iPosition = posTop;
        vScrollTo(_iPosition);
    };
    // Get top position of target element to scroll
    var iGetScrollTop = function(iScrollBarTop) {
        return parseInt(iScrollBarTop * _oOrgSize.height / _iRailHeight);
    };
    // Scroll to position
    var vScrollTo = function(iPosition) {
        cyui.style.set(_elHandle, 'top', iPosition + 'px');
        cyui.style.set(cyui.$(_sTargetId), 'top', '-' + iGetScrollTop(iPosition) + 'px');
    };
    init();
};

//Tab 
function showService(name) {
    if (name == "nate") {
        document.getElementById('tab1').className = "nate_on";
        document.getElementById('tab2').className = "cyworld_off";
        document.getElementById('nate').style.display = "block";
        document.getElementById('cyworld').style.display = "none";
    } else {
        document.getElementById('tab1').className = "nate_off";
        document.getElementById('tab2').className = "cyworld_on";
        document.getElementById('nate').style.display = "none";
        document.getElementById('cyworld').style.display = "block";
    }
}

function showTab(obj, num) {
    var objWrap = obj.parentNode;
    var arrH4 = objWrap.getElementsByTagName('H4');
    var arrDiv = objWrap.getElementsByTagName('Div');
    for (var i = 0, len = arrH4.length; i < len; i++) {
        if (num == "0") {
            arrH4[0].className = "sort1_on";
            arrH4[1].className = "sort2_off";
            arrDiv[0].style.display = "block";
            arrDiv[1].style.display = "none";
        } else {
            arrH4[0].className = "sort1_off";
            arrH4[1].className = "sort2_on";
            arrDiv[0].style.display = "none";
            arrDiv[1].style.display = "block";
        }
    }
}

function hndOnLoad() {
    //IE¿¡¼­¸¸ ³×ÀÌÆ®¸¦ ½ÃÀÛÆäÀÌÁö·Î
    if (cyui.browser.isIE) {
        document.getElementById("set_home").style.display = "block";
    } else {
        document.getElementById("set_home").style.display = "none";
    }
}