var msg='';
var fakeImgName='fake_ring_2.jpg';
var oldmenuTitle='';
function SubMenuItem(menuTitle)
{
	
    this.id = MENU_IDENTIFIER + menuTitle;
    
    this.parentListItem = document.getElementById('List_' + menuTitle);
    this.divElement = document.getElementById(this.id);
    
    this.moreItems = new Array();
    
    this.itemsElement = document.getElementById('SubMenuItems_' + menuTitle);
    this.onClickElement = document.getElementById('MoreItems_' + menuTitle);
    
    this.startTime;
    this.timer;
    
    this.attachedItems = 1;
    
    var me = this;
    
    this.onClickElement.onclick = function()
    {
	openedSel=menuTitle-1;
	//SLIDE_SPEED = 5;
	if(oldmenuTitle!='') {
		if(arrMenuItemCount[oldmenuTitle-1]>8) { // Back cloose menu
			document.getElementById('prenext'+oldmenuTitle).style.display='none';
			document.getElementById('others'+oldmenuTitle+'_8').style.display='block';
			document.getElementById('others'+oldmenuTitle+'_1').style.display='block';
		}
	}
	if((oldmenuTitle!=menuTitle)){
		if(arrMenuItemCount[menuTitle-1]>8) { // Open menu next pre will appeir
			for(y=8;y<20;y++)
			{
				if (document.getElementById('others'+menuTitle+'_'+y) != null) {
				document.getElementById('others'+menuTitle+'_'+y).style.display='none';
				}
			}
				//document.getElementById('others'+menuTitle+'_9').style.display='none';
				//alert('a');
				document.getElementById('prenext'+menuTitle).style.display='block';
		}
	}
	
//	alert(oldmenuTitle+'-'+menuTitle+'-'+arrMenuItemCount[menuTitle-1])

        if(menuExpanding==false)
        {
		//alert('a');
			
            menuExpanding = true;
            
            clickCtr+=1;
            //me.getMoreItems();
            //alert(SLIDE_SPEED)
            me.timer = setInterval(function ()
            {
                me.SlideMenu();    
            }, SLIDE_SPEED);
		
		//alert('2');
			for(t=2;t<9;t++)
			{
				document.getElementById('others'+menuTitle+'_'+t).style.display='block';
				//if((oldmenuTitle!='')&&(oldmenuTitle!=menuTitle)){document.getElementById('others'+oldmenuTitle+'_'+t).style.display='none';}
			}
			
		
        }

		
    }
    
	 this.onSlideMenu = function()
    {
	//alert('a'+menuTitle);
		if(menuExpanding==false)
        {
		
            menuExpanding = true;
            
            clickCtr+=1;
           
            me.timer = setInterval(function ()
            {
                me.SlideMenu();    
            }, SLIDE_SPEED);
        }
    }
	
    this.SlideMenu = function()
    {
	//alert(this.parentListItem.id)
	    if(parseInt(this.parentListItem.style.width,'10') < MAX_WIDTH) //only proceed if my width is not MAXIMUM
        {
            var reduceMyWidthBy=0;
            
            for(var menuCtr=0; menuCtr<submenus.length; menuCtr++) //go through each sub menu to see if we need to close any
            {
                if(submenus[menuCtr]!=this)
                {
                    var otherMenuItem = submenus[menuCtr]; //otherMenuItem
                    var otherMenuItemWidth = parseInt(otherMenuItem.parentListItem.style.width,'10'); //otherMenuItemWidth
                    var otherMenuItemReduceWidth=0;
                    
                    if(otherMenuItemWidth > menuItemMinWidthCalculated) //if the width of this 'other' item is greater than it should be calculate the amount by which to reduce this width and then reduce it for this element
                    {
                        otherMenuItemReduceWidth = Math.floor((otherMenuItemWidth - menuItemMinWidthCalculated) / 10);  //calculate width reduction
                        otherMenuItemReduceWidth =(otherMenuItemReduceWidth > 0)? otherMenuItemReduceWidth :1; //set value
                        
                        otherMenuItem.parentListItem.style.width = (otherMenuItemWidth - otherMenuItemReduceWidth) + 'px'; //change width of the list
                        otherMenuItem.divElement.style.width = (otherMenuItemWidth - otherMenuItemReduceWidth) + 'px'; //change width of the whole div where we play
                        msg+=(otherMenuItemWidth - otherMenuItemReduceWidth) + '\t';
//                        if((otherMenuItemWidth - otherMenuItemReduceWidth - (this.attachedItems * WIDTHFORNEWITEM)) >= WIDTHFORNEWITEM)
//                        {
//                        //we have an opportunity to add a new item
//                        this.getItemToAttachToDiv();
//                        }
                        
                    }
                    reduceMyWidthBy = reduceMyWidthBy + (otherMenuItemWidth - otherMenuItemReduceWidth); //for every other element's width reduction, add amount to this element to increase it by the total - gets rid of flickering :)
                }
            }
            if(clickCtr==0)//first time
            {
			//alert('a');
                this.startTime = (new Date()).getTime();
                clearInterval(this.timer);
				
                this.timer = setInterval(function()
                {
                    me.slideOpen();
                }, 50);
				oldmenuTitle = menuTitle;
            }
            else
            {
			//alert('b');
                this.parentListItem.style.width = (offSetWidth - reduceMyWidthBy) + 'px'; //modify this element's width by the reducyMyWidthBy calculated above in the for loop
                this.divElement.style.width = (offSetWidth - reduceMyWidthBy) + 'px';
            }
            if(((offSetWidth - reduceMyWidthBy) - (this.attachedItems * WIDTHFORNEWITEM)) >= WIDTHFORNEWITEM)
            {
                //we have an opportunity to add a new item
                this.getItemToAttachToDiv();
            }
        }
        else
        {
        //alert(parseInt(this.parentListItem.style.width,'10')+'*-*'+MAX_WIDTH)
	
		    //enable other buttons
            for(var i=0;i<submenus.length;i++)
            {
			//alert(i);
                submenus[i].onClickElement.enabled = true;
            }
            menuExpanding = false;
            //alert('s');
			clearInterval(this.timer); //when this element's width is as large as should be - STOP
			//alert(oldmenuTitle);
			for(t=2;t<9;t++)
			{
				//document.getElementById('others'+menuTitle+'_'+t).style.display='block';
				if((oldmenuTitle!='')&&(oldmenuTitle!=menuTitle)){
				//alert('s');
				document.getElementById('others'+oldmenuTitle+'_'+t).style.display='none';}
				
			}
			oldmenuTitle = menuTitle;
        }
    }
    
    this.slideOpen = function() //first time
    {
        
		var timeElapsed = (new Date()).getTime() - this.startTime;
        if (timeElapsed < SLIDESPEED)
        {
            var expWidth = Math.round(timeElapsed / SLIDESPEED * MAX_WIDTH);
            if(expWidth>MIN_WIDTH)
            {
                this.parentListItem.style.width = expWidth + 'px'; 
                this.divElement.style.width = expWidth + 'px';
            }
            
        }
        else
        {
            this.parentListItem.style.width = MAX_WIDTH + 'px'; 
            this.divElement.style.width = MAX_WIDTH + 'px';
             menuExpanding = false;
            clearInterval(this.timer);
        }
        
        if((expWidth - (this.attachedItems * WIDTHFORNEWITEM)) >= WIDTHFORNEWITEM)
        {
            //we have an opportunity to add a new item
            this.getItemToAttachToDiv();
        }
    }
    
    this.getMoreItems = function()
    {
        //delete existing objects
        this.moreItems = null;
        this.moreItems = new Array();
        //alert(newItemsCtr);
		//alert('bir');
        for(var newItemsCtr=0; newItemsCtr<7;newItemsCtr++) //add to the existing item - do not remove it
        {
            var subMenuItem = document.createElement('div');
            subMenuItem.className = 'subMenuItem';
            
            var subMenuItem_Title = document.createElement('div');
            subMenuItem_Title.className = 'subMenuItemTitle';
            subMenuItem_Title.innerHTML = 'Name' + newItemsCtr;
			//alert('Name DV' + newItemsCtr);
            subMenuItem.appendChild(subMenuItem_Title);
            
            var subMenuItem_Img = document.createElement('div');
            subMenuItem_Img.className = 'subMenuItemImageContainer';
            
            var subMenuItemImg = document.createElement('img');
            subMenuItemImg.className = 'subMenuItemImage';
            subMenuItemImg.src = '/menu/Images/'+fakeImgName;
            subMenuItem_Img.appendChild(subMenuItemImg);
            subMenuItem.appendChild(subMenuItem_Img);
            
            this.moreItems[this.moreItems.length] = subMenuItem;
        }
    }
    
	this.getItemToAttachToDiv = function()
    {
        try
        {
            this.itemsElement.appendChild(this.moreItems[this.attachedItems]);
        }
        catch(e){}
        this.attachedItems+=1;
    }
}