﻿// ---------- ItkPanelItem Class ----------
Type.registerNamespace("ITkey.Web.UI");

ITkey.Web.UI.ItkPanelItem = function()
{
	ITkey.Web.UI.ItkPanelItem.initializeBase(this);
	
	this._properties = new ITkey.Web.UI.PropertyBag(this);
	
		this._linkElement = null;
		this._imageElement = null;
		this._hoveredImageUrl = "";
		this._selectedImageUrl = "";
		this._expandedImageUrl = "";
		this._postBack = true;
		this._childListElement = null;
		this._cssClass = "";
		this._navigateAfterClick = true;
		this._focusedCssClass = "rpFocused";
		this._selectedCssClass = "rpSelected";
		this._clickedCssClass = "rpClicked";
		this._expandedCssClass = "rpExpanded";
		this._disabledCssClass = "rpDisabled";
		this._expandedItem = null;
		this._lastExpandedItem = null;
		this._selectedItem = null;
		this._focusedItem = null;
		this._focused = false;
		this._clicked = false;
		this._enabled = true;
		this._expanded = false;
		this._selected = false;
		this._templated = false;
		this._preventCollapse = false;
		this._slideWrapElement = null;
		this._animationContainer = null;
		/* Animation */
		this._animation = null;
		this._expanding = null;
		this._animationEndedDelegate = null;
		this._onExpandAnimationStartedDelegate = null;
		this._fps = 60;
		this._changedOverflow = false;
	    this._styleCssText = null;
	    this._registeredInitializedItems = false;


}

ITkey.Web.UI.ItkPanelItem.prototype = 
{
	// Initialization and disposing
	
	_initialize: function(json, element)
	{
		ITkey.Web.UI.ItkPanelItem.callBaseMethod(this, '_initialize', [json, element]);

	    this._properties.load(json);
	
	   if (this.get_expanded())
			this._ensureChildControls();
		
		this._updateLinkClass();
		
		var element = this.get_element();
		var instance = this;
		this._renderAccessKey();
		this._windowLoadHandlerSavingState = Function.createDelegate(this, this._windowLoadHandlerSavingState);
		Sys.Application.add_load(this._windowLoadHandlerSavingState);
			
		this._animationEndedDelegate = Function.createDelegate(this, this._animationEnded);
		this._onExpandAnimationStartedDelegate = Function.createDelegate(this, this._onExpandAnimationStarted);
		this._attachEventsToTheLinkElement();

	},
	
	_attachEventsToTheLinkElement:function()
	{
	    // There is a bug in ASP.NET AJAX in IE, the workaround is to attach the handler directly
		if(this.get_linkElement())
		{
				this._onLinkMouseDown = Function.createDelegate(this, this._onLinkMouseDown);
				this._onLinkMouseUp = Function.createDelegate(this, this._onLinkMouseUp);
		    if($ITkey.isIE)
		    {
		        this.get_linkElement().attachEvent("onmousedown",this._onLinkMouseDown);
		        this.get_linkElement().attachEvent("onmouseup",this._onLinkMouseUp);
		    }
		    else
		    {
			    $addHandler(this.get_linkElement(), "mousedown", this._onLinkMouseDown);
				 $addHandler(this.get_linkElement(), "mouseup", this._onLinkMouseUp);
		    }
		}
	},
	
	_windowLoadHandlerSavingState : function (e) 
	{
		if (this.get_expanded())
		{
				this.get_parent().set_expandedItem(this);
				this.get_panelBar()._registerExpandedItem(this);
		}
		if (this.get_selected())
		{	
			this.get_panelBar().set_selectedItem(this);
			this.get_panelBar()._registerSelectedItem(this);
		}
		this._updateLinkClass();
		this._windowLoadHandler(true);
		
	},
	
	_windowLoadHandler : function (callItkShow) 
	{	
		
		if(this.get_element()==null)
		{
			return;
		}
		if (this.get_expanded() && this.get_childListElement())
		{
			this.get_childListElement().style.display = "none";
		
			this.get_childListElement().style.width = "100%";//this.DomElement.offsetWidth + "px";
			
			
			if (this.get_level() > 0 && !this.get_panelBar().get_fullExpandedItem())
			{
				this.get_parent()._setChildrenHeight("");
			}
			
			this.get_childListElement().style.display = "block";
		
			if(callItkShow)
			{
				this.get_panelBar()._callItkShow();
			}
		}
		
		if (this.get_panelBar()._renderInProgress())
		{
			return;
		}
		
		if (this._loadHandlerExecuted)
		{
			return;
		}
		this._loadHandlerExecuted = true;
		if (this.get_expanded() && this.get_level() == 0 && this.get_panelBar().get_fullExpandedItem())// && !this.ExpandedItem.EaseInProgress)
		{
			var groupHeight = this.get_panelBar()._getGroupHeight();
		
			if (groupHeight > 0)
			{
				this._setChildrenHeight(groupHeight);
			}
		}
	},
	
	_dispose: function()
	{
		ITkey.Web.UI.ItkPanelItem.callBaseMethod(this, '_dispose');
		Sys.Application.remove_load(this._windowLoadHandler);
		if(this.get_linkElement())
		{
		    if($ITkey.isIE)
		    {
		        this.get_linkElement().detachEvent("onmousedown",this._onLinkMouseDown);
		        this.get_linkElement().detachEvent("onmouseup",this._onLinkMouseUp);
		    }
		    else
		    {
			    $removeHandler(this.get_linkElement(), "mousedown", this._onLinkMouseDown);
				    $removeHandler(this.get_linkElement(), "mouseup", this._onLinkMouseUp);
		    }
		}
		this._disposeAnimation();
	},
	
	_shouldInitializeChild: function(childItem)
	{
		return true;
	},
	
	_callItkShow : function ()
	{
		var children =  this.get_childListElement().getElementsByTagName("*");
		for (var i = 0, length = children.length; i < length; i ++)
		{
			var child = children[i];
			if (child.ItkShow)
			{
				child.ItkShow();
			}
		}
	},
	
		
	_onLinkMouseDown: function(e)
	{
	

		if (!this.get_isEnabled()) 
		{
			return true;
		}
		
		this._clicked = true;
		this._updateLinkClass();
		this._updateImageUrl();
			
		return true;
	},
		
	_onLinkMouseUp: function(e)
	{
		
		if (!this.get_isEnabled()) 
		{
			return true;
		}
	
		this._clicked = false;
		this._updateLinkClass();
		this._updateImageUrl();
			
		return true;
	},
	_updateLinkClass :function ()
	{	
		if (this.get_isSeparator()||!this.get_linkElement())
		{
			return;
		}
		
		var cssClass = "rpLink " + this.get_cssClass();
		
		if (this.get_expandable() )
		{
			cssClass = "rpLink rpExpandable " + this.get_cssClass()
		}
		
		if (this.get_focused())
		{
			cssClass = cssClass + " " + this.get_focusedCssClass();
		}
		
		if (this.get_selected() )
		{
			cssClass = cssClass + " " + this.get_selectedCssClass();
		}	

		if (this.get_expanded())
		{
			cssClass = cssClass + " " + this.get_expandedCssClass();
			this.get_parent().set_expandedItem(this);
		}

		if (this.get_clicked())
		{
			cssClass = cssClass + " " + this.get_clickedCssClass();
		}

		if (!this.get_enabled())
		{
			cssClass = cssClass + " " + this.get_disabledCssClass();
		}

		this.get_linkElement().className = cssClass;
		
		this._updateImageUrl();
	},
	
	_onKeyDown : function (e)
	{
		var keyCode = e.keyCode ? e.keyCode : e.rawEvent.keyCode;
		
		switch (keyCode)
		{
			case Sys.UI.Key.up:
					this._onKeyboardUp();
				break;

			case Sys.UI.Key.down:
					this._onKeyboardDown();
				break;

			case Sys.UI.Key.esc:
				this._onKeyboardEsc();
				break;
				
			default:
				return true;
		}
		
		e.preventDefault();
		return false;
	},
	
	_onKeyboardUp : function ()
	{
		var parent = this.get_parent();
		this.get_index() || !parent.focus ? this.focusPreviousItem() : parent.focus();
	},
	
	_onKeyboardDown : function ()
	{
		var parent = this.get_parent();
			
		if (this.get_expanded())
		{
			this.focusFirstChild();
			return;
			
		}
		var last = this.get_index() == parent.get_items().get_count() - 1;	
		
		if ( last && parent.focus)
		{
			parent.focusNextItem();
		}
		
		else
		{
			this.focusNextItem();
		}
	},
	
	_onKeyboardEsc : function ()
	{
		var parent = this.get_parent();
		var panelBar = this.get_panelBar();
		
		if (parent.focus)
		{
			parent.focus();
		}
		else if(parent==panelBar && this.get_expanded())
		{
			this.collapse();
			this.blur();
		}
	},
	
	focusFirstChild: function()
	{
		var items = this.get_items();
		if (items.get_count() == 0)
		{
			return;
		}
		
		var item = items.getItem(0);
		var firstItem = item;	
		while (!item._canFocus())
		{
			item = item._getNextItem();
			if (item == firstItem) 
			{
				return; // no items to focus
			}
		}
			
		item.focus();
	},
	
	focusNextItem: function()
	{
		var item = this._getNextItem();	
		while (!item._canFocus())
		{
			item = item._getNextItem();
		}
		item.focus();
	},
	
	focusPreviousItem: function()
	{
		var item = this._getPreviousItem();
		while (!item._canFocus())
		{
			item = item._getPreviousItem();
		}	
		item.focus();
	},
	
	click : function()
	{
		this._click(null);
	},
	
	_getPreviousItem: function ()
	{
		var parentItems = this.get_parent().get_items();
		var index = this.get_index();
		if (index == 0)
		{
			return parentItems.getItem(parentItems.get_count() - 1);
		}
		
		return parentItems.getItem(index - 1);
	},
	
	_getNextItem: function ()
	{
		var parentItems = this.get_parent().get_items();
		var index = this.get_index();
		if (index == parentItems.get_count() - 1)
		{
			return parentItems.getItem(0);
		}
		
		return parentItems.getItem(index + 1);
	},
	
	_click : function (e)
	{
		if (this.get_isSeparator() ||!this.get_isEnabled()) 
		{
			if(e)
				e.preventDefault();
				
			return false;
		}
		
		var panel = this.get_panelBar();	
		var clickingArgs = new ITkey.Web.UI.ItkPanelItemClickingEventArgs(this, e);
		panel._raiseEvent("itemClicking", clickingArgs);
		
		if (clickingArgs.get_cancel()) 
		{
			if (e)
				e.preventDefault();
			return false;
		}
	    
		var javaScriptUrl = this.get_linkElement().href.indexOf("javascript:") == 0;
		var expandedItem = this.get_parent().get_expandedItem();
		var selectedItem = this.get_panelBar().get_selectedItem();
	    
		if (this.get_navigateAfterClick() && !javaScriptUrl)
		{
			if (this.get_panelBar().get_singleExpandedItem() && !this.get_panelBar().get_allowCollapseAllItems())
			{
				if (expandedItem)
				{
					expandedItem._expanded = false;
					expandedItem._properties.setValue("expanded", false,true);
					this.get_panelBar()._unregisterExpandedItem(this);
				}
				if (this.get_items().get_count()>0)
				{
					this._expanded = true;
					this._properties.setValue("expanded", true,true);
					this.get_panelBar()._registerExpandedItem(this);
					
				}
			
			}
			else if (this.get_items().get_count()>0)
			{
				this.set_expanded(!this.get_expanded());
			}
			if (!this._shouldNavigate())
			{
				/*
					Select the item and update the CSS classes when the "Target" 
					property is set (navigating to frames or iframes)
				*/
				this.select();
			}
			else
			{
				/*
					Select but don't update the Css classes - normal (no frames) navigation and postback
				*/
				if (selectedItem)
				{
					selectedItem.set_selected(false);
				}
				
				this.set_selected(true);
				
			}
			
				var clickedArgs = new ITkey.Web.UI.ItkPanelItemClickedEventArgs(this, e);
				panel._raiseEvent("itemClicked", clickedArgs);
				
				if (this._shouldNavigate())
				    return true;
				    
				if (this._shouldPostBack())
				{   
				   if (e)
						e.preventDefault();
						
					panel._postback(this._getHierarchicalIndex());
				}
				return true;
		}
	    
		if (!this.get_panelBar().get_allowCollapseAllItems() && this.get_panelBar().get_singleExpandedItem())
		{
			if (!this.get_expanded()) this.expand();
		}
		else
		{
			this.get_expanded() ? this.collapse() : this.expand();
		}
		
		this.select();
		
		var panel = this.get_panelBar();	
		var clickedArgs = new ITkey.Web.UI.ItkPanelItemClickedEventArgs(this, e);
		panel._raiseEvent("itemClicked", clickedArgs);
		
		if (javaScriptUrl)
			return true;
		
		
		if (e)
			e.preventDefault();
		
		if (this._shouldPostBack())
		{
			panel._postback(this._getHierarchicalIndex());
		}
		
		return false;
	},
	
	focus: function()
	{
		this._focus(null);
	},
	
	blur: function()
	{
		this._blur(null);
	},
	
	_shouldPostBack : function()
	{
		if(!this.get_panelBar()) return false;
	
		return this.get_postBack() && this.get_panelBar()._postBackReference;
	},
	
	_replaceCssClass: function(element, oldClass, newClass)
	{
		element.className = element.className.replace(oldClass, newClass);
	},
	
	_updateImageUrl : function ()
	{
		if (!this.get_element())
			return;
			
		var url = this._getImageUrlToApply();
		
		if (!url) return;
		
		var image = this.get_imageElement();
		if (!image)
		{
			image = this._createImageElement();
		}
		image.src = url;
	},
	
	_getImageUrlToApply : function ()
	{
		var url = this.get_imageUrl();
		//Required when the selectedImageUrl is not serialized but rendered
		var selectedUrl = this.get_selectedImageUrl();
		
		var expandedUrl =this.get_expandedImageUrl();
		
		if (this._hovered && this.get_hoveredImageUrl())
			url = this.get_hoveredImageUrl();
		
		if (this.get_selected() && selectedUrl)
			url = selectedUrl;
		
		if (this.get_expanded() && expandedUrl)
			url = expandedUrl;
			
		if (!this.get_enabled() && this.get_disabledImageUrl())
		{
			url = this.get_disabledImageUrl();
		}
		return url;
	},
	
	_initializeRenderedItem: function()
	{
		ITkey.Web.UI.ItkPanelItem.callBaseMethod(this, '_initializeRenderedItem');
		this._animationEndedDelegate = Function.createDelegate(this, this._animationEnded);
		this._onExpandAnimationStartedDelegate = Function.createDelegate(this, this._onExpandAnimationStarted);
		this._attachEventsToTheLinkElement();

		this._updateLinkClass();
	},
	
	//public methods
	disable: function()
	{
		this.set_enabled(false);
	},
	
	enable: function()
	{
		this.set_enabled(true);
	},
	
	collapse : function()
	{
		this.set_expanded(false);
	},
	
	expand : function()
	{
		this.set_expanded(true);
	},
	
	hide: function()
	{
		this.set_visible(false);
	},
	
	show: function()
	{
		this.set_visible(true);
	},
	
	_getAnimationContainer: function()
	{
		if (!this._animationContainer) 
		{
			if(this.get_templated())
			{
				this._animationContainer = $ITkey.getFirstChildByTagName(this.get_element(), "div", 2);
			}
			else
			{
				this._animationContainer = $ITkey.getFirstChildByTagName(this.get_element(), "div", 1);
			}
		}
		
		return this._animationContainer;

	},
	
	select: function()
	{
		this.set_selected(true);
	},
	
	unSelect: function()
	{
		this.set_selected(false);
	},
	
	_setChildrenHeight : function (value)
	{
		if (value < 0) value = 0;
		if (!value == "") value += "px";
		
		this.get_childListElement().style.height = value;
		this._getAnimationContainer().style.height = value;
		
	},
	
	set_lastExpandedItem : function(value)
	{
		this.lastExpandedItem = value;
	},
	
	//public properties
	get_isSeparator: function()
	{
		return this._properties.getValue("isSeparator", false);
	},
	
	set_isSeparator : function (value)
	{
		this._properties.setValue("isSeparator", value, true);
	},
	
	set_enabled : function (value)
	{
		ITkey.Web.UI.ItkPanelItem.callBaseMethod(this, 'set_enabled', [value]);
		this._updateLinkClass();		
	},
	
	get_linkElement: function()
	{
		if (!this._linkElement) 
		{
			this._linkElement = $ITkey.getFirstChildByTagName(this.get_element(), "a", 0);
		}
		
		return this._linkElement;
	},
	
	get_childListElement: function()
	{
		if (!this._childListElement) 
		{
			var slideWrapElement = this._getSlideWrapElement();
			if (slideWrapElement) 
			{
				var container = slideWrapElement;
				
				this._childListElement = $ITkey.getFirstChildByTagName(container, "ul", 0);
			}
		}
		return this._childListElement;
	},
	
	_getSlideWrapElement: function()
	{
		if (!this._slideWrapElement) 
		{	
			if (this.get_templated())
			{
				this._slideWrapElement = $ITkey.getFirstChildByTagName(this.get_element(), "div", 2);
			}
			else
			{
				this._slideWrapElement = $ITkey.getFirstChildByTagName(this.get_element(), "div", 1);
			}
		}
		
		return this._slideWrapElement;
	},
	
	get_imageElement: function()
	{
		if (!this._imageElement)
		{
			var linkElement = this.get_linkElement();
			var element = this.get_element();
			
			this._imageElement = $ITkey.getFirstChildByTagName(linkElement || element, "img", 0);
		}
		
		return this._imageElement;
	},
	
	get_disabledImageUrl : function ()
	{
		return this._properties.getValue("disabledImageUrl", null);
	},
	
	set_disabledImageUrl : function (value)
	{
		this._properties.setValue("disabledImageUrl", value, true);
		this._updateImageUrl();
	},
	
	_createImageElement : function()
	{
		this._imageElement = document.createElement("img");
		this._imageElement.className = "rpImage";
		var contentElement = this.get_linkElement();
		contentElement.insertBefore(this._imageElement, this.get_textElement());
		return this._imageElement;
	},
	
	get_textElement: function()
	{
		var link = this.get_linkElement();
		if (link) 
		{
			return $ITkey.getFirstChildByTagName(link, "span", 0);
		}
		else 
		{
			return null;
		}
	},
	
	get_panelBar: function()
	{
		return this._getControl();
	},
	
	get_items : function ()
	{
		return this._getChildren();
	},
	
	get_navigateUrl : function()
	{
		return this._getNavigateUrl();
	},
	
	set_navigateUrl : function (value)
	{
		this._properties.setValue("navigateUrl", value, true);
		
		if (this.get_linkElement())
		{
			this.get_linkElement().href = value;
		}
	},
	
	get_navigateAfterClick : function()
	{	
		 return this._shouldNavigate() || this._shouldPostBack() ;
	},
	
	get_target : function ()
	{
		return this._properties.getValue("target", null)
	},
	
	set_target : function (value)
	{
		this._target = value;
		this._properties.setValue("target", value, true);
	},
	
	get_cssClass : function ()
	{
		return this._properties.getValue("cssClass", "")
	},
	
	set_cssClass : function (value)
	{
		this._cssClass = value;
		this._properties.setValue("cssClass", value, true);
		this._updateLinkClass();
	},
	
	get_disabledCssClass : function ()
	{
		return this._properties.getValue("disabledCssClass", "rpDisabled")
	},
	
	set_disabledCssClass : function (value)
	{
		this._disbaledCssClass = value;
		this._properties.setValue("disabledCssClass", value, true);
		this._updateLinkClass();
	},
	
	get_expandedCssClass : function ()
	{
		return this._properties.getValue("expandedCssClass", "rpExpanded")
	},
	
	set_expandedCssClass : function (value)
	{
		this._expandedCssClass = value;
		this._properties.setValue("expandedCssClass", value, true);
		this._updateLinkClass();
	},
	
	get_selectedCssClass : function ()
	{
		return this._properties.getValue("selectedCssClass", "rpSelected")
	},
	
	set_selectedCssClass : function (value)
	{
		this._selectedCssClass = value;
		this._properties.setValue("selectedCssClass", value, true);
		this._updateLinkClass();
	},
	
	get_focusedCssClass : function ()
	{
		return this._properties.getValue("focusedCssClass", "rpFocused")
	},
	
	set_focusedCssClass : function (value)
	{
		this._focusedCssClass = value;
		this._properties.setValue("focusedCssClass", value, true);
		this._updateLinkClass();
	},
	
	get_clickedCssClass : function ()
	{
		return this._properties.getValue("clickedCssClass", "rpClicked")
	},
	
	set_clickedCssClass : function (value)
	{
		this._clickedCssClass = value;
		this._properties.setValue("clickedCssClass", value, true);
		this._updateLinkClass();
	},
	
	get_focused : function ()
	{
		return this._focused;
	},
	
	get_selected : function ()
	{
		return this._properties.getValue("selected", false) == true;
	},
	get_clicked : function ()
	{
		return this._clicked;
	},
	
	set_selected : function (value)
	{
		if (value) 
		{
			if (this.get_selected()||!this.get_isEnabled())
				 return;
			
			var selectedItem = this.get_panelBar().get_selectedItem();
			if (selectedItem)
			{
				selectedItem.unSelect();
			}
			this.get_panelBar().set_selectedItem(this);
			this.get_panelBar()._registerSelectedItem(this);
			this._selected = value;
			this._properties.setValue("selected", true);
			this._updateLinkClass();
			//this._doFocus();
		}
		else 
		{
			if (!this.get_selected()) return;
			
			this.get_panelBar().set_selectedItem(null);
			this.get_panelBar()._unregisterSelectedItem(this);
			
			this._selected = value;
			this._properties.setValue("selected", false);
			this._updateLinkClass();
			//this._doBlur();
		}
	},
	
	get_expanded : function ()
	{
		return this._properties.getValue("expanded", false);
	},
	
	set_expanded : function (value)
	{
		if (this.get_items().get_count() <= 0 || !this.get_isEnabled())
		{
			return;
		}
			
		if(value)
		{
			
			if (this.get_expanded())
			{
				return;
			}
			var panelbar =this.get_panelBar();
			var childListElement = this.get_childListElement();
			var parent = this.get_parent();
			
			if (this.get_level() == 0 && panelbar.get_fullExpandedItem())
			{
			    if(window.netscape && !window.opera)
		        {
			        childListElement.style.overflow = "hidden";
			        this._changedOverflow =  true;
		        }
				childListElement.style.height = panelbar._getGroupHeight() + "px";
			}
			childListElement.style.display = "none";
		
			childListElement.style.width = "100%";//this.DomElement.offsetWidth + "px";
			
			
			if (this.get_level() > 0 && !panelbar.get_fullExpandedItem())
			{
				parent._setChildrenHeight("");
			}
			
			if (parent.get_expandedItem() && panelbar.get_singleExpandedItem())
			{
				parent.get_expandedItem().collapse();
			}
			
			parent.set_expandedItem(this);
			panelbar.set_lastExpandedItem(this);
			panelbar._registerExpandedItem(this);
			
			this._expanded = true;
			
		    childListElement.style.display = "block";
			
			this._displayChildren(true);

			var panel = this.get_panelBar();
			var expandedArgs = new ITkey.Web.UI.ItkPanelItemExpandEventArgs(this, null);
			
			panel._raiseEvent("itemExpand", expandedArgs);
			
			this._ensureChildControls();
	        this._registerInitializedItems();
			
		
		}
		else
		{
			if (!this.get_expanded())
			{
				return;
			}
			if (this.get_preventCollapse())
			{
				return;
			}
    		var panelbar =this.get_panelBar();
			var childListElement = this.get_childListElement();
			var parent = this.get_parent();
	    
			parent.set_expandedItem(null);
			
			parent.set_lastExpandedItem(parent);//parent.set_lastExpandedItem(parent);

			this._expanded = false;
			panelbar._unregisterExpandedItem(this);

			if (this.get_level() > 0 && !panelbar.get_fullExpandedItem())
			{
				parent._setChildrenHeight("");
			}
			this._displayChildren(false);
			
			
			
			var panel = this.get_panelBar();	
			var collapsedArgs = new ITkey.Web.UI.ItkPanelItemCollapseEventArgs(this, null);
			panel._raiseEvent("itemCollapse", collapsedArgs);
		}
		
		this._expanded = value;
		this._properties.setValue("expanded", value,true);
		this._updateLinkClass();
	},
	
	get_expandable : function ()
	{
		if( this.get_linkElement() && this.get_linkElement().className.indexOf("rpExpandable") > -1)
		{
			return true;
		}
		else
		{
			return false;
		}
	},
	
	set_visible : function (value)
	{
		var valueChanged = this.get_visible() != value;
		if (!valueChanged)
		{
			return;
		}
		
		ITkey.Web.UI.ItkPanelItem.callBaseMethod(this, 'set_visible', [value]);
		
		var displayValue = value ? "" : "none";	
      
	    this.get_element().style.display = displayValue;
	    this.get_panelBar()._resizeHandler();
	},
	
	get_postBack : function ()
	{
	    return this._properties.getValue("postBack", true) == true;
	},
	
	set_postBack : function (value)
	{
	    this._properties.setValue("postBack", value);
	},
	
	_getChildElements: function()
	{
		return $ITkey.getChildrenByTagName(this.get_childListElement(), "li");
	},
	
	_canFocus: function()
	{
		return (!this.get_isSeparator()) && this.get_enabled();
	},
	
	_focus: function(e)
	{
		this.set_focused(true, e);
	},
	
	_blur : function(e)
	{
		this.set_focused(false, e);
	},
	
	set_focused: function(value, e)
	{
		if (value)
		{
			this._doFocus(e);
		}
		else 
		{
			this._doBlur(e);
		}

		this._focused = value;
		this._updateLinkClass();
	},
	
	_doFocus: function(e)
	{	
		if (!this._canFocus())
		{
			return;
		}
	
		this._ensureChildControls();
	    this._registerInitializedItems();
		var parent = this.get_parent();
		
		if (parent.get_expanded && (!parent.get_expanded()) && parent.expand)
		{
			parent.expand();
		}

		parent.set_focusedItem(this);
		
		var linkElement = this.get_linkElement();
		if ( linkElement)//!this.get_focused() &&
		{
			linkElement.focus();
		}
		
		this.get_panelBar()._raiseEvent("itemFocus", new ITkey.Web.UI.ItkPanelItemFocusEventArgs(this, e));
	},
	
	_doBlur: function(e)
	{
		if (this.get_isSeparator())
		{
			return;
		}

		if (this.get_focused())
		{
			this.get_linkElement().blur();
		}
	
		this.get_parent()._focusedItem = null;

		var panelBar = this.get_panelBar();
		var instance = this;
		window.setTimeout(
			function()
			{
				if (panelBar._focusedItem == instance)
				{
					panelBar._focusedItem = null;
				}
			}, 100);

		this.get_panelBar()._raiseEvent("itemBlur", new ITkey.Web.UI.ItkPanelItemBlurEventArgs(this, e));
	},
	
	get_focusedItem: function()
	{
		return this._focusedItem;
	},
	
	set_focusedItem : function(value)
	{
		this._focusedItem = value;
	},
	
	_createItemCollection: function()
	{
		var items = new ITkey.Web.UI.ItkPanelItemCollection(this);
		ITkey.Web.UI.ItkPanelBar._createChildControls(this, items);
		
		return items;
	},
	
	_createChildControls : function ()
	{
		ITkey.Web.UI.ItkPanelItem.callBaseMethod(this, '_createChildControls');
	
	},
	
	_registerInitializedItems: function()
	{
	    if(!this._registeredInitializedItems)
	    {
		    for (var i = 0; i < this.get_items().get_count(); i++) 
            {
                var item= this.get_items().getItem(i);
        	    if (item.get_expanded())
                {
	                    item.get_parent().set_expandedItem(item);
	                    item.get_panelBar()._registerExpandedItem(item);
                }
                if (item.get_selected())
                {	
                    item.get_panelBar().set_selectedItem(item);
                    item.get_panelBar()._registerSelectedItem(item);
                }
                item._updateLinkClass();
	            item._registerInitializedItems();
	         }
	         this._registeredInitializedItems = true;
	     }
	},
	_determineCssClass: function()
	{
		var actualCssClass = "rpItem";
		var parent = this.get_parent();
		var itemsCount = parent.get_items().get_count();
		var lastIndex = itemsCount - 1;
		if (this.get_index() == 0 && itemsCount > 0) 
		{
			var previousFirstItem = parent.get_items().getItem(1);
			if (previousFirstItem && previousFirstItem.get_element()) 
			{
				if (previousFirstItem.get_index() == lastIndex) 
				{
					 this._replaceCssClass(previousFirstItem.get_element(), "rpItem rpFirst rpLast", "rpItem rpLast");
					 this._replaceCssClass(previousFirstItem.get_element(), "rpItem rpFirst", "rpItem rpLast");
				}
				else 
				{
					this._replaceCssClass(previousFirstItem.get_element(), "rpItem rpFirst", "rpItem");
				}
			}
			actualCssClass += " " + "rpFirst";
		}
		
		if (this.get_index() == lastIndex && itemsCount > 0) 
		{
			var previousLastItem = parent.get_items().getItem(lastIndex - 1);
			if (previousLastItem && previousLastItem.get_element()) 
			{
				if (previousLastItem.get_index() == 0) 
				{
					this._replaceCssClass(previousLastItem.get_element(), "rpItem rpFirst rpLast", "rpItem rpFirst");
					this._replaceCssClass(previousLastItem.get_element(), "rpItem rpLast", "rpItem rpFirst");
				}
				else 
				{
					this._replaceCssClass(previousLastItem.get_element(), "rpItem rpLast", "rpItem");
				}
			}
			actualCssClass += " " + "rpLast";
		}
		
		if(this.get_isSeparator())
		{
			actualCssClass += " " + "rpSeparator";
		}
		return actualCssClass;
	},
	
	get_imageUrl: function()
	{
		if(this._imageUrl = this._properties.getValue("imageUrl", null))
			return this._imageUrl;
	
		if (!this._imageUrl) 
		{
			var imageElement = this.get_imageElement();
			if (imageElement) 
			{
				this._imageUrl = imageElement.src;
			}
		}
		
		return this._imageUrl;
	},
	
	set_imageUrl: function(value)
	{
		this._imageUrl = value;
		this._properties.setValue("imageUrl", value, true);
		this._updateImageUrl();
	},
	
	get_hoveredImageUrl: function()
	{
		return this._properties.getValue("hoveredImageUrl", null);
	},
	
	set_hoveredImageUrl: function(value)
	{
		this._hoveredImageUrl = value;
		
		this._properties.setValue("hoveredImageUrl", value, true);
		this._updateImageUrl();
	},
	
	get_selectedImageUrl: function()
	{
		return this._properties.getValue("selectedImageUrl", null);
	},
	
	set_selectedImageUrl: function(value)
	{
		this._selectedImageUrl = value;
		this._properties.setValue("selectedImageUrl", value, true);
		this._updateImageUrl();
	},
	
	get_expandedImageUrl: function()
	{
		return this._properties.getValue("expandedImageUrl", null);
	},
	
	set_expandedImageUrl: function(value)
	{
		this._expandedImageUrl = value;
		this._properties.setValue("expandedImageUrl", value, true);
		this._updateImageUrl();
	},
	set_expandedItem : function(value)
	{
		this._expandedItem = value;
	},
	
	get_expandedItem : function()
	{
		return this._expandedItem ;
	},
	
	set_selectedItem : function(value)
	{
		this._selectedItem = value;
	},
	
	get_selectedItem : function()
	{
		return this._selectedItem;
	},
	
	get_templated : function ()
	{
		return this._properties.getValue("templated", false) == true;
	},
	
	get_preventCollapse : function ()
	{
		return this._properties.getValue("preventCollapse", false) == true;
	},
	
	set_preventCollapse : function (value)
	{
		this._preventCollapse = value;
		this._properties.setValue("preventCollapse", value, true);
	},
	
	_render: function(html)
	{
		var cssClass = "rpItem";
		var renderSlide = false;
		if (this.get_parent().get_items().get_count() == 1) 
		{
			renderSlide = true
		}
		
		html[html.length] = "<li class='" + this._determineCssClass() + "'>";
		this._renderLink(html);
		if (this.get_imageUrl()) 
		{
			 this._renderImage(html);
		}
		html[html.length] = "<span class='rpText'>";
		html[html.length] = this.get_text();
		html[html.length] = "</span></a>";
		
		var items = this.get_items();
		var childrenCount = items.get_count();
		
		this._renderChildList(html);
		
		html[html.length] = "</li>";
	},
	
	_renderImage: function(html)
	{
		html[html.length] = "<img alt='' src='" + this._getImageUrlToApply() + "' class='rpImage'";
		
		html[html.length] = "/>";
		
		return html;
	},
	
	_renderLink: function(html)
	{
		if (this._isSeparator)
		{
			return;
		}
		var href = "#";

		var navigateUrl = this.get_navigateUrl();
		if (navigateUrl && navigateUrl != "#")
		{
			href = navigateUrl;
		}
		
		html[html.length] = "<a href=\"";
		html[html.length] = href;
		html[html.length] = "\" ";
	
		var target = this.get_target();
		if (target)
		{
			html[html.length] = "target=\"";
			html[html.length] = target;
			html[html.length] = "\" ";
		}
		
		if (this.get_enabled()) 
		{
			html[html.length] = "class=\"rpLink\"";
		}
		else 
		{
			html[html.length] = "class=\"rpLink rpDisabled\"";
		}
		
		html[html.length] = ">";
		
		return html;		
	},
	
	_renderChildList: function(html)
	{
		var childrenCount = this.get_items().get_count();
		if (childrenCount > 0) 
		{	
			html[html.length] = "<div class='rpSlide' style='";
			
			if (this.get_expanded()) 
			{
				html[html.length] = "display : block";
			}
			
			html[html.length] = " '>";
			
			var level = "rpLevel" + (this.get_level() + 1);
			groupCssClass = "rpGroup" + " " + level;
			
			
			html[html.length] = "<ul class='" + groupCssClass;
			if (this.get_expanded()) 
			{
				html[html.length] = "style='display : block'";
			}
			html[html.length] = "'>";
			for (var i = 0; i < childrenCount; i++) 
			{
				this.get_items().getItem(i)._render(html);
			}
			html[html.length] = "</ul></div>";
		}
	},
	
	_renderAccessKey : function ()
	{
		if (this.get_isSeparator())
		{
			return;
		}
		if (!this.get_linkElement())
		{
			return;
		}
		
		var accessKey = this.get_linkElement().accessKey.toLowerCase();
		
		// If accessKey is not set
		if (!accessKey)
		{
			return;
		}
		var text = this.get_textElement().firstChild.nodeValue;
		var indexOfAccessKey = text.toLowerCase().indexOf(accessKey);
		
		// If accesKey is not found
		if (indexOfAccessKey == -1)
		{
			return;
		}
		
		this.get_textElement().innerHTML = 
			text.substr(0, indexOfAccessKey) + 
			"<u>" + 
			text.substr(indexOfAccessKey,  1) + 
			"</u>" + 
			text.substr(indexOfAccessKey + 1, text.length);
	},
	
	_createChildListElement: function()
	{
		var parentListElement = document.createElement("ul");
	
		var level = "rpLevel" + (this.get_level() + 1);
		groupCssClass =  "rpGroup" + " " + level;
		
		parentListElement.className = groupCssClass;
		
		var slideWrapElement = this._createSlideWrapElement();
		slideWrapElement.appendChild(parentListElement);
		this.get_element().appendChild(slideWrapElement);	
		
		return slideWrapElement;

	},
	
	_createSlideWrapElement: function()
	{
		var slideWrapElement = document.createElement("div");
		slideWrapElement.className = "rpSlide";
		if(this.get_expanded())
		{
			slideWrapElement.style.display = "block";
		}
		else
		{
			slideWrapElement.style.display = "none";
		}
		return slideWrapElement;
	},
	
	_calculateGroupHeight : function()
	{
		var childList = this.get_childListElement();
		if (this.get_level() == 0 && this.get_panelBar().get_fullExpandedItem())
		{	
			childList.style.height = this.get_panelBar()._getGroupHeight() + "px";
		}
	},

	_displayChildren : function (show)
	{
		var aniamtionContainer = this._getAnimationContainer();
		if (!aniamtionContainer) return;

		if (this._animation)
		{
			this._animation.stop();
		}
		
		aniamtionContainer.style.height = "auto";
		
		var panel = this.get_panelBar();
		if (show)
		{
			// Hide the node list.
			aniamtionContainer.style.visibility = "hidden";
			aniamtionContainer.style.display = "block";
			
			// Record its height and set it to 0px to avoid flicker.
			var height = aniamtionContainer.offsetHeight;
			
			this._expanding = true;
			var expandAnimation = panel.get_expandAnimation();
			if (expandAnimation.get_type() != ITkey.Web.UI.AnimationType.None)
			{
				this._playAnimation(panel.get_expandAnimation(), 0, height);
			}
			else
			{
			    this._playAnimation(panel.get_expandAnimation(), height, height);
			}
		}
		else
		{
			this._expanding = false;
			var collapseAnimation = panel.get_collapseAnimation();
			if (collapseAnimation.get_type() != ITkey.Web.UI.AnimationType.None)
			{
				this._playAnimation(panel.get_collapseAnimation(), aniamtionContainer.offsetHeight, 0);
			}
			else
			{
				this._animationEnded();
			}
		}
	},
	
	_playAnimation: function(animationSettings, startHeight, finalHeight)
	{
		var duration = animationSettings.get_duration();
		var points = ITkey.Web.UI.AnimationFunctions.CalculateAnimationPoints(animationSettings, startHeight, finalHeight, this._fps);
		var animatedElement = this._getAnimationContainer();
		
		for (var i = 0; i < points.length; i++)
		{
			points[i] = Math.max(0, parseInt(points[i])) + "px";
		}

		// Show the animatedElement after the calculations have been done.		
		animatedElement.style.visibility = "visible";
		
		if (this._animation)
		{
			this._animation.set_duration(duration / 1000);
			this._animation.set_values(points);
		}
		else
		{
			this._animation = new $TWA.DiscreteAnimation(animatedElement, duration / 1000, this._fps, "style", "height", points);
			this._animation.add_ended(this._animationEndedDelegate);
			this._animation.add_started(this._onExpandAnimationStartedDelegate);
		}
				
		this._animation.play();
	},
	
	_disposeAnimation : function ()
	{
		if (this._animation) 
		{
			this._animation.dispose();
			this._animation = null;
		}
	},
	
	_animationEnded : function ()
	{	
		if (!this._expanding)
		{
			this._getAnimationContainer().style.display = "none";
			
		}
		else 
		{
			if(window.netscape && !window.opera && this._changedOverflow )
			{
				this.get_childListElement().style.overflow = "auto";
				this._changedOverflow = false;
				
			}
			this._getAnimationContainer().style.height = "auto";
			this.get_panelBar()._callItkShow();
		}
	},
	
	_onExpandAnimationStarted : function (sender, e)
	{
		if(window.netscape && !window.opera)
		{
			this.get_childListElement().style.overflow = "hidden";
			this._changedOverflow =  true;
		}
	}
}

ITkey.Web.UI.ItkPanelItem.registerClass('ITkey.Web.UI.ItkPanelItem', ITkey.Web.UI.ControlItem);


if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();