var category = function(id,count) {
    var category=this;
    this.id=id;
    this.count = count;
    this.size = 16;
    this.position = this.size;
    this.items=document.getElementById(this.id).getElementsByTagName ("li");
    this.data=new Array();
    if (document.getElementById(id+'_down').addEventListener){
        document.getElementById(id+'_down').addEventListener ('click', function () {category.down();}, false);
        document.getElementById(id+'_up').addEventListener ('click', function () {category.up();}, false);
    } else{
        document.getElementById(id+'_down').attachEvent ('onclick', function () {category.down();});
        document.getElementById(id+'_up').attachEvent ('onclick', function () {category.up();});
    }
    for (var i = 0; i < this.items.length; i++) this.data[i]=this.items[i];this.controller();
}
category.prototype.down = function (){
    $('#'+this.id).animate({"marginTop": "-=23px"}, "slow");this.position++;this.controller();
}
category.prototype.up = function (){
    $('#'+this.id).animate({"marginTop": "+=23px"}, "slow");this.position--;this.controller();
}
category.prototype.controller = function (){
    if (this.position<=this.size){this.display("up","hidden");}else{this.display("up","visible");}
    if (this.position>=this.count){this.display("down","hidden");}else{this.display("down","visible");}
}
category.prototype.display = function (option,value){
    document.getElementById(this.id+"_"+option).style.visibility=value;
}