// JScript File
//Register Namespace
px.Namespace.Register("px.UI");

/*
	this must include Tween to work properly
	
	
	formatting of parameters are as follows
	
	MenuID 
	--------------------------------
	"px.Menu1"
	
	ControlID
	--------------------------------
	"ctrl00_PlaceHolder1_Menu1"
	
	ControlProperties/GroupProperties 
	---------------------------------
			[["TestProperty",17],["TestProperty2",0]]
			
StorageData
----------------------------------
[]


*/
/*
<div>
<div clear:both></div>
<div>menuitem 1</div>
<div>menuitem 2</div>
</div>
<div position:absolute; class=MenuGroup>
	<div position:relative class=GroupContainer>
		<div class=Group position:relative top:??px>
			all item elements
		</div>
	</div>
</div>

*/

px.UI.SingleLevelMenu = function Class(SingleLevelMenu){ return {
  GetType : function(){ return "px.UI.SingleLevelMenu"; },
  MenuID : '',
  ClientID : '',
  ParentNode : null,
  Style : { TopGroupCssClass : 'TopGroupItem', TopGroupSelectedCssClass : 'TopGroupItemSelected', GroupCssClass : 'Group', GroupContainerCssClass : 'GroupContainer' },
  GroupProperties : { top:97 },
  ControlProperties : { GroupCollapseTimer:800,CollapseDuration:800,Zindex:1000,SlideTransition:'slidefade',GroupVisibleColumns:4,GroupMaxRows:3,PageContentClientID:'ctl00_PageContentHolder' },
  SlideProperties : { NavLeftCssClass:'NavLeft', NavLeftDisabledCssClass:'NavLeft NavLeftDisabled', NavLeftHoverCssClass:'NavLeft NavLeftHover', NavRightCssClass:'NavRight', NavRightDisabledCssClass:'NavRight NavRightDisabled', NavRightHoverCssClass:'NavRight NavRightHover' },
  StorageData : [],
  ItemArray : [],
  SlideTransition : { fade:0, slide:1, slidefade:2 },
  AnimationType : null,
  CollapseTimer : 0,
  SelectedItem : null,
  ActiveGroup : null,
  IsInitialized : false,
  Display : null,
  Location:'',
  ControlProps:null,
  GroupProps:null,
  // [MenuID,ClientID,StorageData,ControlProperties,GroupProperties]
		Cotr : function()
		{
				//this.AnimationType = this.SlideTransition.slide;
				var e = arguments[0];
				//alert('finished initializing...');
			    this.MenuID = e[0];
			    this.GroupScrollingMenuID = e[0] + "_ScrollingMenu";
			    this.ClientID = e[1];
			    this.StorageData = e[2];
			    this.ControlProps = e[3];
			    this.GroupProps = e[4];
			    this.InitControlProperties(this.ControlProps);
			    this.InitGroupProperties(this.GroupProps);
				return this;
		},
		InitControlProperties : function(controlprops)
		{	
				if(controlprops)
					for(var i = 0; i< controlprops.length; i++)
					{
							if(typeof(this.ControlProperties[controlprops[i][0]])=='undefined')
									continue;
							this.ControlProperties[controlprops[i][0]] = controlprops[i][1];
					}
				this.AnimationType = this.SlideTransition[this.ControlProperties.SlideTransition];
		},
		InitGroupProperties : function(groupprops)
		{
				if(groupprops)			
				{
						this.GroupProperties.top = groupprops.top;
					if(this.ActiveGroup)
						this.ActiveGroup.style.top = groupprops.top + "px";
				}
		},
		GroupMouseOver : function(item, e)
		{
			this.PrepareGroupExpand(item);
			this.AnimateGroupExpandStart(item);
		},
		PrepareGroupExpand : function(item)
		{
		        // this is how we keep track of the currently selected group... if the group has changed
		        // then we want to reset the current position of the active group. this should be enumerated 
		        // so that we keep track of each menu nodes group position.. but for now... ehhh.
		        //
		        if((null == this.GroupSlide_CurrentID) || (this.GroupSlide_CurrentID != item.id))
		        {
		            this.GroupSlide_TableCurrentPosition = null;
		        }
		        this.GroupSlide_CurrentID = item.id
				this.ActiveGroup.innerHTML = item.GroupHtml;
				this.GroupSlide_PrepareAnimation();				
				if(null != this.GroupSlide_TableCurrentPosition)
				{
						this.GroupSlide_SetPosition(this.GroupSlide_TableCurrentPosition);
				}
				this.ActiveGroup.SelectedItemID = item.id;
				if(null == this.ActiveGroup.firstChild) return;
				if(item.IsOpen)
				{
					this.ActiveGroup.firstChild.IsOpen=true;
				}
				this.CreateGroupItemMouseEvents(item);
		},
		CreateGroupItemMouseEvents : function(p)
		{
				for(var i = 0; i < p.childNodes.length; i++)
				{
						var c = p.childNodes[i];
						try
						{
							c.onmouseover = function()
							{
									this.MenuID["CancelTimer"]();
							};
							c.onmouseout = function()
							{
									this.MenuID["CancelTimer"]();
							};
						}
						catch(e)
						{				
						}
						if(c.childNodes.length>0)
							this.CreateGroupItemMouseEvents(c);
				}		
		},
		ResolveLocation : function ResolveLocation()
		{
				var loc = new String();
				loc = window.location.href;
				if(loc.lastIndexOf("/") == loc.length-1)
					loc = loc+"Default.aspx";
				else if(loc.lastIndexOf(".aspx") != loc.length-1)
					loc = loc + "/Default.aspx";
				this.Location = loc;
		},
		Init : function()
		{
				this.Display = $('display');
				this.ParentNode = $(this.ClientID);
				this.ResolveLocation();
				var data = this.StorageData;
				// loop through each node {parent menu item}
				for(var i = 0; i < data.length; i++)
				{
						var dataitem = data[i];
						// id [0]
//						var itemnode = px.byID(dataitem[0][0]);		
						var itemnode = document.createElement("div");// px.byID(dataitem[0]);		
						itemnode.id = dataitem[0][0];
						itemnode.className = this.Style.TopGroupCssClass + ' ' + dataitem[0][3];
						if(null != dataitem[0][2])
						{
								var a = document.createElement("a");
								a.href = dataitem[0][2];
								a.innerHTML = dataitem[0][1];
								a.MenuID = this.MenuID;
								itemnode.appendChild(a);
								itemnode.style.cursor = "inherit";
						}
						else
							itemnode.innerHTML = dataitem[0][1];
						itemnode.MenuID = this.MenuID;
						//itemnode.onmouseover = function(){ (eval(this.MenuID + ".PassItem"))(event);}
						itemnode.onmouseover = function(){ eval(this.MenuID + ".ItemNode_MouseOver(this,window.event)");}
						itemnode.onmouseout = function(){ eval(this.MenuID + ".ItemNode_MouseOut(this,window.event)");}
						this.ParentNode.appendChild(itemnode);
				//alert('adding node');
						//<div id="itm_0" style="float:left" onmouseover="px.mnu1.ItemNode_MouseOver(this,event)" onmouseout="px.mnu1.ItemNode_MouseOut(this,event)">Item 1</div>
						itemnode.IsOpen=false;				
						// items [1]
						var menuitems = dataitem[1];
						// selected [2]
						var selected = dataitem[2];
						if(selected)
						{
							this.SelectedItem = itemnode;
							itemnode.IsOpen=true;
							itemnode.className = this.Style.TopGroupSelectedCssClass;							
						}
						
						itemnode.ChildGroupItems = new Array();
						itemnode.Level = -1;
						if(null != menuitems)
								for(var x = 0; x < menuitems.length; x++)
								{
										itemnode.ChildGroupItems[x] = new Object();
										itemnode.ChildGroupItems[x].text = menuitems[x][0];
										var link = new String();
										var link = menuitems[x][1];
										if(link[0]=='/')
												link = window.location.protocol + "//" + window.location.hostname + link;
										if(link.lastIndexOf("default.aspx") > -1)
												link = link.replace('default.aspx','');
										if(link.lastIndexOf("Default.aspx") > -1)
												link = link.replace('Default.aspx','');
										itemnode.ChildGroupItems[x].link = link;
										
										itemnode.ChildGroupItems[x].cssclass = menuitems[x][2];
										itemnode.ChildGroupItems[x].itemindex = i;
								}
						else
						{
							itemnode.onmouseover = null;
							itemnode.onmouseout = null;
						}
						// create menu items group html
						itemnode.GroupHtml = this.CreateGroupHtml(itemnode);						
				}
				// create div for opening menu
				this.ActiveGroup = document.createElement("div");
				this.ActiveGroup.style.position = "absolute";
				this.ActiveGroup.style.overflow = "hidden";
				this.ActiveGroup.style.zIndex = this.ControlProperties.Zindex;
				this.ActiveGroup.style.width = '100%';
				this.ActiveGroup.style.top = this.GroupProperties.top + 'px';
		},
		PassItem : function(item)
		{
			alert(item);
		},
		Render : function()
		{
				document.body.appendChild(this.ActiveGroup);	
				if(null != this.SelectedItem)
				{
					this.ItemNode_MouseOver(this.SelectedItem, null);
					if(this.ControlProperties.PageContentClientID != '')
						px.byID(this.ControlProperties.PageContentClientID).style.marginTop = this.ActiveGroup.offsetHeight + "px";
				}
		},
		ItemNode_MouseOver : function(item,event)
		{
				if(this.ActiveGroup.SelectedItemID == item.id)
					return;
				item.IsHovered = true;
				
				this.CancelTimer();
				if(null != this.Tween)
				{
						this.Tween.stop();
						this.Tween = null;
				}
				this.PrepareGroupExpand(item);				
				this.FadeMenu('in');
		},
		ItemNode_MouseOut : function(item,event)
		{
			 item.IsHovered = false;
				this.FadeMenu('out');
		},
		Group_MouseOver : function(item,event)
		{
				item.IsHovered = true;
				this.CancelTimer();
				if(item.parentNode)
						this.FadeMenu('in');
		},
		Group_MouseOut : function(item,event)
		{
				item.IsHovered = false;
				if(item.parentNode)
				{
					//item.parentNode.innerHTML = '';
					this.FadeMenu('out');
				}
		},
		Group_MouseMove : function(item, event)
		{
				//As images are loaded ul width increases,
    //so we recalculate it each time
//    var t = px.byID(this.ClientID + '_groupItemTable');//item.firstChild.firstChild;
//    t.style.position = "relative";
//    var iw = item.offsetWidth;//.style.width.replace("px","");
//    var tw = t.offsetWidth;//.style.width.replace("px","");
//    var x = this.Offset_X(item.firstChild);
//    var left = (event.pageX - x) * (tw-iw) / iw;
//    //this.Display.innerHTML = iw;//left;
//    t.style.left = left + "px";
    //this.Display.innerHTML = "hello world";
    //div.scrollLeft(left);

		},
		Offset_X : function(item)
		{			
		if(null == item)
		    alert('null item');
				var x=0;
				while(item.offsetParent)
				{
							x += item.offsetLeft;
							item=item.offsetParent;
				}
				return x;
		},
		GroupSlide_OffsetPosX : 0,
		GroupSlide_CurrentID : null,
		GroupSlide_PrepareAnimation : function()
		{
				this.Group_ContainerShell = px.byID(this.ClientID + '_groupShell');
				this.Group_Container = px.byID(this.ClientID + '_groupInnerShell');
				this.Group_ItemTable = px.byID(this.ClientID + '_groupItemTable');
				if(null == this.Group_ContainerShell)
				    return;
				this.GroupSlide_InitialPosX = this.Offset_X(this.Group_ContainerShell);
				
				this.Group_Container.style.overflow = "hidden";
				var _group_ItemTableWidth = this.Group_ItemTable.offsetWidth + 15;
				// TODO: we want to set the style width to be dynamic.. for now we will set it to 850
				var styleWidth = "850px";
				this.Group_Container.style.width = styleWidth;
				var _group_ContainerWidth = this.Group_Container.offsetWidth;	
				this.GroupSlide_OffsetPosX = -(_group_ItemTableWidth - _group_ContainerWidth)
				if(null == this.GroupSlide_TableCurrentPosition)
				{
						this.GroupSlide_TableCurrentPosition = this.GroupSlide_InitialPosX;
				}
				
				this.GroupSlide_PrepareNavigation();
		},
		GroupSlide_NavigationState : 'closed',
		GroupSlide_PrepareNavigation : function()
		{
				this.GroupSlide_NavLeft = px.byID(this.ClientID + '_groupNavLeft');
				this.GroupSlide_NavRight = px.byID(this.ClientID + '_groupNavRight');
				// it is possible that there may not be need for navigation inside the menu.. if so bail.
				if((null == this.GroupSlide_NavLeft) || (null == this.GroupSlide_NavRight))
				    return;
				this.GroupSlide_NavigationState = 'open';
				// check to see where the position of the navigation container is.
				// if to the right or to the left... then apply disabled css class
				// if the group container cannot be scrolled then do not display navigation
				
				this.GroupSlide_UpdateNavigationStyle();
					
				this.GroupSlide_NavLeft.style.display = 'none';
				this.GroupSlide_NavRight.style.display = 'none';
				setTimeout(this.MenuID + ".GroupSlide_DisplayNavigation();",this.ControlProperties.CollapseDuration);
		},
		GroupSlide_PrepareNavigationCollapse : function()
		{
				this.GroupSlide_NavLeft = px.byID(this.ClientID + '_groupNavLeft');
				this.GroupSlide_NavRight = px.byID(this.ClientID + '_groupNavRight');
				// it is possible that there may not be need for navigation inside the menu.. if so bail.
				if((null == this.GroupSlide_NavLeft) || (null == this.GroupSlide_NavRight))
				    return;
		
		        this.GroupSlide_NavigationState = 'closed';
				if(px.Cart.Browser.IsIe)
				{
				        this.GroupSlide_NavLeft.style.display = 'none';
				        this.GroupSlide_NavRight.style.display = 'none';
				}
		},
		GroupSlide_UpdateNavigationStyle : function()
		{
				var isLeft = this.GroupSlide_TableCurrentPosition==this.GroupSlide_InitialPosX;
				var isRight = this.GroupSlide_TableCurrentPosition==this.GroupSlide_OffsetPosX;
				//alert(isLeft);
				if(isLeft)
					this.GroupSlide_NavLeft.className = this.SlideProperties.NavLeftDisabledCssClass;
				else if(isRight)
					this.GroupSlide_NavRight.className = this.SlideProperties.NavRightDisabledCssClass;		
		},
		GroupSlide_DisplayNavigation : function()
		{
				this.GroupSlide_NavLeft.style.display = 'block';
				this.GroupSlide_NavRight.style.display = 'block';	
				
				if(px.Cart.Browser.IsIe)
						return;
				
				var t = this.ControlProperties.CollapseDuration/1000;
				var tl = new OpacityTween(this.GroupSlide_NavLeft, Tween.strongEaseOut, 0, 100, t);
				tl.start();	
				var tr = new OpacityTween(this.GroupSlide_NavRight, Tween.strongEaseOut, 0, 100, t);
				tr.start();	
		},
		Group_NavRightMouseOver : function(item, event)
		{
				this.GroupSlide_NavLeft.className = this.SlideProperties.NavLeftCssClass;
				this.GroupSlide_Init(this.GroupSlide_TableCurrentPosition,this.GroupSlide_OffsetPosX);
				this.GroupSlide_OnEnterFrame();
		},
		Group_NavLeftMouseOver : function(item, event)
		{
				this.GroupSlide_NavRight.className = this.SlideProperties.NavRightCssClass;
				this.GroupSlide_Init(this.GroupSlide_TableCurrentPosition,this.GroupSlide_InitialPosX)
			 this.GroupSlide_OnEnterFrame();
		},
		Group_NavRightMouseOut : function(item, event)
		{
				var x = this.GroupSlide_OffsetPosX;
				var dest = (this.GroupSlide_TableCurrentPosition - 40) < x?x:(this.GroupSlide_TableCurrentPosition - 40);
				this.GroupSlide_Init(this.GroupSlide_TableCurrentPosition, dest, true);
				this.GroupSlide_OnEnterFrame();
		},
		Group_NavLeftMouseOut : function(item, event)
		{
				item.Hover = false;
				var x = this.GroupSlide_InitialPosX;
				var dest = (this.GroupSlide_TableCurrentPosition + 40) > x?x:(this.GroupSlide_TableCurrentPosition + 40);
				this.GroupSlide_Init(this.GroupSlide_TableCurrentPosition, dest, true);
				this.GroupSlide_OnEnterFrame();
		},
		
		/*
		
#region Sliding Menu
		
		*/
		Group_SlideDuration : 1.5,
		Group_ItemTable : null,
		Group_Container : null,
		Group_ContainerShell : null,
		
		GroupSlide_TableCurrentPosition : null,
		GroupSlide_CurrentTime : 0,
		GroupSlide_StartTime : 0,
		GroupSlide_BeginPosition : 0,
		GroupSlide_Position : 0,
		GroupSlide_Change : 0,
		GroupSlide_NavLeft : null,
		GroupSlide_NavRight : null,
		
		GroupSlide_Init : function(start,end,quit)
		{
			//this.Display.innerHTML = start + ", " + this.GroupSlide_TableCurrentPosition;
				this.GroupSlide_BeginPosition = start;
				this.GroupSlide_SetFinish(end);
				if(!quit)
				 this.GroupSlide_Rewind(start);
				this.GroupSlide_Playing = true;
		},
		GroupSlide_SetFinish : function(end)
		{
				this.GroupSlide_Change = end - this.GroupSlide_BeginPosition;
		},
		GroupSlide_SetPosition : function(p)
		{
				this.Group_ItemTable.parentNode.style.left = Math.round(p) + "px";
				//this.Group_ItemTable.offsetLeft = Math.round(p);
				this.GroupSlide_TableCurrentPosition = Math.round(p);
				this.GroupSlide_Position = p;
				//this.Display.innerHTML += p;
		},
		GroupSlide_GetPosition : function(t)
		{
				if (t == undefined) t = this.GroupSlide_CurrentTime;
				return this.EaseInOut(t, this.GroupSlide_BeginPosition, this.GroupSlide_Change, this.Group_SlideDuration);
		},
		GroupSlide_GetTimer : function()
		{
			return new Date().getTime() - this.GroupSlide_CurrentTime;
		},
		GroupSlide_Animate : function()
		{
				// t=(this.GroupSlide_GetTimer() - this.GroupSlide_StartTime) / 1000
				var t = (this.GroupSlide_GetTimer() - this.GroupSlide_StartTime) / 1000;
				if (this.GroupSlide_CurrentTime > this.Group_SlideDuration) 
				{
						this.GroupSlide_CurrentTime = this.Group_SlideDuration;
						this.GroupSlide_Update();
						this.GroupSlide_Playing = false;
						this.GroupSlide_StopEnterFrame();
						this.GroupSlide_UpdateNavigationStyle();
				} 
				else if (t < 0) 
				{
						this.GroupSlide_Rewind();
						this.GroupSlide_Update();
				} 
				else 
				{
						this.GroupSlide_CurrentTime = t;
						this.GroupSlide_Update();
				}
		},
		GroupSlide_Rewind : function(t)
		{
				this.GroupSlide_StopEnterFrame();	
				this.GroupSlide_CurrentTime = (0 == arguments.length) ? 0 : t;
				this.GroupSlide_FixTime();
				this.GroupSlide_Update();
		},
		GroupSlide_FixTime : function()
		{
				this.GroupSlide_StartTime = this.GroupSlide_GetTimer() - this.GroupSlide_CurrentTime * 1000;
				//this.GroupSlide_CurrentTime = (0 == arguments.length) ? 0 : t;
		},
		GroupSlide_Update : function()
		{
				this.GroupSlide_SetPosition(this.GroupSlide_GetPosition(this.GroupSlide_CurrentTime));
		},
		GroupSlide_StopEnterFrame : function()
		{
				this.isPlaying = false;
		},
		GroupSlide_OnEnterFrame : function()
		{
				if(this.GroupSlide_Playing)
				{
						this.GroupSlide_Animate();
						setTimeout(this.MenuID + ".GroupSlide_OnEnterFrame();",0);
				}
		},
		
		StrongEaseInOut : function(t,b,c,d)
		{
				if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
				return c/2*((t-=2)*t*t*t*t + 2) + b;
		},
		EaseInOut : function(t,b,c,d)
		{
			if ((t/=d/2) < 1) return c/2*t*t + b;
			return -c/2 * ((--t)*(t-2) - 1) + b;
		},
		
		/*
		
#endregion
		
		*/
		
		
		// creates html for a group of items
		// param item - html element that will contain prop ChildGroupItems array
		CreateGroupHtml : function(item)
		{
				var icg = item.ChildGroupItems;
				if(icg.length <= 0)
					return "";
				var arr = new Array();
				// this is the tricky...
				// we want only x amount of rows max
				// we want x amount of visible columns
				// all the rest of the items must fit into overflow columns
				
				// how many items do we have.. is the amount of items greater than xvisible columns times x rows??
				// if so, calculate how many columns to make to not exceed the max rows...
				// 
				var itemCount = icg.length;
				var columnCount = this.ControlProperties.GroupVisibleColumns;
				if(itemCount > (columnCount * this.ControlProperties.GroupMaxRows))
				{
						columnCount = Math.ceil(itemCount/this.ControlProperties.GroupMaxRows);
						
				}
				var bOverflow = columnCount > this.ControlProperties.GroupVisibleColumns;
				arr[arr.length] = '<div id="'+this.ClientID+'_groupShell" onmouseover="'+this.MenuID+'.Group_MouseOver(this,event)" onmousemove="'+this.MenuID+'.Group_MouseMove(this,event)" onmouseout="'+this.MenuID+'.Group_MouseOut(this,event)" class="'+this.Style.GroupContainerCssClass+'" style="position:relative">';
				arr[arr.length] = '<div id="'+this.ClientID+'_groupInnerShell" class="'+this.Style.GroupCssClass+'" style="position:relative">'
				if(bOverflow)
				    arr[arr.length] = '<div id="'+this.ClientID+'_groupNavLeft" class="NavLeft" onmouseover="'+this.MenuID+'.Group_NavLeftMouseOver(this,event)" onmouseout="'+this.MenuID+'.Group_NavLeftMouseOut(this,event)"></div>\r\n';
				arr[arr.length] = '<div style="position:relative"><table id="'+this.ClientID+'_groupItemTable" style="position:relative" cellpadding="0" cellspacing="0">\r\n';
				
				if(bOverflow)
				    this.CreateGroupInnerHtmlOverflow(arr, icg);
				else
				    this.CreateGroupInnerHtmlNoOverflow(arr, icg);
				arr[arr.length] = '\r\n</table></div>\r\n'
				if(bOverflow)
				    arr[arr.length] = '<div id="'+this.ClientID+'_groupNavRight" class="NavRight" onmouseover="'+this.MenuID+'.Group_NavRightMouseOver(this,event)" onmouseout="'+this.MenuID+'.Group_NavRightMouseOut(this,event)"></div>';
				arr[arr.length] = '</div>\r\n';
				arr[arr.length] = '</div>';
				return arr.join('');
		},
		CreateGroupInnerHtmlNoOverflow : function(arr, icg)
		{
			var columnCount = this.ControlProperties.GroupVisibleColumns;
		    var td = 0;
			for(var i = 0; i < icg.length; i++)
			{
					if(td >= columnCount)
					{
							arr[arr.length] = '\t</tr><tr>\r\n'
							td = 0
					}
					td++;
					var mi = icg[i];
					arr[arr.length] = '\t\t<td>\r\n<a href="'+mi.link+'" class="'+mi.cssclass+'">' + mi.text + '</a>\r\n</td>\r\n';
			}
		},
		CreateGroupInnerHtmlOverflow : function(arr, icg)
		{
				// now we want to organize the links so that they are first to last from left to right...
				// so that the first column has the first 3 or whatever the maxrowcount is, then the second
				// column has the next 3 (or maxrowcount) etc.. etc..
				var Columns = new Array();
				var i = 0;
				while(i < icg.length)
				{
                    var col = new Array();
                    for(var r = 0; r < this.ControlProperties.GroupMaxRows; r++)
                    {   
                        if(i < icg.length)
                        {
						    var mi = icg[i];
						    if(null != mi)
                                col.push('\r\n\t\t<td>\r\n<a href="'+mi.link+'" class="'+mi.cssclass+'">' + mi.text + '</a>\r\n</td>');
                        }
                        i++;
                    }
                    Columns.push(col);					
				}
				for(var r = 0; r < 	this.ControlProperties.GroupMaxRows; r++)
				{
				    arr[arr.length] = '\t<tr>';
				    var row = '';
				    for(var x = 0; x < Columns.length; x++)
				    {
				        var col = Columns[x][r];
				        if(null != col)
				            row += col.toString();
				    }
				    arr[arr.length] = row;
				    arr[arr.length] = '\t<tr>';
				}		
		},
		
		// timer specific functionality
		CancelTimer : function()
		{
				//
				if(this.CollapseTimer)
				{
					window.clearTimeout(this.CollapseTimer);
					this.CollapseTimer = null;
				}
		},
		FadeMenu : function(direction)
		{
				var e = this.ActiveGroup.firstChild;	
				if(direction == "in")
				{			
						this.AnimateGroupExpandStart(e);
				}
				else
				{
					this.CollapseTimer = setTimeout(this.MenuID + ".AnimateGroupCollapseStart()",this.ControlProperties.GroupCollapseTimer);
				}
		},
		FinalizeTween : function()
		{
			//alert(this.Direction);
				if(this.Direction=='out')
				{
					var group = eval(this.MenuID + ".ActiveGroup");
					group.innerHTML = '';	
					//alert(this.MenuID["Tween"]);
					this.MenuID["Tween"] = null;
				}
		},
		AnimateGroupExpandStart : function(item)
		{
				if(null == item) return;
				var opacity = null;
				var _in = false;
				if(this.Tween != null)
				{
					opacity = this.Tween.Position;
					if(this.Tween.Direction=='in')
						_in=true;
					if(opacity==100 || _in)
					{
						//this.Tween = null;
						return;
					}
					this.Tween.stop();
					this.Tween = null;
				}
					this.CancelTimer();	
					if(item.IsOpen && !this.IsInitialized)
						return;
					this.IsInitialized = true;
					item.IsOpen=true;
					if(this.GroupSlide_NavigationState == 'closed')
					        this.GroupSlide_PrepareNavigation();
					// change type of tween here..
					var t = this.ControlProperties.CollapseDuration/1000;
					switch(this.AnimationType)
					{
						case 0 :/*fade*/
							opacity = (null == opacity)?0:opacity;
							this.Tween = new OpacityTween(item, Tween.strongEaseOut, opacity, 100, t);
								break;
						case 1 :/*slide*/
							var h = parseInt(item.offsetHeight);
							opacity = (null == opacity)?-h:opacity;
							//e.style.position = 'absolute';
							this.Tween = new Tween(item.style, "top", Tween.strongEaseOut, -100, 0, t, 'px');
								break;
						case 2 :/*slidefade*/
							var h = parseInt(item.offsetHeight);
							
							opacity = (null == opacity)?-h:opacity;
							//e.style.position = 'absolute';
							this.Tween = new SlideFade(item, Tween.strongEaseOut, opacity, 0, t);
								break;
					}
					//this.Tween = new OpacityTween(e, Tween.strongEaseOut, opacity, 100, 1);
					this.Tween.MenuID = this.MenuID;
					this.Tween.onMotionFinished = this.FinalizeTween;
					this.Tween.start();		
		},
		AnimateGroupCollapseStart : function()
		{	
				if(this.SelectedItem)
				{
					this.ItemNode_MouseOver(this.SelectedItem,null);
					return;
				}
				this.GroupSlide_PrepareNavigationCollapse();
				this.ActiveGroup.SelectedItemID = null;
				var e = this.ActiveGroup.firstChild;
				if(null == e) return;
				e.IsOpen = false;
				var opacity = null;
				if(this.Tween != null)
				{
					this.Tween.stop();
					opacity = this.Tween.Position;
					this.Tween = null;
				}
				var t = this.ControlProperties.CollapseDuration / 1000;
					switch(this.AnimationType)
					{
						case 0 :/*fade*/
							opacity = null == opacity?100:opacity;
							this.Tween = new OpacityTween(e, Tween.strongEaseOut, opacity, 0, t);
								break;
						case 1 :/*slide*/
							var h = parseInt(e.offsetHeight);
							opacity = null == opacity?0:opacity;
							this.Tween = new Tween(e.style, "top", Tween.strongEaseOut, opacity, -h, t, 'px');
								break;
						case 2 :/*slidefade*/
							var h = parseInt(e.offsetHeight);
							opacity = null == opacity?0:opacity;
							this.Tween = new SlideFade(e, Tween.strongEaseOut, opacity, -h, t);		
								break;
					}
					this.Tween.MenuID = this.MenuID;
					this.Tween.onMotionFinished = this.FinalizeTween;
					this.Tween.start();
		}
		
}.Cotr(arguments);}