function NavChange(markscontainer,showcontainer, markclass1, markclass2){
    this.markscontainer = markscontainer;
    this.showcontainer = showcontainer;
    this.markclass1 = markclass1;
    this.markclass2 = markclass2;
    this.marks = this.markscontainer.getElementsByTagName("li");
    this.showlist = this.getShowList();
    this.init();
    this.setFunction();
}

NavChange.prototype.init = function(){
    this.showlist[0].style.display = "block";
    this.marks[0].className = this.markclass1;
    for(var i = 1; i< this.showlist.length; i++){
        this.showlist[i].style.display = "none";
        this.marks[i].className = this.markclass2;
    }
}

NavChange.prototype.setFunction = function(){
    for(var i = 0; i < this.marks.length; i++){
        var dom = this.marks[i];
        dom.index = i;
        var _this = this;
        dom.onmouseover = function(){
            _this.mouseover(this.index);
        }
    }
}

NavChange.prototype.getShowList = function(){
    var list = new Array();
    for(var i = 0; i < this.showcontainer.childNodes.length; i++){
        var dom = this.showcontainer.childNodes[i];
        if(dom.tagName == "DIV") list.push(dom);
    }
    return list;
}

NavChange.prototype.mouseover = function(index){
    for(var i = 0; i < this.showlist.length; i++){
        if(i == index){
            this.showlist[i].style.display = "block";
            this.marks[i].className = this.markclass1;
        }
        else{
            this.showlist[i].style.display = "none";
            this.marks[i].className = this.markclass2;
        }
    }
}