var CategoryItem = Class.create();
CategoryItem.prototype = 
{
    initialize:function(id,enname,cnname,index)
    {
        this.Id = id;
        this.EnName = enname;
        this.CnName = cnname;
        this.Item = getCateMenu(id,cnname);
        this.Option = getCategoryOption(id,cnname);
        this.ItemContainer = getItemContainer(cnname);
    }
};

function fillCategoryMenu()
{
    var groupItem = getGroupById(activeGroupId);
    if(groupItem.Categories==null)
        attachCategoryData(activeGroupId);

    fillCateMenu();
}
function fillCateMenu()
{
    var groupItem = getGroupById(activeGroupId);
    if(groupItem.Categories==null)
    {
        setTimeout(fillCateMenu,400);
        return ;
    }
    
    var container_cates = $("category");
    while(container_cates.childNodes.length>0)
        container_cates.removeChild(container_cates.childNodes[0]);
    
    var container_items = $("item");
    while(container_items.childNodes.length>0)
        container_items.removeChild(container_items.childNodes[0]);

    var cateItems = groupItem.Categories;
    for(i=0;i<cateItems.length;i++)
    {
        container_cates.appendChild(cateItems[i].Item);
        container_items.appendChild(cateItems[i].ItemContainer);
    }
    
    // Fill Items
    fillItems() ;
}

function attachCategoryData(groupId)
{
    var url = window.location.href;// '/webservice.aspx';
    var pars = 'o=Category&groupid='+groupId ;
	
    var myAjax = new Ajax.Request(
	    url, 
	    {
		    method: 'get', 
		    parameters: pars, 
		    onComplete: function(response)
		    {
		        attachToGroup(response.responseText,groupId);
		    }
	    });
}
function attachToGroup(responseStr,groupId)
{
    var stritems = responseStr.split(';');
    var items = [];
        
    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();
        var item = new CategoryItem(id,enname,cnname,i);
        items.push( item );        
    }
        
    var groupItem = getGroupById(groupId);
    groupItem.Categories = items;
}

function getCategoryOption(id,cnName)
{
    var option = document.createElement("OPTION");
    option.text = cnName;
    option.value = id;
    
    return option;
}

function getCateMenu(id,cnname)
{
    var item = document.createElement("SPAN");
    item.innerHTML = cnname;
    item.onclick = function(){cateItemClicked(id);};
    return item;
}

function getItemContainer(cnName)
{
    //itemContainerObj.innerHTML += cateItem.CnName;
    var itemDiv = document.createElement("DIV");
    itemDiv.className="item";
    
    // top
    var topDiv = document.createElement("DIV");
    topDiv.className="itop";
    var tlSpan = document.createElement("SPAN");
    tlSpan.className="lft";
    var tmSpan = document.createElement("SPAN");
    tmSpan.className="mdl";
    tmSpan.innerHTML = cnName;
    var trSpan = document.createElement("SPAN");
    trSpan.className="rht";
    topDiv.appendChild(tlSpan);
    topDiv.appendChild(tmSpan);
    topDiv.appendChild(trSpan);
    // list
    var lstDiv = document.createElement("DIV");
    lstDiv.className="ilst";
    var ltSpan = document.createElement("SPAN");
    ltSpan.className="top";
    var lmUl = document.createElement("UL");
    var lbSpan = document.createElement("SPAN");
    lbSpan.className="btm";
    lstDiv.appendChild(ltSpan);
    lstDiv.appendChild(lmUl);
    lstDiv.appendChild(lbSpan);
    // fill    
    itemDiv.appendChild(topDiv);
    itemDiv.appendChild(lstDiv);
    
    return itemDiv ;
}

function cateItemClicked(id)
{
    var groupItem = getGroupById(activeGroupId);
    var categories = groupItem.Categories;
    
    for(var i=0;i<categories.length;i++)
    {
        var item = $(categories[i].ItemContainer);
        if(categories[i].Id == id)
        {
            item.className = "gitem";
            item.scrollTo();
        }
        else
            item.className = "item";
    }
}