Type.registerNamespace('Infragistics.Web.UI');
Type.registerNamespace("Infragistics.Web.UI.ImageViewerObjects");

var $IGIV = Infragistics.Web.UI.ImageViewerObjects;

$IG.WebImageViewer = function(element)
{
    /// <summary>
    /// Displays Images in scrollable format. 
    /// </summary>
	$IG.WebImageViewer.initializeBase(this, [element]);
}

$IG.WebImageViewer.prototype =
{
	_thisType: 'imageViewer',

	/******OVERRIDES**********/
	initialize: function()
	{
		this.__initializing = true;
		this._itemsToAdd = {};
		this.__imgRes = this._get_clientOnlyValue("res");
		this._element.tabIndex = this._get_clientOnlyValue("ti");
		this._imageDisabledClass = this._get_clientOnlyValue("imgD");
		$IG.WebImageViewer.callBaseMethod(this, 'initialize');

		this._otherImageHoverClass = this._get_clientOnlyValue("imgOH");

		/* When Scrolling through the images, white spaces are showing up between some images, due to Text Elements
		* being rendered in the markup via white space. So lets remove them so that we don't have that issue.*/
		var childNodes = this._imageArea.childNodes;
		for (var i = childNodes.length - 1; i >= 0; i--)
		{
			if (!childNodes[i].getAttribute)
				this._imageArea.removeChild(childNodes[i]);
		}

		this._scrollWheel = new $IGIV.ScrollWheel(this._imageArea, this.get_orientation(), this.get_enabled());

		this._dragScroll = new $IGIV.DragScroll(this._imageArea, this.get_orientation(), this._get_clientOnlyValue("ohc"), this._get_clientOnlyValue("chc"), this.get_enableDragScrolling());
		this._dragScroll.setEnabled(this.get_enabled() && this.get_enableDragScrolling());
		this._dragScroll.onDragScrollStarting = Function.createDelegate(this, this.__dragScrollStarting);
		this._dragScroll.onDragScrollComplete = Function.createDelegate(this, this.__dragScrollComplete);


		if (this._onTimer(true))/* no need to process first paint */
			delete this._onTimer;
		else/* enable processing first paint */
			ig_ui_timer(this);

	},

	_onTimer: function(init, play)
	{
		// Delay loading the control until we know its visible. This will make sure that the Navigation buttons are enabled correctly.
		/* AS 20081020 B#8946 fix*/
		if (typeof (this._element) != "undefined" && this._element != null && this._element.offsetWidth != 0)
		{
			this.__ensureDragWrapSet();

			this.set_enableDragScrolling(this.get_enableDragScrolling());

			this._kbBehavior = new $IG.ImageViewerKbBehavior(this._element, this);

			if (this._thisType == 'imageViewer')
				this._raiseClientEvent('Initialize');

			this.__initScrollPos();

			this.__initializing = false;

			this.__ensureDisabledImages()
			return true;
		}
		else
			return false;
	},

	_ensureFlags: function()
	{
		$IG.WebImageViewer.callBaseMethod(this, "_ensureFlag");
		this._ensureFlag($IG.ClientUIFlags.Enabled, $IG.DefaultableBoolean.True);
		this._ensureFlag($IG.ClientUIFlags.Hoverable, $IG.DefaultableBoolean.True);
		this._ensureFlag($IG.ClientUIFlags.Draggable, $IG.DefaultableBoolean.False);
		this._ensureFlag($IG.ClientUIFlags.Droppable, $IG.DefaultableBoolean.False);
		this._ensureFlag($IG.ClientUIFlags.Selectable, $IG.DefaultableBoolean.True);

	},

	_setupMarkerElements: function()
	{
		this._imageArea = this._elements["imageArea"];

		if ($util.IsSafari && this.get_orientation() == $IG.Orientation.Vertical)
			this._imageArea.style.height = this._imageArea.offsetHeight + "px";

		this._scrollHelper = new $IG.ScrollHelper(this._imageArea);
	},

	_addHandlers: function()
	{
		$IG.WebImageViewer.callBaseMethod(this, '_addHandlers');
		this._registerHandlers(["mousedown", "click", "selectstart", "mouseover", "mouseout"]);
	},

	_addOtherHandlers: function()
	{
		$IG.WebImageViewer.callBaseMethod(this, '_addOtherHandlers');
		this._registerOtherHandlers([{ "mouseup": document, "scroll": this._imageArea}]);
	},

	_createItem: function(element, adr)
	{
	    if(element.tagName == "IMG") return; /* If it is an IMG element - skip it, because it was just created */
		var imgItemObj = this._itemCollection._addObject($IG.ImageItem, element, adr);	
	},
    
	_createObject: function(element, obj)
	{
		if (obj == 'header')
		{
			this._header = new $IG.CaptionArea(obj, element, this._objectsManager.get_objectProps(0), this, "headerContent");
			this._objectsManager.register_object(0, this._header);
		}
		else if (obj == 'footer')
		{
			this._footer = new $IG.CaptionArea(obj, element, this._objectsManager.get_objectProps(1), this, "footerContent");
			this._objectsManager.register_object(1, this._footer);
		}
	},

	_setupCollections: function()
	{
		this._itemCollection = this._collectionsManager.register_collection(0, $IG.ImageItemCollection);
		this._collectionsManager.registerUIBehaviors(this._itemCollection);
	},

	_onSubmitOtherHandler: function(e)
	{
		this.__storeScrollPos();
		$IG.WebImageViewer.callBaseMethod(this, '_onSubmitOtherHandler', [e]);
	},

	_responseComplete: function(callbackObject, responseObject)
	{
		var currentControl = this;
		var props = eval(responseObject.context[0]);
		var html = responseObject.context[1];
		var div = document.createElement("DIV");
		div.innerHTML = html;
		var id = currentControl._id;

		if (!currentControl._element)
			currentControl = ig_controls[id];

		var childNodeCount = div.childNodes.length;
		for (var i = 0; i < childNodeCount; i++)
		{
			var child = div.childNodes[i];
			if (child.getAttribute && child.id == id)
			{
				currentControl._element.className = child.className;
				for (var i in child.style)
				{
					try { currentControl._element.style[i] = child.style[i]; } catch (exception) { };
				}
				currentControl._element.innerHTML = child.innerHTML;
				break;
			}
		}
		var name = currentControl.get_name();
		currentControl.dispose();
		ig_controls[id] = null;

		var control = $create($IG.WebImageViewer, { "id": id, "name": name, "props": props }, null, null, $get(id));

		var type = callbackObject.serverContext.type;
		if (type == "add" || type == "addRange" || type == "insert")
		{
			var items = responseObject.context[2];
			if (items != null && items.length > 0)
			{
				for (var i = 0; i < items.length; i++)
				{
					var item = control.get_items()._getObjectByAdr(items[i]);
					if (type == "add" || type == "addRange")
						control._raiseClientEvent('ImageItemAdded', 'ImageViewer', null, null, item);
					else if (type == "insert")
						control._raiseClientEvent('ImageItemInserted', 'ImageViewer', null, null, item);
				}
			}
		}
		else if (type == "remove")
		{
			var item = callbackObject.clientContext.item;
			control._raiseClientEvent('ImageItemRemoved', 'ImageViewer', null, null, item);
		}
		else if (type == "removeRange")
		{
			var items = callbackObject.clientContext.items;
			for (var i = 0; i < items.length; i++)
				control._raiseClientEvent('ImageItemRemoved', 'ImageViewer', null, null, items[i]);
		}
	},

	dispose: function()
	{
		this._imageArea = null;

		this._scrollWheel.dispose();
		this._dragScroll.dispose();

		if (this._kbBehavior != null)
			this._kbBehavior.dispose();

		if (this._nextButton != null)
			this._nextButton.dispose();

		if (this._prevButton != null)
			this._prevButton.dispose();

		if (this._scrollHelper != null)
			this._scrollHelper.dispose();

		$clearHandlers(this.get_element());
		$IG.WebImageViewer.callBaseMethod(this, 'dispose');
	},
	/******END OVERRIDES**********/

	/******PROPERTIES******/

	get_scrollAnimations: function()
	{
		///<summary>
		/// Returns the object that contains the settings to change the type of Animation that will occur when the WebImageViewer scrolls Images into view. 
		///</summary>
		if (this._scrollAnimations == null)
		{
			this._scrollAnimations = new $IG.ScrollAnimations("ScrollAnimations", this._imageArea, this._objectsManager.get_objectProps(2), this);
			this._objectsManager.register_object(2, this._scrollAnimations);
		}
		return this._scrollAnimations;
	},

	get_wrapAround: function()
	{
		///<summary>
		/// Returns/sets if images will loop around infinitely in the WebImageViewer.
		///</summary>
		return this._get_value($IG.ImageViewerProps.WrapAround, true);
	},
	
	get_enableInitialFadeAnimation: function()
	{
		///<summary>
		/// Returns if images will have initial fade-in animation during WebImageViewer initialization.
		///</summary>
		return this._get_value($IG.ImageViewerProps.EnableInitialFadeAnimation, true);
	},
	
	get_orientation: function()
	{
		///<summary>
		/// Return/sets the orientation of the WebImageViewer. 
		/// Note: setting the orientation of the WebImageViewer on the client, will result in an AJAX callback.
		///</summary>
		return this._get_value($IG.ImageViewerProps.Orientation);
	},

	set_orientation: function(val)
	{
		if (val != this.get_orientation())
		{
			var cbo = this._callbackManager.createCallbackObject();
			cbo.serverContext.type = "orientation";
			cbo.serverContext.value = val;
			this._callbackManager.execute(cbo);
		}
	},

	get_hoverClass: function()
	{
		///<summary>
		/// Returns the hover CSS class that is applied when an ImageItem is hovered.
		///</summary>
		return this._get_clientOnlyValue("imgH");
	},
	get_selectedClass: function()
	{
		///<summary>
		/// Returns the selected CSS class that is applied when an ImageItem is selected.
		///</summary>
		return this._get_clientOnlyValue("imgS");
	},

	get_enableDragScrolling: function()
	{
		///<summary>
		/// Returns/sets if the user can MouseDown over the image area of the WebImageViewer and scroll the Images by dragging.
		///</summary>
		return this._get_value($IG.ImageViewerProps.DragScroll, true);
	},
	set_enableDragScrolling: function(val)
	{
		this._set_value($IG.ImageViewerProps.DragScroll, val);
		this._dragScroll.setEnabled(this.get_enabled() && val);
	},


	get_enabled: function()
	{
		///<summary>
		/// Returns/sets whether thie ImageViewer is enabled.
		///</summary>
		return this._getFlags().getEnabled();
	},

	set_enabled: function(value)
	{
		this._dragScroll.setEnabled(value && this.get_enableDragScrolling());
		this._scrollWheel.setEnabled(value);
		var items = this.get_items()._items;
		var count = items.length;
		for (var i = 0; i < count; i++)
			items[i].set_enabled(value);

		if (value)
			this.__ensureDisabledImages();
		else
		{
			this._get_nextButton().setState($IG.ImageState.Disabled);
			this._get_prevButton().setState($IG.ImageState.Disabled);
		}
		this._getFlags().setEnabled(value);
	},

	get_selectedItem: function(item)
	{
		/// <summary>
		/// Returns/Sets the ImageItem that is to be Selected.
		/// When set to null, no image will be selected.
		/// </summary>
		var items = this.__getUIBehaviors().getSelectedItems();
		if (items != null && items.length > 0)
			return items[0];
		return null;
	},

	set_selectedItem: function(item)
	{
		this.__getUIBehaviors().select(item);
	},

	get_selectedIndex: function()
	{
		/// <summary>
		/// Returns/Sets the index of the ImageItem that is to be selected.
		/// When set to -1, no image will be selected.
		/// </summary>
		var items = this.__getUIBehaviors().getSelectedItems();
		if (items != null && items.length > 0)
			return items[0].get_index();
		return -1;
	},
	set_selectedIndex: function(index)
	{
		var items = this.get_items()._items;
		if (index >= items.length)
			return;
		else if (index <= -1)
			this.__getUIBehaviors().unSelectAll();
		else
			this.__getUIBehaviors().select(items[index]);
	},

	get_items: function()
	{
		/// <summary>
		/// The collection of ImageItems in the WebImageViewer.
		/// </summary>
		return this._itemCollection;
	},


	get_header: function()
	{
		/// <summary>
		/// A templatable object that can be used to display information at the top of the control.
		/// </summary>
		return this._header;
	},

	get_footer: function()
	{
		/// <summary>
		/// A templatable object that can be used to display information at the bottom of the control.
		/// </summary>
		return this._footer;
	},

	/******END PROPERTIES******/

	/******PUBLIC METHODS******/

	navigateNext: function()
	{
		/// <summary>
		/// Simulates what happens when a user presses the next button. 
		/// Note: if the ScrollAnimation is set to continuous, you must call the endNavigation method to stop navigation.
		/// </summary>
		this.__scrollPlay($IG.ScrollNavigationDirection.Next)
	},

	navigatePrev: function()
	{
		/// <summary>
		/// Simulates what happens when a user presses the previous button. 
		/// Note: if the ScrollAnimation is set to continuous, you must call the endNavigation method to stop navigation.
		/// </summary>
		this.__scrollPlay($IG.ScrollNavigationDirection.Prev)
	},

	endNavigation: function()
	{
		/// <summary>
		/// If the navigateNext or navigatePrev methods are called, and the ScrollAnimation is set to continuous, this method will end the current animation that is occurring.
		/// </summary>
		var type = this.get_scrollAnimations().get_type();
		if (type == $IG.ScrollAnimation.Continuous)
			this.get_scrollAnimations().get_continuousAnimation().stop()
	},

	getVisibleAreaWidth: function()
	{
		/// <summary>
		/// Returns the width of the visible image area.
		/// </summary>
		/// <returns integer="true">An integer.</returns>
		return this._imageArea.offsetWidth;
	},

	getVisibleAreaHeight: function()
	{
		/// <summary>
		/// Returns the height of the visible image area.
		/// </summary>
		/// <returns integer="true">An integer.</returns>
		return this._imageArea.offsetHeight;
	},

	/******END PUBLIC METHODS*****/

	/******EVENT HANDLERS*****/

	_onMouseoverHandler: function(elem, adr, evnt)
	{
		if (!this.get_enabled())
			return;

		if (adr == "next")
			this.__setNextButtonState($IG.ImageState.Hover);
		if (adr == "prev")
			this.__setPrevButtonState($IG.ImageState.Hover);
	},

	_onMouseoutHandler: function(elem, adr, evnt)
	{
		if (!this.get_enabled())
			return;

		this.endNavigation();

		if (adr == "next")
			this.__setNextButtonState($IG.ImageState.Normal);
		if (adr == "prev")
			this.__setPrevButtonState($IG.ImageState.Normal);
	},

	_onMousedownHandler: function(elem, adr, evnt)
	{
		if (!this.get_enabled() || evnt.button != 0)
			return;
		if (adr == "next")
		{
			this.__setNextButtonState($IG.ImageState.Pressed);
			this.navigateNext();
		}
		else if (adr == "prev")
		{
			this.__setPrevButtonState($IG.ImageState.Pressed);
			this.navigatePrev();
		}
	},
	_onMouseupOtherHandler: function(elem, evnt)
	{
		if (!this.get_enabled())
			return;

		this.endNavigation();

		var next = this._get_nextButton();
		var prev = this._get_prevButton();

		this.__setPrevButtonState($IG.ImageState.Normal);
		this.__setNextButtonState($IG.ImageState.Normal);


		if (elem == prev.get_element())
			this.__setPrevButtonState($IG.ImageState.Hover);
		else if (elem == next.get_element())
			this.__setNextButtonState($IG.ImageState.Hover);
	},

	_onClickHandler: function(elem, adr, evnt)
	{
		if (!this.get_enabled())
		{
			$util.cancelEvent(evnt);
			return;
		}
		if (elem.tagName == "BUTTON")
			$util.cancelEvent(evnt);

		if (adr == "next")
			this._raiseClientEvent('NextButtonClicked', 'ImageViewerButton', evnt, null, this._get_nextButton().get_element());
		else if (adr == "prev")
			this._raiseClientEvent('PrevButtonClicked', 'ImageViewerButton', evnt, null, this._get_prevButton().get_element());

		var item = this._get_item(adr)
		if (item)
		{
			if (item.get_enabled())
				this._raiseClientEvent('ImageClick', 'ImageViewer', evnt, null, item);
			else
				$util.cancelEvent(evnt);
		}
	},

	_onSelectstartHandler: function(elem, adr, evnt)
	{
		$util.cancelEvent(evnt);
	},

	_onScrollOtherHandler: function(elem, evnt)
	{
		this.__ensureDisabledImages();
	},
	/****** END EVENT HANDLERS*****/

	/******* UI BEHAVIORS *********/
	_hoverItem: function(item, val)
	{
		this.__hoverItem(item, val, true);
	},

	_selectItem: function(item, val)
	{
		this.__selectItem(item, val, true);
	},
	/******* END UI BEHAVIORS *********/

	/******* PRIVATE METHDOS *********/

	_get_nextButton: function()
	{
		if (this._nextButton == null)
		{
			this._nextButton = new $IG.ImageObject("next", this._elements["next"], this._objectsManager.get_objectProps(3), this);
			this._objectsManager.register_object(3, this._nextButton);
		}
		return this._nextButton;
	},

	_get_prevButton: function()
	{
		if (this._prevButton == null)
		{
			this._prevButton = new $IG.ImageObject("prev", this._elements["prev"], this._objectsManager.get_objectProps(4), this);
			this._objectsManager.register_object(4, this._prevButton);
		}
		return this._prevButton;
	},

	__scrollPlay: function(direction, type)
	{
		var scrollAnimations = this.get_scrollAnimations();
		if (!type)
			type = scrollAnimations.get_type();
		if (type == $IG.ScrollAnimation.Continuous)
		{
			var continuous = scrollAnimations.get_continuousAnimation();
			continuous.play(direction);
		}
		else if (type == $IG.ScrollAnimation.NextItem)
		{
			var nextItem = scrollAnimations.get_nextItemAnimation();
			nextItem.play(direction);
		}
		else if (type == $IG.ScrollAnimation.Page)
		{
			var page = scrollAnimations.get_pageAnimation();
			page.play(direction);
		}
	},
	__ensureDisabledImages: function(overrideWrap)
	{
		if (overrideWrap)
			return;

		var nextButton = this._get_nextButton();
		var prevButton = this._get_prevButton();

		var wrap = this.__getWrapResolved();
		if (wrap)
		{
			if (nextButton.getState() == $IG.ImageState.Disabled)
				nextButton.setState($IG.ImageState.Normal);
			if (prevButton.getState() == $IG.ImageState.Disabled)
				prevButton.setState($IG.ImageState.Normal);
			return;
		}

		this._scrollHelper.update(null, this.get_orientation());

		if (nextButton.get_element() != null)
		{
			if (this._scrollHelper.getScrollPos() + this._scrollHelper.getSize(this._imageArea) >= this._scrollHelper.getScrollSize())
				nextButton.setState($IG.ImageState.Disabled);
			else
			{

				if (!this.__isScrolling || nextButton.getState() == $IG.ImageState.Disabled)
					nextButton.setState($IG.ImageState.Normal);
			}
		}
		if (prevButton.get_element() != null)
		{
			if (this._scrollHelper.getScrollPos() == 0)
				prevButton.setState($IG.ImageState.Disabled);
			else
			{
				if (!this.__isScrolling || prevButton.getState() == $IG.ImageState.Disabled)
					prevButton.setState($IG.ImageState.Normal);
			}
		}
	},

	__setPrevButtonState: function(state)
	{
		var prev = this._get_prevButton();
		if (prev.getState() != $IG.ImageState.Disabled)
			prev.setState(state);
	},

	__setNextButtonState: function(state)
	{
		var next = this._get_nextButton();
		if (next.getState() != $IG.ImageState.Disabled)
			next.setState(state);
	},

	__getWrapResolved: function()
	{
		var wrap = this.get_wrapAround();
		if (wrap)
		{
			this._scrollHelper.update(null, this.get_orientation());
			var viewSize = this._scrollHelper.getSize(this._imageArea);
			var items = this.get_items();
			var length = items.get_length();
			wrap = false;
			for (var i = 0; i < length; i++)
			{
				var item = items.getItem(i);
				var elem = item._element;
				if (!item.__imageReady)
				{
					this.__wrapSet = false;
					return true;
				}
				var pos = this._scrollHelper.getPos(elem);
				if (pos > viewSize)
					return true;
			}
		}
		return wrap;
	},

	__getUIBehaviors: function()
	{
		return this._itemCollection._getUIBehaviorsObj();
	},

	__isScrolling: function()
	{
		var scrollAnimations = this.get_scrollAnimations();
		var type = scrollAnimations.get_type();
		if (type == $IG.ScrollAnimation.Continuous)
		{
			var continuous = scrollAnimations.get_continuousAnimation();
			return continuous.isPlaying();
		}
		else if (type == $IG.ScrollAnimation.NextItem)
		{
			var nextItem = scrollAnimations.get_nextItemAnimation();
			return nextItem.isPlaying();
		}
		else if (type == $IG.ScrollAnimation.Page)
		{
			var page = scrollAnimations.get_pageAnimation();
			return page.isPlaying();
		}
		return false;
	},
	__dragScrollStarting: function()
	{
		var elem = this._dragScroll._currentEvnt.target;
		var obj = $util.resolveMarkedElement(elem);
		if (obj != null)
		{
			var item = this._get_item(obj[1])
			if (item)
				this.__hoverItem(item, false, false);
		}
	},

	__dragScrollComplete: function()
	{
		var elem = this._dragScroll._currentEvnt.target;
		var obj = $util.resolveMarkedElement(elem);
		if (obj != null)
		{
			var item = this._get_item(obj[1])
			if (item && item.get_enabled())
				this.__hoverItem(item, true, false);
		}
	},
	__selectItem: function(item, val, fireEvent)
	{
		if (!this.__initializing)
		{
			$util.removeCompoundClass(item._element, this.get_selectedClass());
			$util.removeCompoundClass(item._element, item.get_selectedCssClass());
		}
		if (val)
		{
			$util.addCompoundClass(item._element, this.get_selectedClass());
			$util.addCompoundClass(item._element, item.get_selectedCssClass());
			if (fireEvent && !this.__initializing)
				this._raiseClientEvent('ImageSelected', 'ImageViewer', null, null, item);
		}

	},

	__hoverItem: function(item, val, fireEvent)
	{
		if (this._dragScroll.isDragging())
			return;

		if (val)
		{
			var hoverImage = item.get_hoverImageUrl();
			if (hoverImage && hoverImage.length > 0)
				item._element.src = hoverImage;
			var itemAdr = item._get_address();
			for (var adr in this._itemCollection._items)
			{
				var otherItem = this._itemCollection._items[adr];
				if (adr != itemAdr)
					$util.addCompoundClass(otherItem._element, this._otherImageHoverClass);
			}
			$util.removeCompoundClass(item._element, this._otherImageHoverClass);
			$util.addCompoundClass(item._element, this.get_hoverClass());

			$util.addCompoundClass(item._element, item.get_hoverCssClass());

			if (fireEvent)
				this._raiseClientEvent('ImageMouseOver', 'ImageViewer', null, null, item);
		}
		else
		{
			for (var adr in this._itemCollection._items)
				$util.removeCompoundClass(this._itemCollection._items[adr]._element, this._otherImageHoverClass);

			$util.removeCompoundClass(item._element, this.get_hoverClass());

			$util.removeCompoundClass(item._element, item.get_hoverCssClass());

			item.get_element().src = item.get_imageUrl();

			if (fireEvent)
				this._raiseClientEvent('ImageMouseOut', 'ImageViewer', null, null, item);
		}
	},

	__initScrollPos: function()
	{
		var firstItem = this._get_value($IG.ImageViewerProps.FirstItem)
		var scrollPos = this._get_value($IG.ImageViewerProps.ScrollPosition);

		if (firstItem != 0)
		{
			var count = this._itemCollection.get_length();
			if (count > 0)
			{
				var item = this._get_item(firstItem);
				if (item != null)
				{
					if (firstItem < count / 2)
						this._scrollHelper.scrollItemIntoView($IG.ScrollNavigationDirection.Next, this.get_orientation(), item._element.parentNode, scrollPos, this.get_wrapAround());
					else
						this._scrollHelper.scrollItemIntoView($IG.ScrollNavigationDirection.Prev, this.get_orientation(), item._element.parentNode, scrollPos, this.get_wrapAround());
				}
			}
		}
		else if (scrollPos != 0)
		{
			if (this.get_orientation() == $IG.Orientation.Horizontal)
				this._imageArea.scrollLeft = scrollPos;
			else
				this._imageArea.scrollTop = scrollPos;
		}
	},

	__getFirstItemAdr: function()
	{
		var firstItem;
		var children = this._imageArea.childNodes;
		var count = children.length;
		for (var i = 0; i < count; i++)
		{
			var elem = children[i];
			if (elem.getAttribute)
			{
				while (elem != null && elem.getAttribute && elem.childNodes.length > 0)
				{
					if (elem.getAttribute("adr"))
						break;
					elem = this._scrollHelper.resolveItem(elem);
				}
				firstItem = elem.getAttribute("adr");
				break;
			}
		}
		return firstItem;
	},

	__storeScrollPos: function()
	{
		if (this._imageArea != null)
		{
			var firstItem = this.__getFirstItemAdr();
			this._clientStateManager.set_value($IG.ImageViewerProps.FirstItem, firstItem);
			if (this.get_orientation() == $IG.Orientation.Horizontal)
				this._clientStateManager.set_value($IG.ImageViewerProps.ScrollPosition, this._imageArea.scrollLeft);
			else
				this._clientStateManager.set_value($IG.ImageViewerProps.ScrollPosition, this._imageArea.scrollTop);
		} 
	},

	__resolveUrl: function(url)
	{
		if (url.replace)
			return url.replace("~", this.__imgRes).replace("//", "/").replace("http:/", "http://");
		else
			return "";
	},

	__ensureDragWrapSet: function()
	{
		if (this._dragScroll && !this.__wrapSet)
		{
			this.__wrapSet = true;
			var wrap = this.__getWrapResolved();
			this._dragScroll.setWrap(wrap);
			this._scrollWheel.setWrap(wrap);
			this.__ensureDisabledImages(wrap);
		}
	},

	__notifyItemLoaded: function()
	{
		this.__ensureDragWrapSet();
		if (this.__itemsLoaded)
			return;
		if (!this._scrollHelper)
			return;
		var wrap = (this.get_wrapAround() && this.__getWrapResolved());
		if (wrap)
			this.__itemsLoaded = true;

		if (!this.__enabledEnsured)
		{
			this.__initializing = true;
			this.set_enabled(this.get_enabled());
			this.__initializing = false;
			this.__enabledEnsured = true;
		}

		this.__ensureDisabledImages();
	}
	/******* END PRIVATE METHDOS *********/

}

$IG.WebImageViewer.registerClass('Infragistics.Web.UI.WebImageViewer', $IG.NavControl);


$IG.ImageItem = function(adr, element, props, control, csm)
{    
    /// <summary>
    /// Represents an item in the WebImageViewer control. 
    /// </summary>
    
    this._control = control;
    var isIMG = true;
    var imgElem = element;
    if(element.nodeName != "IMG")
        isIMG = false;    
    /* note: here element is an ANCHOR tag in the initializetion,
     * but an Image when creating ImageItems on client */    
    if(!isIMG)
    {
        /* Create a required IMG element */	    
        imgElem = document.createElement("IMG");
        /* Set necessary style and border attribute */
        imgElem.style.visibility = "hidden";
        imgElem.setAttribute("border","0");
        if(this._control.get_orientation() == $IG.Orientation.Horizontal)
           imgElem.style.height = "100%";
        else
           imgElem.style.width = "100%";	        
        /* copy required attributes from the ancestor Anchor element */
        /* the ID that will create the ADR is required for the Wrappers */
        imgElem.setAttribute("id", element.getAttribute("id"));
        /* remove the attributes from the ancestor Anchor element */
        element.removeAttribute("id");
    }
    $IG.ImageItem.initializeBase(this, [adr, imgElem, props, control,csm]);
    if(!isIMG)
    {
        imgElem.className = this._get_clientOnlyValue("fullCssClass");
        imgElem.setAttribute("alt", this.get_altText());
        element.appendChild(imgElem);
	}
	this._loadedDelegate = Function.createDelegate(this, this._readyStateChanged);
	var imgUrl = this.get_imageUrl();
    if(this.get_enabled())
    {
        if(imgUrl != null && imgUrl.length > 0)
        {
            if($util.IsIE)
            	$addHandler(this._element, "readystatechange", this._loadedDelegate);  
            else
            	$addHandler(this._element, "load", this._loadedDelegate);   
        }
    }
    else
    {
        $util.addCompoundClass(this._element, this._owner._imageDisabledClass);
        $util.addCompoundClass(this._element, this.get_disabledCssClass());
        element.style.visibility = "";
	    this._element.style.visibility = "";
    }
	
    this._element.src = imgUrl;
	
    this._calcActualSizeOfImage();
    
    var tooltip = this.get_tooltip();
    if(tooltip != null && tooltip.length > 0)
        this._element.title = tooltip;
}

$IG.ImageItem.prototype =
{
	isVisible: function()
	{
		///<summary>
		/// Determines if the item is in the visible image area.
		///</summary>
		///<returns>True if the image is in the visible area, otherwise false. </returns>
		return this.__isVisible(this._element);
	},

	_ensureFlags: function()
	{
		$IG.ImageItem.callBaseMethod(this, "_ensureFlag");
		this._ensureFlag($IG.ClientUIFlags.Selectable, $IG.DefaultableBoolean.True);
		this._ensureFlag($IG.ClientUIFlags.Draggable, $IG.DefaultableBoolean.False);
		this._ensureFlag($IG.ClientUIFlags.Droppable, $IG.DefaultableBoolean.False);
		this._ensureFlag($IG.ClientUIFlags.Visible, $IG.DefaultableBoolean.True);
	},
	__isVisible: function(element)
	{
		if (!element)
			element = this._element;

		var contentArea = null;
		try
		{
			contentArea = element.offsetParent;
		}
		catch (ex) { };
		if (contentArea == null) /* SJZ - In firefox, if the element's display is none, then it does not have an OffsetParent*/
			return false;
		while (contentArea != null && contentArea.offsetWidth <= element.offsetWidth && contentArea.tagName != "DIV") /* AS Only if the contentArea is not DIV */
			contentArea = contentArea.offsetParent;
		if (this._control.get_orientation() == $IG.Orientation.Horizontal)
		{
			var visibleAreaWidth = contentArea.offsetWidth;
			var startVisibleArea = contentArea.scrollLeft;
			var endVisibleArea = visibleAreaWidth + startVisibleArea;
			/* AS also if the offsetLeft equals to startVisibleArea */
			if (element.offsetLeft >= startVisibleArea && element.offsetLeft < endVisibleArea)
				return true;

			var endImage = element.offsetLeft + element.offsetWidth;
			if (endImage > startVisibleArea && endImage < endVisibleArea)
				return true;
		}
		else
		{
			var visibleAreaHeight = contentArea.offsetHeight;
			var startVisibleArea = contentArea.scrollTop;
			var endVisibleArea = visibleAreaHeight - startVisibleArea;

			if (element.offsetTop > startVisibleArea && element.offsetTop < endVisibleArea)
				return true;

			var endImage = element.offsetTop + element.offsetHeight;
			if (endImage > startVisibleArea && endImage < endVisibleArea)
				return true;
		}

		return false;
	},

	_calcActualSizeOfImage: function()
	{
		/*Determine Actual Height and Width of Image*/
		var img = document.createElement("IMG");
		img.src = this.get_imageUrl();
		img.style.visibility = "hidden";
		document.body.appendChild(img);
		this._actualHeight = img.offsetHeight;
		this._actualWidth = img.offsetWidth;
		document.body.removeChild(img);
	},

	_readyStateChanged: function(evnt)
	{
		if ((evnt.target.readyState == "complete" && !this._imageLoaded) || (!$util.IsIE && !this._imageLoaded))
		{
			this.__imageReady = true;
			this._fadeInImage(evnt.target);
			this._calcActualSizeOfImage();
			this._control.__notifyItemLoaded();
		}
	},

	_fadeInImage: function(element)
	{
		/* SJZ - Need to delay the fade in, b/c the imageviewer control may still need to scroll intoview at this point
		* and if this is the case, we need to give it a little time to do so, and we can do that via a short time out*/
		this.__fadeInElem = element;
		this.__timerId = setInterval(Function.createDelegate(this, this.__beginFade), 1);
	},

	__beginFade: function()
	{
	    /* AS 04/22/2009 TFS#16890 */
        if(this._element == null || typeof(this._element) == "undefined")
            return;
		if (this.__isVisible(this._element) && this._control.get_enableInitialFadeAnimation())
		{
			this.__opacityAnimation = new $IG.OpacityAnimation(this._element);
			this.__opacityAnimation.onNext = Function.createDelegate(this, this.__opacityAnimationBegin)
			this.__opacityAnimation.onEnd = Function.createDelegate(this, this.__opacityAnimationEnd)
			this.__opacityAnimation.play(0, 100, true);
		}
		else
			this._element.style.visibility = "";
		this._imageLoaded = true;
		this._element == null;
		clearInterval(this.__timerId);
		this.__timerId = null;
	},

	__opacityAnimationBegin: function()
	{
		this._element.style.visibility = "";
	},
	__opacityAnimationEnd: function()
	{
		this.__opacityAnimation = null;
	},

	get_imageUrl: function()
	{
		///<summary>
		///Returns/sets the image url of the ImageItem.
		///</summary>
		return this._control.__resolveUrl(this._get_value($IG.ImageItemProps.ImagePath));
	},

	set_imageUrl: function(val)
	{
		this._set_value($IG.ImageItemProps.ImagePath, val);
		this._element.src = this.get_imageUrl();
	},

	get_altText: function()
	{
		///<summary>
		///Returns/sets the alt text of the ImageItem.
		///</summary>
		return this._get_value($IG.ImageItemProps.AltText);
	},
	set_altText: function(val)
	{
		this._element.alt = val;
		this._set_value($IG.ImageItemProps.AltText, val);
	},

	get_hoverImageUrl: function()
	{
		///<summary>
		///Returns/sets the image url that will be uesed when an image is hovered.
		///</summary>
		return this._control.__resolveUrl(this._get_value($IG.ImageItemProps.HoverImageUrl));
	},
	set_hoverImageUrl: function(val) { this._set_value($IG.ImageItemProps.HoverImageUrl, val); },

	get_cssClass: function()
	{
		///<summary>
		///Returns/sets the CSS class that will be applied to the ImageItem.
		///</summary>
		return this._get_value($IG.ImageItemProps.CssClass);
	},
	set_cssClass: function(val)
	{
		$util.removeCompoundClass(this._element, this.get_cssClass());
		$util.addCompoundClass(this._element, val);
		this._set_value($IG.ImageItemProps.CssClass, val);
	},

	get_selectedCssClass: function()
	{
		///<summary>
		///Returns/sets the CSS class that will be applied to the ImageItem when it is selected.
		///</summary>
		return this._get_value($IG.ImageItemProps.SelectedCssClass);
	},
	set_selectedCssClass: function(val)
	{
		if (this.isSelected())
		{
			$util.removeCompoundClass(this._element, this.get_selectedCssClass());
			$util.addCompoundClass(this._element, val);
		}
		this._set_value($IG.ImageItemProps.SelectedCssClass, val);
	},

	get_hoverCssClass: function()
	{
		///<summary>
		///Returns/sets the CSS class that will be applied to the ImageItem when it is hovered.
		///</summary>
		return this._get_value($IG.ImageItemProps.HoverCssClass);
	},
	set_hoverCssClass: function(val)
	{
		if (this._getFlags().getHovered())
		{
			$util.removeCompoundClass(this._element, this.get_hoverCssClass());
			$util.addCompoundClass(this._element, val);
		}
		this._set_value($IG.ImageItemProps.HoverCssClass, val);
	},

	get_disabledCssClass: function()
	{
		///<summary>
		///Returns/sets the CSS class that will be applied to the ImageItem when it is disabled.
		///</summary>
		return this._get_value($IG.ImageItemProps.DisabledCssClass);
	},
	set_disabledCssClass: function(val)
	{
		if (!this.get_enabled())
		{
			$util.removeCompoundClass(this._element, this.get_disabledCssClass());
			$util.addCompoundClass(this._element, val);
		}
		this._set_value($IG.ImageItemProps.DisabledCssClass, val);
	},


	get_actualHeight: function()
	{
		///<summary>
		///Returns the height of the Image.
		///Note: this is not referring to the height being displayed in the browser, but the true height of the image.
		///</summary>
		return this._actualHeight;
	},
	get_actualWidth: function()
	{
		///<summary>
		///Returns the width of the Image.
		///Note: this is not referring to the width being displayed in the browser, but the true width of the image.
		///</summary>
		return this._actualWidth;
	},

	set_navigateUrl: function(value)
	{
		this.__resolveAnchor().href = value;
		return $IG.ImageItem.callBaseMethod(this, "set_navigateUrl", [value]);
	},
	set_target: function(value)
	{
		this.__resolveAnchor().target = value;
		return $IG.ImageItem.callBaseMethod(this, "set_target", [value]);
	},
	set_tooltip: function(value)
	{
		this._element.title = value;
		return $IG.ImageItem.callBaseMethod(this, "set_tooltip", [value]);
	},

	isSelected: function()
	{
		///<summary>
		/// Determines if the item is selected.
		///</summary>
		///<returns>True if the image is in selected. </returns>
		return this._getFlags().getSelected();
	},

	get_enabled: function()
	{
		///<summary>
		///Returns/sets whether the ImageItem is enabled.
		///</summary>
		return this._getFlags().getEnabled(this._owner);
	},

	set_enabled: function(val)
	{
		if (this._control.__initializing && val)
			return;
		if (val)
			this._getFlags().setEnabled($IG.DefaultableBoolean.NotSet);
		else
			this._getFlags().setEnabled($IG.DefaultableBoolean.False);
		if (val)
		{
			$util.removeCompoundClass(this._element, this._owner._imageDisabledClass);
			$util.removeCompoundClass(this._element, this.get_disabledCssClass());
		}
		else
		{
			$util.addCompoundClass(this._element, this._owner._imageDisabledClass);
			$util.addCompoundClass(this._element, this.get_disabledCssClass());
		}
	},

	get_visible: function(val)
	{
		///<summary>
		///Returns/sets whether the ImageItem is visible.
		///</summary>
		return this._getFlags().getVisible(this._owner);
	},

	set_visible: function(val)
	{
		if (val)
			this._element.style.display = "";
		else
			this._element.style.display = "none";
		return this._getFlags().setVisible(val);
	},

	get_index: function()
	{
		///<summary>
		///Returns the index of the item in the WebImageViewer's ImageItemCollection.
		///</summary>
		return parseInt(this._get_address());
	},

	select: function()
	{
		///<summary>
		///Sets the ImageItem as selected.
		///</summary>
		this._owner.set_selectedItem(this);
	},

	__resolveAnchor: function()
	{
		return this._element.parentNode;
	},


	get_imageViewer: function()
	{
		///<summary>
		///Returns a reference to the WebImageViewer that the ImageItem belongs to.
		///</summary>
		return this._owner;
	},

	dispose: function()
	{
		try
		{
			if ($util.IsIE)
				$removeHandler(this._element, "readystatechange", this._loadedDelegate);
			else
				$removeHandler(this._element, "load", this._loadedDelegate);
		}
		catch (ex) { }

		if (this.__opacityAnimation)
			this.__opacityAnimation.dispose();
		$IG.ImageItem.callBaseMethod(this, 'dispose');

		this._control = null;

		this.__fadeInElem = null;
	}
}

$IG.ImageItem.registerClass('Infragistics.Web.UI.ImageItem', $IG.ListItem);
/******************************************END IMAGE ITEM************************************/

/******************************************ImageItemCollection*******************************/
$IG.ImageItemCollection = function(control, clientStateManager, index, manager)
{
    /// <summary>
    /// A collection of ImageItems.
    /// </summary>
    $IG.ImageItemCollection.initializeBase(this, [control, clientStateManager, index, manager]);
}

$IG.ImageItemCollection.prototype = 
{
    add:function(item)
    {        
        ///<summary>
        ///Adds the specified ImageItem via an AJAX callback.
        ///</summary>
        ///<param name="item">The ImageItem that should be added</param>
        if(item == null)
            return;
        var cbo = this._control._callbackManager.createCallbackObject();
        cbo.serverContext.type = "add";
        cbo.serverContext.props = Sys.Serialization.JavaScriptSerializer.serialize(item._csm.get_transactionList())
        this._control._callbackManager.execute(cbo, true);
    },
    
    addRange:function(items)
    {
        ///<summary>
        ///Adds all the specified ImageItems via an AJAX callback.
        ///</summary>
        ///<param name="items">An array of ImageItems</param>
        if(items == null || items.length == 0)
            return;
        if(items.length == 1)
        {
            this.add(items[0]);
            return;
        }
        var cbo = this._control._callbackManager.createCallbackObject();
        cbo.serverContext.type = "addRange";
        var props = [];
        for(var i = 0; i < items.length; i++)
            props.push(items[i]._csm.get_transactionList());
        cbo.serverContext.props = Sys.Serialization.JavaScriptSerializer.serialize(props)
        this._control._callbackManager.execute(cbo, true);
    },
    
    remove:function(imgItem)
    {
        ///<summary>
        ///Removes the specified ImageItem from the collection.
        ///</summary>
        ///<param name="imgItem">The ImageItem that should be removed.</param>
        if(imgItem != null)
	    {
	        var cbo = this._control._callbackManager.createCallbackObject();
            cbo.serverContext.type = "remove";
            cbo.clientContext.item = imgItem;
            cbo.serverContext.index = imgItem.get_index();
            this._control._callbackManager.execute(cbo, true);
        }
    },
        
    removeRange:function(items)
    {
        ///<summary>
        ///Removes all specified ImageItems from the collection.
        ///</summary>
        ///<param name="imgItem">An array of ImageItems that should be removed.</param>
        if(items == null || items.length == 0)
            return;
        
        if(items.length == 1)
        {
            this.remove(items[0]);
            return;
        }
        
        var cbo = this._control._callbackManager.createCallbackObject();
        cbo.serverContext.type = "removeRange";
        cbo.clientContext.items = items;
        var props = [];
        for(var i = 0; i < items.length; i++)
            props.push(items[i].get_index());
        cbo.serverContext.props =  Sys.Serialization.JavaScriptSerializer.serialize(props);
        this._control._callbackManager.execute(cbo, true);
    },
    
    insert:function(index, item)
    {
        ///<summary>
        ///Creates an ImageItem with the specified parameters an inserts the Item at the specified index. via an AJAX callback.
        ///</summary>
        ///<param name="index">The index in which to insert the ImageItem.</param>
        ///<param name="item">The ImageItem that should be added</param>
        if(item == null)
            return;
        var cbo = this._control._callbackManager.createCallbackObject();
        if(index >= 0 && index < this.get_length())
            cbo.serverContext.type = "insert";
        else
            cbo.serverContext.type = "add";        
        cbo.serverContext.index = index;
        cbo.serverContext.props = Sys.Serialization.JavaScriptSerializer.serialize(item._csm.get_transactionList())
        this._control._callbackManager.execute(cbo, true);
    }, 
    
    createItem:function()
    {
        ///<summary>
        ///Creates an empty item that can be used in the add, addRange, and insert methods.
        ///</summary>
        var props = new Array();
        var clientProps = new Array();
        var length = $IG.ImageItemProps.Count;
        for(var i = 0; i < length; i++)
            clientProps.push(null);
        props.push(clientProps);
        var elem = document.createElement("IMG");
        var csm = new $IG.ObjectClientStateManager(props);
        var item = new $IG.ImageItem("-1", elem, props, this._control, csm);
        return item;
    },
    
    getItem:function(index)
    {
        ///<summary>
        ///Returns the ImageItem at the specified index. 
        ///</summary>
        if(index >= 0 && index < this.get_length())
            return this._items[index];
        return null;
    }
}
$IG.ImageItemCollection.registerClass('Infragistics.Web.UI.ImageItemCollection', $IG.ObjectCollection);
/******************************************End ImageItemCollection****************************/

/******************************************Caption Area**************************************/
$IG.CaptionArea = function(obj, element, props, control, mkrAttribute)
{
    /// <summary>
    /// A templatable object that can be used to just display text. 
    /// </summary>
    
	var csm = obj ? new $IG.ObjectClientStateManager(props[0]) : null;	
	$IG.CaptionArea.initializeBase(this, [obj, element, props, control, csm]);
	this._mkrAttribute = mkrAttribute;
}

$IG.CaptionArea.prototype =
{
	get_text: function()
	{
		///<summary>
		///Returns/sets the text of the object.
		///</summary>
		return this._get_value($IG.CaptionAreaProps.Text);
	},
	set_text: function(val)
	{
		if (this._contentElement == null)
			this._contentElement = this._owner._elements[this._mkrAttribute];
		this._contentElement.innerHTML = val;
		this._set_value($IG.CaptionAreaProps.Text, val);
	}
}

$IG.CaptionArea.registerClass('Infragistics.Web.UI.CaptionArea', $IG.UIObject);
/******************************************END Caption Area**************************************/

/******************************************Drag Scroll Behavior**************************************/
$IGIV.DragScroll = function(elem, orientation, openHandCursor, closeHandCursor, enabled)
{
    this._dragOperation = {};
    this._element = elem;     
    this._openHandCursor = openHandCursor;
    this._closeHandCursor = closeHandCursor;
    this.setEnabled(enabled);
    this._scrollHelper = new $IG.ScrollHelper(elem);
    this._orientation = orientation; 
    this._mouseMoveDelegate = Function.createDelegate(this, this._onMousemoveHandler);
    this._mouseUpDelegate = Function.createDelegate(this, this._onMouseupHandler);
    this._mouseDownDelegate = Function.createDelegate(this, this._onMousedownHandler);
    this._clickDelegate = Function.createDelegate(this, this._onClickHandler) ;
    
    $addHandler(document, "mousemove", this._mouseMoveDelegate );   
    $addHandler(document, "mouseup", this._mouseUpDelegate );  
    $addHandler(elem, "mousedown", this._mouseDownDelegate );
    $addHandler(elem, "click", this._clickDelegate);
};

$IGIV.DragScroll.prototype =
{
	dispose: function()
	{
		this._scrollHelper.dispose();
		$removeHandler(document, "mousemove", this._mouseMoveDelegate);
		$removeHandler(document, "mouseup", this._mouseUpDelegate);
		$removeHandler(this._element, "mousedown", this._mouseDownDelegate);
		$removeHandler(this._element, "click", this._clickDelegate);
		this._currentEvnt = null;
		this._element = null;
	},

	setEnabled: function(enabled)
	{
		this._enabled = enabled;
		if (!enabled)
			this._resetCursors();
		else
			this._setCursor(this._openHandCursor);
	},

	setWrap: function(wrap)
	{
		this._scrollHelper.update(null, null, wrap);
	},

	onDragScrollStarting: function()
	{
	},

	onDragScrollComplete: function()
	{
	},


	isDragging: function()
	{
		return this._isDragging;
	},

	_resetCursors: function()
	{
		this._element.style.cursor = "";
		var children = this._element.childNodes;
		for (var i = 0; i < children.length; i++)
		{
			if (children[i].getAttribute)
				children[i].style.cursor = "";
		}
	},

	_setCursor: function(cursor)
	{
		this._element.style.cursor = "url(" + cursor + "), pointer";
		var children = this._element.childNodes;
		for (var i = 0; i < children.length; i++)
		{
			if (children[i].getAttribute)
				children[i].style.cursor = "url(" + cursor + "), pointer";
		}
	},

	_onClickHandler: function(evnt)
	{
		if (!this._enabled)
			return;

		this._currentEvnt = evnt;
		if (this._isDragging)
			$util.cancelEvent(evnt);
		this.__dragCompleted(evnt);
	},

	__dragCompleted: function()
	{
		if (this._isDragging)
		{
			this._isDragging = false;
			this.onDragScrollComplete();
		}
		this._dragOperation.mouseDown = false;
		this._setCursor(this._openHandCursor);
	},

	_onMouseupHandler: function(evnt)
	{
		if (!this._enabled)
			return;
		this._currentEvnt = evnt;
		if (this._startElement != evnt.target)
			this.__dragCompleted();
	},
	_onMousedownHandler: function(evnt)
	{
		if (!this._enabled)
			return;

		this._currentEvnt = evnt;
		this._startElement = evnt.target;
		this._dragOperation.mouseDown = true;
		this._dragOperation.x = evnt.screenX;
		this._dragOperation.y = evnt.screenY;
		this._scrollHelper.update(null, this._orientation)
		this._dragOperation.scrollPos = this._scrollHelper.getScrollPos();
		this._setCursor(this._closeHandCursor);
	},

	_onMousemoveHandler: function(evnt)
	{
		if (!this._enabled)
			return;
		this._currentEvnt = evnt;
		if (this._dragOperation.mouseDown)
		{
			if (this._element.childNodes.length == 0)
				return;

			this.onDragScrollStarting();
			this._isDragging = true;
			$util.cancelEvent(evnt);

			var newScrollPos = this._dragOperation.scrollPos + this._dragOperation.x - evnt.screenX;
			if (this._orientation == $IG.Orientation.Vertical)
				newScrollPos = this._dragOperation.scrollPos + this._dragOperation.y - evnt.screenY;
			if (newScrollPos > this._scrollHelper.getScrollPos()) /*NEXT <----*/
			{
				this._scrollHelper.update($IG.ScrollNavigationDirection.Next, this._orientation)
				this._scrollHelper.ensureCurrentItem();
				if (this._scrollHelper._currentItem == null)
					return;
				if (this._scrollHelper.scrollTo(newScrollPos, newScrollPos - this._scrollHelper.getCurrentItemSize()))
				{
					this._dragOperation.scrollPos = (this._dragOperation.x - evnt.screenX) * (-1);
					if (this._orientation == $IG.Orientation.Vertical)
						this._dragOperation.scrollPos = (this._dragOperation.y - evnt.screenY) * (-1);
				}
			}
			else /*PREVIOUS ---->*/
			{
				this._scrollHelper.update($IG.ScrollNavigationDirection.Prev, this._orientation)

				this._scrollHelper.ensureCurrentItem();
				if (this._scrollHelper._nextCurrentItem == null)
					return;
				var item = this._scrollHelper.resolveItem(this._scrollHelper._nextCurrentItem);
				if (this._orientation == $IG.Orientation.Vertical)
				{
					var oldHeight = item.offsetHeight
					if (this._scrollHelper.scrollTo(newScrollPos, oldHeight))
					{
						this._dragOperation.scrollPos = oldHeight;
						this._dragOperation.y = evnt.screenY;
					}
				}
				else
				{
					var oldWidth = item.offsetWidth;
					if (this._scrollHelper.scrollTo(newScrollPos, oldWidth))
					{
						this._dragOperation.scrollPos = oldWidth;
						this._dragOperation.x = evnt.screenX;
					}
				}
			}
		}
	}
}
$IGIV.DragScroll.registerClass('Infragistics.Web.UI.ImageViewerObjects.DragScroll');
/******************************************END Drag Sroll Behavior**************************************/


/******************************************ImageViewer ScrollWheel Behavior**************************************/
$IGIV.ScrollWheel = function(elem, orientation, enabled )
{
    this._scrollDelta = 20;
    this._element = elem;    
    this._orientation =  orientation;
    this._scrollHelper = new $IG.ScrollHelper(elem);
    this._mousewheelDelegate = Function.createDelegate(this, this._scrollWheelIE)
    this._dOMMouseScrollDelegate = Function.createDelegate(this, this._scrollWheelFirefox) ;
    $addHandler(document, "mousewheel", this._mousewheelDelegate);
    $addHandler(window, "DOMMouseScroll", this._dOMMouseScrollDelegate);  
    this.setEnabled(enabled);
};

$IGIV.ScrollWheel.prototype =
{
	dispose: function()
	{
		this._element = null;
		$removeHandler(document, "mousewheel", this._mousewheelDelegate);
		$removeHandler(window, "DOMMouseScroll", this._dOMMouseScrollDelegate);
		this._scrollHelper.dispose();
	},

	setEnabled: function(enabled)
	{
		this._enabled = enabled;
	},

	setWrap: function(wrap)
	{
		this._scrollHelper.update(null, null, wrap);
	},

	_scrollWheelIE: function(evnt)
	{
		if (this._enabled && this.ensureElement(evnt.target))
		{
			var delta = evnt.rawEvent.wheelDelta / 120;
			// Check only if Delta is positive (forward wheel move) or negative (backward wheel move)
			if (delta > 0)
				this.scrollNext();
			else
				this.scrollPrev();
			$util.cancelEvent(evnt);
		}
	},
	_scrollWheelFirefox: function(evnt)
	{
		if (this._enabled && this.ensureElement(evnt.target))
		{
			//var delta = evnt.rawEvent.detail;
			// FF has oposite delta sign then IE
			var delta = -evnt.rawEvent.detail / 3;
			// Check only if Delta is positive (forward wheel move) or negative (backward wheel move)
			if (delta > 0)
				this.scrollNext();
			else
				this.scrollPrev();
			$util.cancelEvent(evnt);
		}
	},
	scrollNext: function()
	{
		this._scrollHelper.update($IG.ScrollNavigationDirection.Next, this._orientation)
		this._scrollHelper.scrollTo(this._scrollHelper.getScrollPos() + this._scrollDelta);
	},
	scrollPrev: function()
	{
		this._scrollHelper.update($IG.ScrollNavigationDirection.Prev, this._orientation)
		var scrollPos = this._scrollHelper.getScrollPos() - this._scrollDelta;
		this._scrollHelper.scrollTo(scrollPos, this._scrollHelper.getNextCurrentItemSize() + scrollPos);
	},
	ensureElement: function(elem)
	{
		while (elem != null && elem != this._element)
			elem = elem.parentNode;
		return (elem == this._element);
	}

}
$IGIV.ScrollWheel.registerClass('Infragistics.Web.UI.ImageViewerObjects.ScrollWheel');
/******************************************END ImageViewer ScrollWheel Behavior**************************************/


/******************************************Scroll Helper**************************************/
$IG.ScrollHelper = function(elem)
{
    this._element = elem; 
};

$IG.ScrollHelper.prototype =
{
	dispose: function()
	{
		this._element = null;
	},


	update: function(direction, orientation, wrap)
	{
		if (direction != null)
			this._direction = direction;
		if (orientation != null)
			this._orientation = orientation;
		if (wrap != null)
			this._wrap = wrap;
	},

	resolveItem: function(elem)
	{
		if (elem == null)
			return null;
		return elem.childNodes[0];
	},

	resolveParent: function(elem)
	{
		if (elem == null)
			return null;
		return elem.parentNode;
	},

	ensureCurrentItem: function()
	{
		if (this._wrap)
		{
			if (this._element.childNodes.length > 1)
			{
				var currentElem = this._element.childNodes[0];
				var item = this.resolveItem(currentElem);
				while (!currentElem.getAttribute || item.style.display == "none")
				{
					currentElem = currentElem.nextSibling;
					item = this.resolveItem(currentElem);
				}

				if (this._direction == $IG.ScrollNavigationDirection.Next)
				{
					var elem = currentElem;
					var item = this.resolveItem(elem);
					while (!elem.getAttribute || item.style.display == "none")
					{
						elem = elem.nextSibling;
						item = this.resolveItem(elem);
					}
				}
				else
				{
					var elem = this._element.childNodes[this._element.childNodes.length - 1];
					var item = this.resolveItem(elem);
					while (!elem.getAttribute || item.style.display == "none")
					{
						elem = elem.previousSibling;
						item = this.resolveItem(elem);
					}
				}
				this._currentItem = currentElem;
				this._nextCurrentItem = elem;
			}
		}
		else
		{
			var children = this._element.childNodes;
			var childCount = children.length;
			var currentScrollPos = this.getScrollPos();
			for (var i = 0; i < childCount; i++)
			{
				var childElem = children[i];
				var itemElem = this.resolveItem(childElem);
				var size = this.getSize(itemElem);
				var scrollPos = this.getPos(itemElem);
				var viewPortSize = this.getSize(this._element);
				if (size > 0)
				{
					if (scrollPos <= currentScrollPos && scrollPos + size > currentScrollPos)
					{
						this._currentItem = childElem;
						if (this._direction == $IG.ScrollNavigationDirection.Next)
						{
							if (childElem.nextSibling == null)
							{
								/* if we are already at the end
								* and the image is larger than viewport
								* no more nextSibling will be */
								return;
							}
							var nextCurrentChildElem = childElem.nextSibling
							var nextCurrentItemElem = itemElem;
							while (!nextCurrentChildElem.getAttribute || nextCurrentItemElem.style.display == "none")
							{
								nextCurrentChildElem = nextCurrentChildElem.nextSibling;
								nextCurrentItemElem = this.resolveItem(nextCurrentChildElem);
							}
							this._nextCurrentItem = nextCurrentChildElem;
							return;
						}
						else
						{
							if (scrollPos == currentScrollPos)
							{
								var nextCurrentChildElem = childElem.previousSibling
								var nextCurrentItemElem = itemElem;
								while (nextCurrentChildElem != null && (!nextCurrentChildElem.getAttribute || nextCurrentItemElem.style.display == "none"))
								{
									nextCurrentChildElem = nextCurrentChildElem.previousSibling;
									nextCurrentItemElem = this.resolveItem(nextCurrentChildElem);
								}
								this._nextCurrentItem = nextCurrentChildElem;
								return;
							}
							else
								this._nextCurrentItem = this._currentItem;
						}
					}
				}
			}
		}
	},

	moveNextItem: function(scrollPos)
	{
		if (this._currentItem == null)
			return;
		/* Need to hide the content area, while moving elements around, 
		* otherwise we'll see a flicker. This only needs to be done in IE. 
		* If this is done in firefox, there will be a flicker */
		if ($util.IsIE)
			this._element.style.visibility = "hidden";
		this.setScrollPos(scrollPos);
		this._element.removeChild(this._currentItem);
		this._element.appendChild(this._currentItem);
		this._element.style.visibility = "";
		this.ensureCurrentItem();
	},

	movePrevItem: function(newScrollPos)
	{
		this.ensureCurrentItem();
		if (this._nextCurrentItem == null)
			return;
		/* Need to hide the content area, while moving elements around, 
		* otherwise we'll see a flicker. This only needs to be done in IE. 
		* If this is done in firefox, there will be a flicker */
		if ($util.IsIE)
			this._element.style.visibility = "hidden";
		this._element.removeChild(this._nextCurrentItem);
		this._element.insertBefore(this._nextCurrentItem, this._element.childNodes[0]);
		if (newScrollPos == null)
			this.setScrollPos(this.getCurrentItemSize());
		else
			this.setScrollPos(newScrollPos);
		this._element.style.visibility = "";
		this.ensureCurrentItem();
	},

	getSize: function(elem)
	{
		return (this._orientation == $IG.Orientation.Horizontal) ? elem.offsetWidth : elem.offsetHeight;
	},

	getCurrentItemIndex: function()
	{
		this.ensureCurrentItem();
		if (this._currentItem == null)
			return -1;
		var children = this._element.childNodes;
		var count = children.length;
		for (var i = 0; i < count; i++)
		{
			if (children[i] == this._currentItem)
				return i;
		}
		return -1;
	},

	getCurrentItemSize: function()
	{
		this.ensureCurrentItem();
		if (this._currentItem == null)
			return 0;
		return (this._orientation == $IG.Orientation.Horizontal) ? this.resolveItem(this._currentItem).offsetWidth : this.resolveItem(this._currentItem).offsetHeight;
	},

	getNextCurrentItemSize: function()
	{
		this.ensureCurrentItem();
		if (this._nextCurrentItem == null)
			return 0;
		return (this._orientation == $IG.Orientation.Horizontal) ? this.resolveItem(this._nextCurrentItem).offsetWidth : this.resolveItem(this._nextCurrentItem).offsetHeight;
	},

	getNextCurrentItemPos: function()
	{
		this.ensureCurrentItem();
		if (this._nextCurrentItem == null)
			return -1;
		return (this._orientation == $IG.Orientation.Horizontal) ? this.resolveItem(this._nextCurrentItem).offsetLeft : this.resolveItem(this._nextCurrentItem).offsetTop;
	},

	getPos: function(elem)
	{
		return (this._orientation == $IG.Orientation.Horizontal) ? elem.offsetLeft : elem.offsetTop;
	},

	getScrollPos: function()
	{
		/*AS */
		return (this._orientation == $IG.Orientation.Horizontal) ? (this._element.scrollLeft + this._element.offsetLeft) : (this._element.scrollTop + this._element.offsetTop);
	},

	setScrollPos: function(val)
	{
		if (this._orientation == $IG.Orientation.Horizontal)
			this._element.scrollLeft = val;
		else
			this._element.scrollTop = val;
	},

	getScrollSize: function()
	{
		return (this._orientation == $IG.Orientation.Horizontal) ? this._element.scrollWidth : this._element.scrollHeight;
	},

	scrollItemIntoView: function(direction, orientation, firstItem, scrollPos, wrap)
	{
		this.update(direction, orientation, wrap);
		this.ensureCurrentItem();
		if (wrap)
		{
			if (direction == $IG.ScrollNavigationDirection.Next)
			{
				while (this._currentItem != firstItem)
					this.moveNextItem(0);
				this.setScrollPos(scrollPos);
			}
			else
			{
				while (this._currentItem != firstItem)
					this.movePrevItem();
				this.setScrollPos(scrollPos);
			}
		}
		else
		{
			while (this._currentItem != firstItem)
				this.moveNextItem(0);
			this.setScrollPos(scrollPos);
		}
	},
	scrollTo: function(newScrollPos, elseScrollPos)
	{
		this.ensureCurrentItem();
		if (this._currentItem == null)
			return false;
		if (!this._wrap)
		{
			this.setScrollPos(newScrollPos);
			return false;
		}
		else
		{
			if (this._direction == $IG.ScrollNavigationDirection.Next)
			{
				if (this.getCurrentItemSize() <= newScrollPos)
				{
					if (elseScrollPos != null)
						this.moveNextItem(elseScrollPos);
					else
						this.moveNextItem(0);
					return true;
				}
				else
					this.setScrollPos(newScrollPos);
			}
			else
			{
				if (newScrollPos < 0 || (this.getScrollPos() == 0 && newScrollPos != 0))
				{
					this.movePrevItem();
					this.setScrollPos(elseScrollPos);
					return true;
				}
				this.setScrollPos(newScrollPos);
			}
			return false;
		}
	},

	findCurrentFocalItem: function(nextItemAlignment)
	{
		this.ensureCurrentItem();
		var size = this.getSize(this._element);
		if (nextItemAlignment == $IG.NextItemAlignment.Near)
		{
			if (this.getScrollPos() == 0)
				return this.resolveItem(this._currentItem);
		}
		else if (nextItemAlignment == $IG.NextItemAlignment.Center)
		{
			var pos = parseInt((size / 2) + this.getScrollPos());
			var count = this._element.childNodes.length;
			for (var i = 0; i < count; i++)
			{
				var elem = this.resolveItem(this._element.childNodes[i]);
				var elemSize = this.getSize(elem) / 2;
				var elemPos = this.getPos(elem);
				var total = elemSize + elemPos;
				var diff = (pos - total);
				if (Math.ceil(total) == pos || Math.floor(total) == pos || diff <= 1)
					return elem;
			}
		}
		else if (nextItemAlignment == $IG.NextItemAlignment.Far)
		{
			var pos = size + this.getScrollPos();
			var count = this._element.childNodes.length;
			for (var i = 0; i < count; i++)
			{
				var elem = this.resolveItem(this._element.childNodes[i]);
				var elemSize = this.getSize(elem);
				var elemPos = this.getPos(elem);
				if (Math.ceil(elemSize + elemPos) == pos || Math.floor(elemSize + elemPos) == pos)
					return elem;
			}
		}

	},

	findClosestToNextItemAlignment: function(nextItemAlignment)
	{
		var closest = this.findCurrentFocalItem(nextItemAlignment);
		if (closest == null)
		{
			var nextItem = this.findNextFocalItem(nextItemAlignment, $IG.ScrollNavigationDirection.Next);
			var prevItem = this.findNextFocalItem(nextItemAlignment, $IG.ScrollNavigationDirection.Prev);
			var nextItemScrollPos = this.getPos(nextItem);
			var prevItemScrollPos = this.getPos(prevItem);
			var nextItemSize = this.getSize(nextItem);
			var prevItemSize = this.getSize(prevItem);
			var scrollPos = this.getScrollPos();

			if (nextItemAlignment == $IG.NextItemAlignment.Near)
			{
				var nextDist = Math.abs(scrollPos - nextItemScrollPos);
				var prevDist = Math.abs(scrollPos - prevItemScrollPos);
				return (nextDist < prevDist) ? nextItem : prevItem;
			}
			else if (nextItemAlignment == $IG.NextItemAlignment.Center)
			{
				var center = parseInt(this.getSize(this._element) / 2) + scrollPos;
				var nextDist = Math.abs(center - (nextItemSize / 2 + nextItemScrollPos));
				var prevDist = Math.abs(center - (prevItemSize / 2 + prevItemScrollPos));
				return (nextDist < prevDist) ? nextItem : prevItem;
			}
			else if (nextItemAlignment == $IG.NextItemAlignment.Far)
			{
				var size = this.getSize(this._element) + scrollPos;
				var nextDist = Math.abs(size - (nextItemSize + nextItemScrollPos));
				var prevDist = Math.abs(size - (prevItemSize + prevItemScrollPos));
				return (nextDist < prevDist) ? nextItem : prevItem;
			}
		}
		else
			return closest;
	},

	findNextFocalItem: function(nextItemAlignment, direction)
	{
		this._direction = direction;
		this.ensureCurrentItem();
		if (nextItemAlignment == $IG.NextItemAlignment.Near)
			return this.resolveItem(this._nextCurrentItem);
		else if (direction == $IG.ScrollNavigationDirection.Next)
		{

			if (nextItemAlignment == $IG.NextItemAlignment.Center)
			{
				var size = this.getSize(this._element);
				var center = size / 2;
				size = center + this.getScrollPos();
				var count = this._element.childNodes.length;
				for (var i = 0; i < count; i++)
				{
					var image = this.resolveItem(this._element.childNodes[i]);
					var imageSize = this.getSize(image);
					if (size - (imageSize / 2) < -1.5)
						return image;
					else
						size -= imageSize;
				}
			}
			else if (nextItemAlignment == $IG.NextItemAlignment.Far)
			{
				var size = this.getSize(this._element) + this.getScrollPos();
				var count = this._element.childNodes.length;
				for (var i = 0; i < count; i++)
				{
					var image = this.resolveItem(this._element.childNodes[i]);
					var imageSize = this.getSize(image);
					size -= imageSize;
					if (size < 0)
						return image;
				}
			}
		}
		else
		{
			if (nextItemAlignment == $IG.NextItemAlignment.Center)
			{
				var lastIndex = this._getLastVisibleItemIndex();
				var size = this.getSize(this._element);
				var center = size / 2;
				size = center + this.getScrollPos();
				for (var i = lastIndex; i >= 0; i--)
				{
					var image = this.resolveItem(this._element.childNodes[i]);
					var imageSize = this.getSize(image) / 2;
					var imagePos = this.getPos(image);
					if (imageSize == 0)
						continue;
					if (imagePos + imageSize < size - 1)
						return image;
				}
				return this.resolveItem(this._element.childNodes[this._element.childNodes.length - 1])
			}
			else if (nextItemAlignment == $IG.NextItemAlignment.Far)
			{
				var lastIndex = this._getLastVisibleItemIndex();
				var size = this.getSize(this._element) + this.getScrollPos();
				for (var i = lastIndex; i >= 0; i--)
				{
					var image = this.resolveItem(this._element.childNodes[i]);
					var imageSize = this.getSize(image);
					var imagePos = this.getPos(image);
					if (imageSize == 0)
						continue;
					if (imagePos + imageSize < size)
						return image;
				}
				return this.resolveItem(this._element.childNodes[this._element.childNodes.length - 1])
			}
		}
	},

	_getLastVisibleItemIndex: function()
	{
		var begin = this.getScrollPos();
		var size = this.getSize(this._element) + begin;
		var count = this._element.childNodes.length;
		for (var i = 0; i < count; i++)
		{
			var image = this.resolveItem(this._element.childNodes[i]);
			var imageSize = this.getSize(image);
			size -= imageSize;
			if (size <= 0)
			{
				return i;
			}
		}
		return -1;
	}

}
$IG.ScrollHelper.registerClass('Infragistics.Web.UI.ScrollHelper');
/******************************************END Scroll Helper**************************************/


/******************************************ScrollAnimationBase**************************************/
$IG.ScrollAnimationBase = function(elem)
{
    $IG.ScrollAnimationBase.initializeBase(this, [elem]);
    this._scrollHelper = new $IG.ScrollHelper(elem);
}
$IG.ScrollAnimationBase.prototype = 
{
    play:function(orientation, direction, wrap, duration, equationType, maxSpeed)
    {         
        if(!this.get_isAnimating())
        {
            this._scrollHelper.update(direction, orientation, wrap);
            this._orientation = orientation;
            this._direction = direction;
            this._wrap = wrap; 
            this.set_duration(duration);
            this._equationType = equationType;
            $IG.ScrollAnimationBase.callBaseMethod(this, "play");
        }
    },
    
    scrollNext:function(){},
    scrollPrev:function(){},
    initNext:function(){},
    initPrev:function(){},
    
    _init:function()
    {
        if(this._direction == $IG.ScrollNavigationDirection.Next)
            this.initNext();
        else if(this._direction == $IG.ScrollNavigationDirection.Prev)
            this.initPrev();
    },
    
    _next:function()
    {
        if(this._direction == $IG.ScrollNavigationDirection.Next)
            this.scrollNext();
        else if(this._direction == $IG.ScrollNavigationDirection.Prev)
            this.scrollPrev();
    },
    
     /********************Private Methods**********************************/
    __scrollToNextHelper:function(pos)
    {   
        if(this._direction == $IG.ScrollNavigationDirection.Next)
        {
            var currentScrollPos = this._scrollHelper.getScrollPos();
            var scrollPos = currentScrollPos + (pos - this._lastPos);            
            this._lastPos = parseInt(pos);
            var elseScrollPos = (parseInt(scrollPos) - currentScrollPos) - (this._scrollHelper.getNextCurrentItemSize() - currentScrollPos);
            this._scrollHelper.scrollTo(scrollPos, elseScrollPos)        
        }
        else
        {
            var currentScrollPos = this._scrollHelper.getScrollPos();
            var scrollPos = currentScrollPos + (pos - this._lastPos);            
            this._lastPos = pos;            
            var elseScrollPos = this._scrollHelper.getNextCurrentItemSize() + scrollPos;            
            this._scrollHelper.scrollTo(scrollPos, elseScrollPos)     
        }
    }
    /********************END Private Methods**********************************/
};
$IG.ScrollAnimationBase.registerClass("Infragistics.Web.UI.ScrollAnimationBase", $IG.AnimationBase);
/*************************************END ScrollAnimationBase*************************************/

/*************************************ContinuousScrollAnimation****************************/
$IG.ContinuousScrollAnimation = function(elem)
{
    $IG.ContinuousScrollAnimation.initializeBase(this, [elem]);
};
$IG.ContinuousScrollAnimation.prototype = 
{
    _calc:function()
    {
        var t = this._time;
        if(t > this._duration)
            t = this._duration; 
        return $IG.ContinuousScrollAnimation.callBaseMethod(this, "_calc", [this._equationType, t,0,this._maxSpeed, this._duration]);
    },
    
    play:function(orientation, direction, wrap, duration, equationType, maxSpeed)
    { 
        this._maxSpeed = maxSpeed;
        $IG.ContinuousScrollAnimation.callBaseMethod(this, "play", [orientation, direction, wrap, duration, equationType]);
    },
    
    scrollNext:function()
    {
        if(!this._wrap && this._scrollHelper.getScrollPos() + this._scrollHelper.getSize(this._scrollHelper._element) == this._scrollHelper.getScrollSize())
            this.stop();
        else
        {
            var pos = this._calc();
            var newScrollPos = this._scrollHelper.getScrollPos() + pos;
            this._scrollHelper.scrollTo(newScrollPos, newScrollPos - this._scrollHelper.getCurrentItemSize());
        }
    },
    
    scrollPrev:function()
    {
        if(!this._wrap && this._scrollHelper.getScrollPos() == 0)
            this.stop();
        else
        {
            var pos = this._calc();
            var newScrollPos = this._scrollHelper.getScrollPos() - pos;
            if(newScrollPos <= 0 && this._wrap)
                this._scrollHelper.movePrevItem(this._scrollHelper.getNextCurrentItemSize() + newScrollPos);
            else
                this._scrollHelper.setScrollPos(newScrollPos);
        }
    }
};
$IG.ContinuousScrollAnimation.registerClass("Infragistics.Web.UI.ContinuousScrollAnimation", $IG.ScrollAnimationBase);
/************************************************END ContinuousScrollAnimation*****************************************/

/************************************************NextItemScrollAnimation****************************************/
$IG.NextItemScrollAnimation = function(elem)
{
    $IG.NextItemScrollAnimation.initializeBase(this, [elem]);
};
$IG.NextItemScrollAnimation.prototype = 
{
    _calc:function(begin, end)
    {
        return $IG.NextItemScrollAnimation.callBaseMethod(this, "_calc", [this._equationType, this._time , begin,end, this._duration]) * (-1);
    },
    
    play:function(orientation, direction, wrap, duration, equationType, alignment)
    {
        this._alignment = alignment;
        $IG.NextItemScrollAnimation.callBaseMethod(this, "play", [orientation, direction, wrap, duration, equationType]);
    },
    
    /****************NEXT***************/
    initNext:function()
    {
        if(this._wrap)
            this._end =   this._scrollHelper.getNextCurrentItemSize();
        else
            this._end =   this._scrollHelper.getNextCurrentItemPos();  
        this._begin = this._scrollHelper.getScrollPos(); 
        
        if(this._alignment == $IG.NextItemAlignment.Near)
            this.initNextNear();    
        else if(this._alignment == $IG.NextItemAlignment.Center)
            this.initNextCenter();
        else if(this._alignment == $IG.NextItemAlignment.Far)
            this.initNextFar();
    },
    
    scrollNext:function()
    {   
        if(this._alignment == $IG.NextItemAlignment.Near)
            this.scrollNextNear();        
        else if(this._alignment == $IG.NextItemAlignment.Center)
            this.scrollNextCenter();        
        else if(this._alignment == $IG.NextItemAlignment.Far)
            this.scrollNextFar();        
    },
    
    initNextNear:function()
    {
        if(this._wrap)
        {
            if(this._begin != 0)
                this._end = this._end - this._begin;
              }
        else
        {
            var size = this._scrollHelper.getSize(this._element);
            var total = this._end + size
            var scrollSize = this._scrollHelper.getScrollSize();
            if(total > scrollSize)
                this._end = scrollSize - size;
        }
    },
    
    scrollNextNear:function()
    {
        if(this._wrap)
        {
			/* JSL - 8/26/08 - Added this._begin to the second parameter, 
        		to compensate for changes in the animation framework equations */
            var pos = this._calc(this._begin, this._end + this._begin) * -1;
            this._scrollHelper.scrollTo(pos);
            
            if(this._time == this._duration)
                this.stop();
        }
        else
        {
			/* JSL - 8/26/08 - Added this._begin to the second parameter, 
        		to compensate for changes in the equations */
            var pos = this._calc(this._begin, this._end) * -1;
            if(pos <= this._end)
                this._scrollHelper.scrollTo(pos)
            
            if(this._time == this._duration)
            {
                this._scrollHelper.scrollTo(this._end)
                this.stop();
            }
        }
    },
    
    initNextCenter:function()
    {
         var size = this._scrollHelper.getSize(this._element);
        if(!this._wrap)
        {
            if(size + this._begin  == this._scrollHelper.getScrollSize())
            {
                this.stop();
                return;
            }
        }
        
        var center = size/2;
        this._nextImage = this._scrollHelper.findNextFocalItem(this._alignment, this._direction);
        if(this._nextImage == null)
        {
            this.stop();
            return;
        }                
        this._end = ((this._scrollHelper.getSize(this._nextImage)/2) + this._scrollHelper.getPos(this._nextImage)- this._begin) - center ;
        if(!this._wrap)
        {
            var total = this._end + this._begin + size
            var scrollSize = this._scrollHelper.getScrollSize();
            if(total > scrollSize)
                this._end = scrollSize - (this._begin + size);
        }
        
        this._lastPos = 0; 
    },
    
    scrollNextCenter:function()
    {
        var pos = this._calc(0, this._end) * -1;
        this.__scrollToNextHelper(pos);
        if(this._time == this._duration)
            this.stop();
    },
    
    initNextFar:function()
    {
        this._nextImage = this._scrollHelper.findNextFocalItem(this._alignment, this._direction);
        if(this._nextImage == null)
        {
            this.stop();
            return;
        }
        this._end = ((this._scrollHelper.getSize(this._nextImage)) + this._scrollHelper.getPos(this._nextImage)- this._begin) - this._scrollHelper.getSize(this._element) ;
        this._lastPos = 0; 
    },
    
    scrollNextFar:function()
    {
        var pos = this._calc(0, this._end) * -1;
        this.__scrollToNextHelper(pos);
        if(this._time == this._duration)
            this.stop();
    },
    
    /************END NEXT***************/
    
    /************PREV*************/
    
    initPrev:function()
    {
        if(this._alignment == $IG.NextItemAlignment.Near)
            this.initPrevNear();        
        else if(this._alignment == $IG.NextItemAlignment.Center)
            this.initPrevCenter();        
        else if(this._alignment == $IG.NextItemAlignment.Far)
            this.initPrevFar();        
    },
    
    scrollPrev:function()
    {
        if(this._alignment == $IG.NextItemAlignment.Near)
            this.scrollPrevNear();        
        else if(this._alignment == $IG.NextItemAlignment.Center)
            this.scrollPrevCenter();        
        else if(this._alignment == $IG.NextItemAlignment.Far)
            this.scrollPrevFar();        
    },
    
    initPrevNear:function()
    {
        this._lastPos = this._begin = this._scrollHelper.getScrollPos();
        if(this._wrap)
        {                    
            if(this._begin == 0)
            {
                this._scrollHelper.movePrevItem();
                this._end = this._scrollHelper.getCurrentItemSize();
            }
            else
                this._end = this._begin;
        }
        else
        {
            this._end =   this._scrollHelper.getNextCurrentItemPos();  
            if(this._end == -1)
            {
                this.stop();
                return;
            }    
        }
    },
    
    scrollPrevNear:function()
    {
        if(this._wrap)
        {
			/* JSL - 8/26/08 - Added this._begin to the second parameter, 
        		to compensate for changes in the equations */ 
            var pos = this._calc(this._begin, this._end + this._begin) * (-1);  
            this._scrollHelper.setScrollPos(this._scrollHelper.getScrollPos() + this._lastPos - pos);
            this._lastPos = pos; 
            
            if(this._time == this._duration)
            {
                this._scrollHelper.setScrollPos(0);
                this.stop();
            }
        }
        else
        {  
			/* JSL - 8/26/08 - Added this._begin to the second parameter, 
        		to compensate for changes in the equations */  
            var pos = this._calc(this._begin, this._begin*2 - this._end) * -1;
            this._scrollHelper.setScrollPos(this._begin - (pos - this._begin)); 
            if(this._time == this._duration)
            {
                this._scrollHelper.scrollTo(this._end);
                this.stop();
            }
        }
    },
    
    initPrevCenter:function()
    {
        this._begin = this._scrollHelper.getScrollPos();
        if(!this._wrap && this._begin == 0)
        {
            this.stop();
            return;
        }
        var size = this._scrollHelper.getSize(this._element);
        var center = size/2;
        this._nextImage = this._scrollHelper.findNextFocalItem(this._alignment, this._direction);
        if(this._nextImage == null)
        {
            this.stop();
            return;
        }   
        this._end =  center - ((this._scrollHelper.getSize(this._nextImage)/2) + this._scrollHelper.getPos(this._nextImage)) + this._begin ;
        if(!this._wrap)
        {
            if(this._end > this._begin)
                this._end = this._begin;
        }
        else
        {
            if(this._end < 0)
            {
                this._scrollHelper.movePrevItem(this._scrollHelper.getNextCurrentItemSize() + this._begin);                    
                this._end =  ((this._scrollHelper.getSize(this._nextImage)/2) + this._scrollHelper.getPos(this._nextImage)) +  center + this._begin;
            }
            else
            {
                if(this._begin == 0)
                    this._scrollHelper.movePrevItem();                    
            }
        }
        this._lastPos = 0; 
    },
    
    scrollPrevCenter:function()
    {
        var pos = parseInt(this._calc(0, this._end));
        this.__scrollToNextHelper(pos);
                
        if(this._time == this._duration)
            this.stop();
    },
    
    initPrevFar:function()
    {
        this._begin = this._scrollHelper.getScrollPos();
        if(!this._wrap && this._begin == 0)
        {
            this.stop();
            return;
        }
        this._nextImage = this._scrollHelper.findNextFocalItem(this._alignment, this._direction);
        if(this._nextImage == null)
        {
            this.stop();
            return;
        }                
        this._end =   this._scrollHelper.getSize(this._element) - ((this._scrollHelper.getSize(this._nextImage)) + this._scrollHelper.getPos(this._nextImage)) + this._begin ;
        if(!this._wrap)
        {
            if(this._end > this._begin)
                this._end = this._begin;
        }
        else
        {
            if(this._end < 0)
            {
                this._scrollHelper.movePrevItem(this._scrollHelper.getNextCurrentItemSize() + this._begin);                    
                this._end =   this._scrollHelper.getSize(this._element) + this._begin;
            }
            else
            {
                if(this._begin == 0)
                    this._scrollHelper.movePrevItem();                    
            }
        }
        this._lastPos = 0; 
    },
    
    scrollPrevFar:function()
    {
        var pos = parseInt(this._calc(0, this._end));
        this.__scrollToNextHelper(pos);
                
        if(this._time == this._duration)
            this.stop();
    }
    /*********************END PREV****************************************/
    
};
$IG.NextItemScrollAnimation.registerClass("Infragistics.Web.UI.NextItemScrollAnimation", $IG.ScrollAnimationBase);
/********************************************END NextItemScrollAnimation*********************************************/

/******************************************PageScrollAnimation********************************/
$IG.PageScrollAnimation = function(elem)
{
    $IG.PageScrollAnimation.initializeBase(this, [elem]);
};
$IG.PageScrollAnimation.prototype = 
{
    _calc:function(begin, end)
    {
        return  $IG.PageScrollAnimation.callBaseMethod(this, "_calc", [this._equationType, this._time , begin,end, this._duration]);
    },
    
    /**************NEXT*********************/
    initNext:function()
    {
        this._begin = this._scrollHelper.getScrollPos();
        var size = this._scrollHelper.getSize(this._element)+this._begin;
        var pageSize = this._scrollHelper.getSize(this._element);
        var count = this._element.childNodes.length; 
        var nextVisibleImage = null;             
        var totalSize = 0; 
        for(var i = 0 ; i < count; i++)
        {
            var elem = this._element.childNodes[i];
            if(elem.getAttribute)
            {   
                var elemSize = this._scrollHelper.getSize(this._scrollHelper.resolveItem(elem)); 
                size -= elemSize; 
                if(size < 0)
                {
                    nextVisibleImage = elem;
                    if(pageSize < elemSize)
                    {
                    /* If viewport(size) / page is smaller then image (elemSize) 
                     * add the image size to the total size to be scrolled */
                        totalSize += elemSize;                         
                    }
                    break;
                }
                else if(size == 0)
                {
                    nextVisibleImage = this._element.childNodes[i+1];
                    if(pageSize < elemSize)
                    {
                    /* If viewport(size) / page is smaller then image (elemSize) 
                     * add the image size to the total size to be scrolled */
                        totalSize += elemSize;                         
                    }                    
                    break;
                }
                totalSize += elemSize;                         
            }
        }
        if(nextVisibleImage != null)
        {    
           this._end = this._scrollHelper.getPos(this._scrollHelper.resolveItem(nextVisibleImage));            
           if(this._end < totalSize)
                this._end = totalSize;
           if(this._end <= 0)
                this._end =  this._scrollHelper.getSize(this._scrollHelper.resolveItem(nextVisibleImage));                    
           this._end -= this._begin; 
           this._lastPos = 0; 
        }
        else
        {
            this.stop();
            return;
        }
        if(!this._wrap)
        {
            var size = this._scrollHelper.getSize(this._element);
            var total = this._end + this._begin + size
            var scrollSize = this._scrollHelper.getScrollSize();
            if(total > scrollSize)
                this._end = scrollSize - (this._begin + size);
        }
        
    },
    
    scrollNext:function()
    {
        var pos =  this._calc(0, this._end);
        this.__scrollToNextHelper(pos);    
        if(this._time == this._duration)
               this.stop();
    },
    /**************END NEXT *******************/
    
    initPrev:function()
    {
        this._begin = this._scrollHelper.getScrollPos();                    
        this._end = 0;         
        if(this._wrap)
            this.initPrevWrap();
        else
            this.initPrevNoWrap();
    },
    
    initPrevWrap:function()
    {
        var count = this._element.childNodes.length; 
        var nextVisibleImage = null; 
        var size = this._scrollHelper.getSize(this._element) - this._begin;
        for(var i = count -1 ; i >= 0; i--)
        {
            var elem = this._element.childNodes[i];
            if(elem.getAttribute)
            {                    
                size -= this._scrollHelper.getSize(this._scrollHelper.resolveItem(elem)); 
                if(size == 0)
                {
                    nextVisibleImage = elem;
                    break;
                }
                else if(size <=0)
                {
                    if(i == count -1)
                    {
                        if((this._scrollHelper.getSize(this._element) - this._begin) < 0)
                            nextVisibleImage = this._element.childNodes[0];
                        else
                        {
                            nextVisibleImage = elem;
                            this._end += this._scrollHelper.getSize(this._scrollHelper.resolveItem(nextVisibleImage));                                 
                        }
                    }
                    else
                    {
                        /* If there are images that are "invisible", we need to account for them
                         * and ignore them, otherwise we'll have to click the previous button twice */
                        if(this._end == 0)
                        {
                            var index = count-1; 
                            do
                            {
                                var elem = this._element.childNodes[index--];
                                var height = elem.offsetHeight;
                                var width = elem.offsetWidth;
                            }while(height == 0 || width == 0);
                                
                            nextVisibleImage = this._element.childNodes[index+1];
                            this._end += this._scrollHelper.getSize(this._scrollHelper.resolveItem(nextVisibleImage));                              
                        }
                        else
                            nextVisibleImage = this._element.childNodes[i+1]
                    }
                    break;
                }
                this._end += this._scrollHelper.getSize(this._scrollHelper.resolveItem(elem)); 
            }
        }
        
        if(nextVisibleImage != null)
        {
           this._lastPos = 0;  
           this._end += this._begin;
        }
        else
        {
            this.stop();
            return;
        }           
    
    },
    
    initPrevNoWrap:function()
    {
        var count = this._element.childNodes.length; 
        var nextVisibleImage = null; 

        var size = this._scrollHelper.getSize(this._element);
        var currentItemIndex = this._scrollHelper.getCurrentItemIndex();
        for(var i = currentItemIndex; i >=0 && size > 0; i--)
        {
            nextVisibleImage = this._element.childNodes[i];
            var elemSize = this._scrollHelper.getSize(this._scrollHelper.resolveItem(nextVisibleImage));
            size -= elemSize; 
            if(size < 0 && size < elemSize && i > 0)
            {
                /* If single image size is larger than viewport 
                 * Then go for the previous one, otherwise page 
                 * will always be the current item */
                nextVisibleImage = this._element.childNodes[--i];
            }
        }
      
        if(nextVisibleImage != null)
            this._end = this._scrollHelper.getPos(nextVisibleImage);
    },
    
    scrollPrev:function()
    {
        if(this._wrap)
        {
            var pos =  this._calc(0, -this._end);
            this.__scrollToNextHelper(parseInt(pos));
            if(this._time == this._duration)
                this.stop();
        }
        else
        {
            /* JSL - 8/26/08 - Added this._begin to the second parameter, 
        		to compensate for changes in the equations */
            var pos = this._calc(this._begin, this._begin*2 - this._end);
            this._scrollHelper.setScrollPos(this._begin - (pos - this._begin));   
        	/* JSL - 8/26/08 - Added this._begin to the second parameter, 
        		to compensate for changes in the equations */
            var pos = this._calc(this._begin, this._begin*2 - this._end);
            this._scrollHelper.setScrollPos(this._begin - (pos - this._begin));  
            if(this._time == this._duration)
            {
                this._scrollHelper.scrollTo(this._end);
                this.stop();
            }             
        }
    }
   
};
$IG.PageScrollAnimation.registerClass("Infragistics.Web.UI.PageScrollAnimation", $IG.ScrollAnimationBase);
/***********************************END PageScrollAnimation **********************************************/

/******************************************ImageViewer Keyboard Behavior**************************************/
$IG.ImageViewerKbBehavior = function(elem, control)
{
    this._element = elem;
    this._control = control;
    this._keyDownDelegate = Function.createDelegate(this, this._onKeydownHandler);
    this._keyUpDelegate = Function.createDelegate(this, this._onKeyupHandler);
    $addHandler(elem, "keydown",  this._keyDownDelegate);
    $addHandler(elem, "keyup", this._keyUpDelegate);   
};

$IG.ImageViewerKbBehavior.prototype =
{
	dispose: function()
	{
		$removeHandler(this._element, "keydown", this._keyDownDelegate);
		$removeHandler(this._element, "keyup", this._keyUpDelegate);
		this._element = null;
		this._control = null;
	},

	_onKeydownHandler: function(evnt)
	{
		var handled = true;
		if (this._control.get_orientation() == $IG.Orientation.Horizontal)
		{
			if (evnt.keyCode == Sys.UI.Key.left)
				this._control.navigatePrev();
			else if (evnt.keyCode == Sys.UI.Key.right)
				this._control.navigateNext();
			else
				handled = false;
		}
		else
		{
			if (evnt.keyCode == Sys.UI.Key.up)
				this._control.navigatePrev();
			else if (evnt.keyCode == Sys.UI.Key.down)
				this._control.navigateNext();
			else
				handled = false;
		}

		if (handled)
		{
			$util.cancelEvent(evnt);
			this._element.focus();
		}
	},

	_onKeyupHandler: function(evnt)
	{
		$util.cancelEvent(evnt);
		this._control.endNavigation();
	}
};

$IG.ImageViewerKbBehavior.registerClass("Infragistics.Web.UI.ImageViewerKbBehavior");
/******************************************END ImageViewer Keyboard Behavior**************************************/

/***********************************************ScrollAnimations**************************************************/
$IG.ScrollAnimations  = function(obj, element, props, control, csm)
{
    /// <summary>
    /// The object that contains the settings to change the type of Animation that will occur when the WebImageViewer
    /// scroll Images into view. 
    /// </summary>
    
    if(csm == null)
        csm =  new $IG.ObjectClientStateManager(props[0]);	
	$IG.ScrollAnimations.initializeBase(this, [obj, element, props, control, csm]);
}
$IG.ScrollAnimations.prototype =
{
	get_type: function()
	{
		/// <summary>
		/// Gets/Sets the type of animation that will be peformed by the control. 
		/// </summary>
		return this._get_value($IG.ScrollAnimationsProps.Type);
	},
	set_type: function(type) { this._set_value($IG.ScrollAnimationsProps.Type, type); },

	get_continuousAnimation: function()
	{
		/// <summary>
		/// Returns an instance of the ContinuousAnimation object. 
		/// </summary>
		if (this._continuous == null)
		{
			this._continuous = new $IG.ContinuousAnimation("Continuous", this._element, this._objectManager.get_objectProps(0), this._owner);
			this._objectManager.register_object(0, this._continuous);
		}
		return this._continuous;
	},

	get_nextItemAnimation: function()
	{
		/// <summary>
		/// Returns an instance of the NextItemAnimation object. 
		/// </summary>
		if (this._nextItem == null)
		{
			this._nextItem = new $IG.NextItemAnimation("NexItem", this._element, this._objectManager.get_objectProps(1), this._owner);
			this._objectManager.register_object(1, this._nextItem);
		}
		return this._nextItem;
	},

	get_pageAnimation: function()
	{
		/// <summary>
		/// Returns an instance of the PageAnimation object. 
		/// </summary>
		if (this._page == null)
		{
			this._page = new $IG.PageAnimation("Page", this._element, this._objectManager.get_objectProps(2), this._owner);
			this._objectManager.register_object(2, this._page);
		}
		return this._page;
	},
	_createObjects: function(objectManager)
	{
		this._objectManager = objectManager;
	},

	dispose: function()
	{
		if (this._objectManager != null)
			this._objectManager.dispose();

		$IG.ScrollAnimations.callBaseMethod(this, "dispose");
		this._objectManager = null;
	}
}
$IG.ScrollAnimations.registerClass('Infragistics.Web.UI.ScrollAnimations', $IG.ObjectBase);

/***********************************************End ScrollAnimations**************************************************/

/***********************************************AnimationObject**************************************************/
$IG.AnimationObject  = function(obj, element, props, control, csm)
{
    if(csm == null)
        csm =  new $IG.ObjectClientStateManager(props[0]);	
	$IG.AnimationObject.initializeBase(this, [obj, element, props, control, csm]);
	this._control = control;
	this._animation = null;
}
$IG.AnimationObject.prototype =
{
	get_duration: function()
	{
		/// <summary>
		/// Gets/Sets the duration of the animation.
		/// </summary>
		return this._get_value($IG.AnimationObjectProps.Duration);
	},
	set_duration: function(val) { this._set_value($IG.AnimationObjectProps.Duration, val); },

	get_equationType: function()
	{
		/// <summary>
		/// Gets/Sets the equation that will be used in the animation.
		/// </summary>
		return this._get_value($IG.AnimationObjectProps.EquationType);
	},
	set_equationType: function(val) { this._set_value($IG.AnimationObjectProps.EquationType, val); },

	dispose: function()
	{
		$IG.AnimationObject.callBaseMethod(this, "dispose");
		this._control = null;
		if (this._animation)
			this._animation.dispose();
	}
}
$IG.AnimationObject.registerClass('Infragistics.Web.UI.AnimationObject', $IG.ObjectBase);

/***********************************************End AnimationObject**************************************************/

/***********************************************ContinuousAnimation**************************************************/
$IG.ContinuousAnimation  = function(obj, element, props, control, csm)
{
    /// <summary>
    /// An object that allows for customization of the Continuous Animation.
    /// </summary>
    
    if(csm == null)
        csm =  new $IG.ObjectClientStateManager(props[0]);	
    $IG.ContinuousAnimation.initializeBase(this, [obj, element, props, control, csm]);    
}
$IG.ContinuousAnimation.prototype =
{
    get_equationType:function(){return this._get_value($IG.ContinuousAnimationProps.EquationType);},
    
    get_maxSpeed:function()
    {
        /// <summary>
        /// Gets/Sets the maximum speed of the animation.
        /// </summary>
        return this._get_value($IG.ContinuousAnimationProps.MaxSpeed);
    },
    set_maxSpeed:function(val){this._set_value($IG.ContinuousAnimationProps.MaxSpeed, val);},
    get_equationType:function(){return this._get_value($IG.ContinuousAnimationProps.EquationType);},
    set_equationType:function(val){this._set_value($IG.ContinuousAnimationProps.EquationType, val);},
    play:function(direction)
    {   
        /// <summary>
        /// Plays the current animation in the specified direction
        /// </summary>       
        ///<param name="direction">The direction in which the animation should occur </param>
        
        if(this._animation == null)
            this._animation = new $IG.ContinuousScrollAnimation(this._element);
      
        this._animation.play(this._control.get_orientation(), direction, this._control.__getWrapResolved(), this.get_duration(), this.get_equationType(), this.get_maxSpeed()); 
    },
    isPlaying:function()
    {
        /// <summary>
        /// Returns true if the animation is currently running.
        /// </summary>
        
        if(this._animation == null)
            return false;
        else
            return this._animation.get_isAnimating();
    },   
    
    stop:function()
    {
        /// <summary>
        /// Ends the current animation.
        /// </summary>
        
        if(this._animation != null)
            this._animation.stop();
    }
}
$IG.ContinuousAnimation.registerClass('Infragistics.Web.UI.ContinuousAnimation', $IG.AnimationObject);
/***********************************************End ContinuousAnimation**************************************************/

/***********************************************NextItemAnimation**************************************************/
$IG.NextItemAnimation  = function(obj, element, props, control, csm)
{
    /// <summary>
    /// An object that allows for customization of the NextItem Animation. 
    /// </summary>
    
    if(csm == null)
        csm =  new $IG.ObjectClientStateManager(props[0]);	
    $IG.NextItemAnimation.initializeBase(this, [obj, element, props, control, csm]);    
}
$IG.NextItemAnimation.prototype =
{
    get_alignment:function()
    {
        /// <summary>
        /// Gets/Sets where the next item will align in the visible area of the control. 
        /// </summary>
        return this._get_value($IG.NextItemAnimationProps.Aligment);
    },
    set_alignment:function(val){this._set_value($IG.NextItemAnimationProps.Aligment, val);},
    
    _ensureAnimation:function()
    {
        if(this._animation == null)
            this._animation = new $IG.NextItemScrollAnimation(this._element);
    },
    
    play:function(direction)
    {  
         /// <summary>
        /// Plays the current animation in the specified direction
        /// </summary>       
        ///<param name="direction">The direction in which the animation should occur </param>
        
        this._ensureAnimation();
        this._animation.play(this._control.get_orientation(), direction, this._control.__getWrapResolved(), this.get_duration(), this.get_equationType(), this.get_alignment()); 
    },
    isPlaying:function()
    {
        /// <summary>
        /// Returns true if the animation is currently running.
        /// </summary>
        
        if(this._animation == null)
            return false;
        else
            return this._animation.get_isAnimating();
    },
    get_equationType:function(){return this._get_value($IG.NextItemAnimationProps.EquationType);},
    set_equationType:function(val){this._set_value($IG.NextItemAnimationProps.EquationType, val);},
    moveItemIntoFocus:function(item)
	{
	    /// <summary>
        /// Scrolls the given ImageItem to the Alignment point specified on the control. 
        /// This method will continuously perform a ScrollAnimation of type NextItem until the ImageItem is scrolled into alignment.
        /// </summary>
        ///<param name="imageItem">The ImageItem that should be scrolled into focus.</param>
	    if(!this._control.get_enabled())
	        return;
	        
        var control = this._control;
        var scrollHelper = this._control._scrollHelper;
	    if(this.__moveIntoFocus == null)
	    {
	        this._ensureAnimation();	        
	        scrollHelper.update(null, control.get_orientation(), control.get_wrapAround());
	        var focalElement = scrollHelper.findClosestToNextItemAlignment(this.get_alignment());
	        var focalAdr = parseInt(focalElement.getAttribute("adr"));
	        	        
	        this.__moveIntoFocus = {};
	        this.__moveIntoFocus.item = item;
	        this.__moveIntoFocus.direction = $IG.ScrollNavigationDirection.Prev;
	        
	        var count = control.get_items()._items.length;
	        var index = item.get_index();
	        var actualIndex = index - focalAdr; 
	        if(actualIndex < 0)
	            actualIndex = count - 1 - focalAdr + index; 
	        
	        if(actualIndex < count/2)
	            this.__moveIntoFocus.direction = $IG.ScrollNavigationDirection.Next; 
	        this.__moveIntoFocus.oldOnEnd = this._animation.onEnd;
	        this._animation.onEnd = Function.createDelegate(this, this.moveItemIntoFocus);
	        control._dragScroll.setEnabled(false);
	    }
	    if(scrollHelper.findCurrentFocalItem(this.get_alignment()) == this.__moveIntoFocus.item._element)
	    {
	       this._animation.onEnd = this.__moveIntoFocus.oldOnEnd
	       this.__moveIntoFocus = null;
	       this._animation._scrollHelper._currentItem = null;
	       control._dragScroll.setEnabled(control.get_enableDragScrolling());
	    }
	    else
	        this.play(this.__moveIntoFocus.direction);
	}

}
$IG.NextItemAnimation.registerClass('Infragistics.Web.UI.NextItemAnimation', $IG.AnimationObject);
/***********************************************End NextItemAnimation**************************************************/

/***********************************************PageAnimation**************************************************/
$IG.PageAnimation  = function(obj, element, props, control, csm)
{
    /// <summary>
    /// An object that allows for customization of the Page Animation. 
    /// </summary>
    if(csm == null)
        csm =  new $IG.ObjectClientStateManager(props[0]);	
    $IG.PageAnimation.initializeBase(this, [obj, element, props, control, csm]);    
}
$IG.PageAnimation.prototype =
{
    get_equationType:function(){return this._get_value($IG.PageAnimationProps.EquationType);},
    set_equationType:function(val){this._set_value($IG.PageAnimationProps.EquationType, val);},
    play:function(direction)
    {  
        /// <summary>
        /// Plays the current animation in the specified direction
        /// </summary>       
        ///<param name="direction">The direction in which the animation should occur </param>
        
        if(this._animation == null)
            this._animation = new $IG.PageScrollAnimation(this._element);
      
        this._animation.play(this._control.get_orientation(), direction, this._control.__getWrapResolved(), this.get_duration(), this.get_equationType()); 
    },
    isPlaying:function()
    {
        /// <summary>
        /// Returns true if the animation is currently running.
        /// </summary>
        
        if(this._animation == null)
            return false;
        else
            return this._animation.get_isAnimating();
    }
}
$IG.PageAnimation.registerClass('Infragistics.Web.UI.PageAnimation', $IG.AnimationObject);
/***********************************************End NextItemAnimation**************************************************/

/**************************************************EVENT ARGS****************************************/
$IG.ImageViewerEventArgs = function()
{
    /// <summary>
    /// EventArgs that contain the ImageItem that triggered the event.
    /// </summary>
	$IG.ImageViewerEventArgs.initializeBase(this);
}
$IG.ImageViewerEventArgs.prototype =
{
	getImageItem: function()
	{
	    /// <summary>
        /// Returns the ImageItem assoicated with the event. 
        /// </summary>
	    return this._props[2];
	}
}
$IG.ImageViewerEventArgs.registerClass('Infragistics.Web.UI.ImageViewerEventArgs', $IG.EventArgs);


$IG.ImageViewerButtonEventArgs = function()
{
    /// <summary>
    /// EventArgs that contain the Button Element that triggered the event.
    /// </summary>
    
	$IG.ImageViewerButtonEventArgs.initializeBase(this);
}
$IG.ImageViewerButtonEventArgs.prototype =
{
	getButtonElem: function()
	{
	    /// <summary>
        /// Returns the HTML DOM element associated with the event.
        /// </summary>
	    return this._props[2];
	}
}
$IG.ImageViewerButtonEventArgs.registerClass('Infragistics.Web.UI.ImageViewerButtonEventArgs', $IG.EventArgs);
/**********************************************END EVENT ARGS****************************************/

/******************************************ImageItemProps ENUM************************************/
$IG.ImageItemProps = new function()
{
    this.ImagePath        =[$IG.ListItemProps.Count + 0, ""];
    this.AltText          =[$IG.ListItemProps.Count + 1, ""];
    this.HoverImageUrl    =[$IG.ListItemProps.Count + 2, ""];
    this.CssClass         =[$IG.ListItemProps.Count + 3, ""];
    this.SelectedCssClass =[$IG.ListItemProps.Count + 4, ""];
    this.HoverCssClass    =[$IG.ListItemProps.Count + 5, ""];
    this.DisabledCssClass =[$IG.ListItemProps.Count + 6, ""];
    this.Count            = $IG.ListItemProps.Count + 7;
};
/******************************************END LayoutPaneProps ENUM********************************/

/******************************************ImageViewerProps ENUM************************************/
$IG.ImageViewerProps = new function()
{
    this.Orientation   = [$IG.ControlMainProps.Count + 0, 0];
    this.FirstItem     = [$IG.ControlMainProps.Count + 1, 0];
    this.ScrollPosition= [$IG.ControlMainProps.Count + 2, 0];
    this.DragScroll    = [$IG.ControlMainProps.Count + 3, true]; 
    this.WrapAround    = [$IG.ControlMainProps.Count + 4, true]; 
    this.EnableInitialFadeAnimation  = [$IG.ControlMainProps.Count + 5, true]; 
    this.Count         =  $IG.ControlMainProps.Count + 6;
};
/******************************************END ImageViewerProps ENUM********************************/

/******************************************CaptionAreaProps ENUM************************************/
$IG.CaptionAreaProps = new function()
{
    this.Text      =[$IG.ControlObjectProps.Count + 0, ""];
    this.Count     = $IG.ControlObjectProps.Count + 1;
};
/******************************************END CaptionAreaProps ENUM********************************/


/******************************************ScrollAnimation ENUM******************************/
$IG.ScrollAnimation = function () 
{
   ///<summary>
   ///Specifies the Animation that should be used to scroll an item into view.
   ///</summary>
}
$IG.ScrollAnimation.prototype = 
{  
   Continuous:0,   
   NextItem:1,   
   Page:2
   
};
$IG.ScrollAnimation.registerEnum("Infragistics.Web.UI.ScrollAnimation");
/******************************************END ScrollNavigationAnimationType ENUM**************************/

/******************************************NextItemAlignment ENUM******************************/
$IG.NextItemAlignment = function () 
{
    /// <summary>
    /// Specifies where an item should align when scrolled into view. 
    /// </summary>
}
$IG.NextItemAlignment.prototype = 
{
   Near:0, 
   Center:1,
   Far:2
};
$IG.NextItemAlignment.registerEnum("Infragistics.Web.UI.NextItemAlignment");
/******************************************END Orientation ENUM**************************/

/******************************************ScrollNavigationAnimationOrientation ENUM******************************/
$IG.ScrollNavigationDirection = function () 
{
    /// <summary>
    /// The direction in which a Navigation should occur.
    /// </summary>
}
$IG.ScrollNavigationDirection.prototype = 
{
   Next:0, 
   Prev:1
};
$IG.ScrollNavigationDirection.registerEnum("Infragistics.Web.UI.ScrollNavigationDirection");
/******************************************END ScrollNavigationAnimationOrientation ENUM**************************/

/******************************************ScrollAnimationsProps ENUM************************************/
$IG.ScrollAnimationsProps = new function()
{
    this.Type           =[$IG.ObjectBaseProps.Count + 0, 0];
    this.Count               = $IG.ObjectBaseProps.Count + 1;
};
/******************************************END ScrollAnimationsProps ENUM********************************/

/******************************************AnimationObjectProps ENUM************************************/
$IG.AnimationObjectProps = new function()
{
    this.Duration           =[$IG.ObjectBaseProps.Count + 0, 400];
    this.EquationType       =[$IG.ObjectBaseProps.Count + 1, $IG.AnimationEquationType.Linear];
    this.Count              = $IG.ObjectBaseProps.Count + 2;
};
/******************************************END AnimationObjectProps ENUM********************************/

/******************************************ContinuousAnimation ENUM************************************/
$IG.ContinuousAnimationProps = new function()
{
    this.EquationType       =[$IG.AnimationObjectProps.EquationType[0], $IG.AnimationEquationType.EaseOut];
    this.MaxSpeed              = [$IG.AnimationObjectProps.Count + 0, 50];
    this.Count              = $IG.AnimationObjectProps.Count + 1;
};
/******************************************END ContinuousAnimation ENUM********************************/

/******************************************NextItemAnimationProps ENUM************************************/
$IG.NextItemAnimationProps = new function()
{
    this.EquationType       =[$IG.AnimationObjectProps.EquationType[0], $IG.AnimationEquationType.EaseInOut];
    this.Aligment           = [$IG.AnimationObjectProps.Count + 0, $IG.NextItemAlignment.Near];
    this.Count              = $IG.AnimationObjectProps.Count + 1;
};
/******************************************END NextItemAnimationProps ENUM********************************/

/******************************************PageAnimationProps ENUM************************************/
$IG.PageAnimationProps = new function()
{
    this.EquationType       =[$IG.AnimationObjectProps.EquationType[0], $IG.AnimationEquationType.EaseInOut];
    this.Count              = $IG.AnimationObjectProps.Count + 0;
};
/******************************************END PageAnimationProps ENUM********************************/


if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();