var Nav = {
    'ShowHide': function(ic, id){
        var div = document.getElementById(id);
        var icon = ic; //document.getElementById(icon);
        if (div.style.display == 'none') {
            div.style.display = '';
            icon.setAttribute('class', 'ficonDown');
        }
        else {
            div.style.display = 'none';
            icon.setAttribute('class', 'ficonUp');
        }
    }
}

var Scroll = {
    ctnWidth: 500,
    ctnHeight: 270,
    btnWidth: 60,
    btnHeight: 9,
    k: 0,
    min: 0,
    max: 0,
    maxContent: 0,
    'init': function(w, h){
        Scroll.render();
        
    },
    'render': function(){
        var div = Scroll.$('ScrollContent');
        div.style.width = Scroll.ctnWidth + "px";
        div.style.height = Scroll.ctnHeight + "px";
        
        div = Scroll.$('ScrollPanel');
        div.style.width = Scroll.ctnWidth + "px";
        //div.style.padding = "0px 10px";
        div.style.height = Scroll.btnHeight + "px";
        div.setAttribute("onmousedown", "{Scroll.onseek(event)}");
        
        //ContentPanel
        div = Scroll.$('ContentPanel');
        var li = div.getElementsByTagName("LI");
        var ul = div.getElementsByTagName("UL");
        var w = (li[0].offsetWidth * li.length); // + (li.length * 2);
        ul[0].style.width = "160" + "px";
        div.style.left = "10px";
        /*
         div.style.width = w + 10 + "px";
         div.style.height = li[0].offsetHeight + "px";
         */
        //btn
        div = Scroll.$('btnScroll');
        div.style.height = "9 px";
        div.style.width = Scroll.btnWidth + "px";
        div.style.left = 10 + "px";
        div.setAttribute("onmousedown", "{Scroll.sdown(event)}");
        div.setAttribute("onmouseup", "{Scroll.sup()}");
        
        Scroll.k = (w - Scroll.ctnWidth) / (Scroll.ctnWidth - Scroll.btnWidth - 20);
        Scroll.min = 10;
        Scroll.max = (Scroll.ctnWidth - Scroll.btnWidth - 10);
        Scroll.maxContent = -1 * (w - Scroll.ctnWidth);
    },
    '$': function(id){
        return document.getElementById(id);
    },
    
    n: 500,
    dragok: false,
    y: 0,
    x: 0,
    btnScroll: 0,
    contentPnl: 0,
    ctn: 0,
    btn: 0,
    seekX: 0,
    mX: 0,
    mY: 0,
    
    'smove': function(e){
        if (!e) 
            e = window.event;
        if (Scroll.dragok) {
        
            var btnX = Scroll.btn + (e.clientX - Scroll.x);
            var ctnX = Scroll.ctn - Math.round(Scroll.k * (e.clientX - Scroll.x));
            var kt = (e.clientX - Scroll.x) > 0 ? true : false;
            
            //min
            if (btnX < Scroll.min) {
                btnX = 10;
                ctnX = 10;
            }
            
            if (btnX > Scroll.max) {
                btnX = Scroll.max;
                ctnX = Scroll.maxContent;
            }
            Scroll.btnScroll.style.left = btnX + "px";
            Scroll.contentPnl.style.left = ctnX + "px";
            
            return false;
        }
    },
    'onseek': function(e){
        if (!e) 
            var e = window.event;
        
        var temp = document.getElementById('ScrollPanel');
        if (temp.tagName == "DIV" && temp.className == "spanel") {
        
            Scroll.contentPnl = document.getElementById('ContentPanel');
            
            //the img
            Scroll.btnScroll = document.getElementById('btnScroll');
            
            
            if (!e) 
                e = window.event;
            
            //left top hien tai
            Scroll.btn = parseInt(Scroll.btnScroll.style.left + 0);
            Scroll.ctn = parseInt(Scroll.contentPnl.style.left + 0);
            
            //toa do chuot
            var kt = false;
            if (((e.clientX - temp.offsetLeft) - (Scroll.btnScroll.offsetWidth / 2)) > 0 && ((e.clientX - temp.offsetLeft) - (Scroll.btnScroll.offsetWidth / 2)) < 6) 
                kt = true;
            var o = Math.round(e.clientX - (temp.offsetLeft + Scroll.btn) - (Scroll.btnScroll.offsetWidth / 2));
            
            Scroll.seek(kt, o);
            //document.onmousemove = move;
            return false;
        }
    },
    'seek': function(kt, x){
        var btnX = Scroll.btn + x;
        var ctnX = Scroll.ctn - Math.round(Scroll.k * x);
        
        //min
        if (btnX < Scroll.min) {
            btnX = 10;
            ctnX = 10;
        }
        
        if (btnX > Scroll.max) {
            btnX = Scroll.max;
            ctnX = Scroll.maxContent;
        }
        
        Scroll.btnScroll.style.left = btnX + "px";
        Scroll.contentPnl.style.left = ctnX + "px";
        return false;
    },
    'seeksmooth': function(x){
        var k = 1.2;
        var btnX = btn + x;
        var ctnX = ctn - x;
        
        if (btnX <= Scroll.pointW && btnX >= 0) {
            if (Scroll.k != 0) {
                btnScroll.style.left = btnX + "px";
                contentPnl.style.left = ctn - Math.round(Scroll.k * x) + "px";
            }
            else {
                btnScroll.style.left = btnX + "px";
                contentPnl.style.left = ctnX + "px";
            }
        }
        return false;
    },
    'sdown': function(e){
    
        if (!e) 
            var e = window.event;
        
        var temp = document.getElementById('btnScroll');
        if (temp.className == "btnScroll") {
            /*
             if (window.opera) {
             document.getElementById("Q").focus();
             }
             */
            Scroll.contentPnl = document.getElementById('ContentPanel');
            //temp.style.zIndex = n++;
            Scroll.dragok = true;
            Scroll.x = e.clientX;
            //the img
            Scroll.btnScroll = temp;
            
            //left top hien tai
            Scroll.btn = parseInt(temp.style.left + 0);
            Scroll.ctn = parseInt(Scroll.contentPnl.style.left + 0);
            //toa do chuot
            //temp.onmousemove = Scroll.smove;
            document.onmousemove = Scroll.smove;
            return false;
        }
        
    },
    
    'sup': function(){
        Scroll.dragok = false;
        //document.getElementById('btnScroll').onmousemove = null;
        document.onmousemove = null;
        return;
    },
    'doSomething': function(e){
        if (!e) 
            var e = window.event;
        var tg = (window.event) ? e.srcElement : e.target;
        if (tg.nodeName != 'DIV') 
            return;
        var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
        while (reltg != tg && reltg.nodeName != 'BODY') 
            reltg = reltg.parentNode
        if (reltg == tg) 
            return;
        // Mouseout took place when mouse actually left layer
        // Handle event
    }
    
}

document.onmouseup = Scroll.sup;