var groupItems = [];
var activeGroupId = 0;

var GroupItem = Class.create();
GroupItem.prototype = 
{
    initialize:function(id,enname,cnname)
    {
        this.Id = id;
        this.EnName = enname;
        this.CnName = cnname;
        this.Item = getGroupMenu(id,cnname);
        this.Option = getGroupOption(id,cnname);
        this.Categories = null;
        this.ItemStrs = null;
    }
};
// First, Fill all of the datas of group.
fillGroupDatas();
function fillGroupDatas()
{
    var url = window.location.href;// '/webservice.aspx';
    var pars = 'o=group';
	
    var myAjax = new Ajax.Request(
	    url, 
	    {
		    method: 'get', 
		    parameters: pars, 
		    onComplete: initGroups
	    });
}
function initGroups(response)
{
    var stritems = response.responseText.split(';');
    
    for(i=0;i<stritems.length;i++)
    {
        if(stritems[i]=='')
            continue ;
            
        var stritem = stritems[i].split(',');
        var id = stritem[0].toString();
        var enname = stritem[1].toString();
        var cnname = stritem[2].toString();
        
        groupItems.push( new GroupItem(id,enname,cnname) );
    }
    
    fillGroupContainer();
}
function fillGroupContainer()
{
    var container = $("group");
    if(container==null)
    {
        setTimeout(fillGroupContainer,100);
        return ;
    }
            
    groupItems.each(
        function(item)
        {
            container.appendChild(item.Item);
        });

    // Init first category.
    if(activeGroupId==0)
    {
        groupItems[0].Item.className = "groupb" ;
        activeGroupId = groupItems[0].Id ;
        fillCategoryMenu();
    }
}

function getGroupOption(id,cname)
{
    // option
    var option = document.createElement("OPTION");
    option.text = cname;
    option.value = id;
    
    return option;
}
function getGroupMenu(id,cname)
{
    // button
    var button = document.createElement("DIV");
    button = $(button);
    button.addClassName("groupg");
    
    button.onclick = function(){groupItemClicked(id);};
    button.onmouseover = function(){groupItemOver(id);};
    button.onmouseout = function(){groupItemout(id);};
    // left
    var lft = document.createElement("SPAN");
    lft = $(lft);
    lft.addClassName("lft");
    button.appendChild(lft);
    // middle
    var mdl = document.createElement("SPAN");
    mdl = $(mdl);
    mdl.addClassName("mdl");
    mdl.update(cname);
    button.appendChild(mdl);
    // right
    var rht = document.createElement("SPAN");
    rht = $(rht);
    rht.addClassName("rht");
    button.appendChild(rht);
    // return menu button object
    return button ;
}
function groupItemOver(groupId)
{
    if(activeGroupId==groupId)
        return ;
    
    var item = getGroupById(groupId).Item;    
    item.removeClassName("groupg");
    item.addClassName("groupb");
}
function groupItemout(groupId)
{
    if(activeGroupId==groupId)
        return ;

    var item = getGroupById(groupId).Item;    
    item.removeClassName("groupb");
    item.addClassName("groupg");
}
function groupItemClicked(groupId)
{
    var item = getGroupById(groupId).Item;    
    if(activeGroupId == groupId)
        return ;
        
    activeGroupId = groupId;
    
    for(i=0;i<groupItems.length;i++)
    {
        if(activeGroupId==groupItems[i].Id)
            continue;
        
        item = $(groupItems[i].Item);
        if(item.hasClassName("groupb"))
        {        
            item.removeClassName("groupb");
            item.addClassName("groupg");
        }
    }
    
    // Change Category Content
    fillCategoryMenu();
}

function getGroupById(groupId)
{   
    for(i=0;i<groupItems.length;i++)
    {
        if(groupId==groupItems[i].Id)
            return groupItems[i];
    }
}