Type.registerNamespace('SfUI');

Type.registerNamespace('SfUI.Menu');
SfUI.Menu.MenuType = function(){}
SfUI.Menu.MenuType.prototype = 
{
	RootMenu : 0,
	SubMenu : 1,
	Leaf : 2
}
SfUI.Menu.MenuType.registerEnum('SfUI.Menu.MenuType');
SfUI.Menu.LocationInfo = function(topOffset, leftOffset, width, height)
{
	this.Width = width;
	this.Height = height;
	this.TopOffset = topOffset;
	this.LeftOffset = leftOffset;
}
SfUI.Menu.LocationInfo.registerClass('SfUI.Menu.LocationInfo', null);

SfUI.Menu.SizeInfo = function (width, height)
{
	this.Width = width;
	this.Height = height;
}
SfUI.Menu.SizeInfo.registerClass('SfUI.Menu.SizeInfo', null);

SfUI.Menu.MenuTemplate = function()
{
	this.LocationInfo = new SfUI.Menu.LocationInfo();
	this.SubMenuSizeInfo = new SfUI.Menu.SizeInfo();
	
	this.LeftDivWidth = 0;//13;
	this.RightDivWidth = 0;//13;
	this.BaseLeftDivWidth = 0;
	this.BaseRightDivWidth = 0;//13;
	
	this.PaddingTop = 2;
	this.PaddingLeft = 10;
	
	this.BaseBorderWidth = 1;
	this.ChildBorderWidth = 1;
	this.BaseBorderColor = '#777';
	this.ChildBorderColor = '#777';
	
	this.CssPrefix = "";
}
SfUI.Menu.MenuTemplate.prototype =
{	
	Clone : function()
	{
		var copy = new SfUI.Menu.MenuTemplate();
		copy.LocationInfo = this.LocationInfo;
		copy.SubMenuSizeInfo = this.SubMenuSizeInfo;
		copy.LeftDivWidth = this.LeftDivWidth;
		copy.RightDivWidth = this.RightDivWidth;
		copy.BaseLeftDivWidth = this.BaseLeftDivWidth;
		copy.BaseRightDivWidth = this.BaseRightDivWidth;
		copy.PaddingTop = this.PaddingTop;
		copy.PaddingLeft = this.PaddingLeft;
		copy.BaseBorderColor = this.BaseBorderColor;
		copy.ChildBorderColor = this.ChildBorderColor;
		copy.CssPrefix = this.CssPrefix;
		return copy;
	}
}
SfUI.Menu.MenuTemplate.registerClass('SfUI.Menu.MenuTemplate', null);

SfUI.Menu.Calculator = function()
{
}
SfUI.Menu.Calculator.prototype =
{
	GetCalculatedChildLeftOffset : function(intended, borderWidth)
	{
		return intended - 2*borderWidth;
	},
	
	GetCalculatedChildTopOffset : function(intended, borderWidth)
	{
		return intended - 1*borderWidth;
	},

	GetWidth : function(intended, borderWidth)
	{
		return intended-2*borderWidth;
	},
	
	GetHeight : function(intended, borderWidth)
	{
		return intended-2*borderWidth;
	},
	
	GetPaddingBorderAdjustment : function(intended, borderWidth, padding)
	{
		return intended - 2*borderWidth - padding;
	}
}
SfUI.Menu.Calculator.registerClass('SfUI.Menu.Calculator', null);

SfUI.Menu.MenuItem = function(container, text, template)
{
	this.Container = container;
	this.Text = text;
	this.Width = template.LocationInfo.Width;
	this.Height = template.LocationInfo.Height;
	this.TopOffset = template.LocationInfo.TopOffset;
	this.LeftOffset = template.LocationInfo.LeftOffset;
	this.Template = template;

	this.MenuType = null;
	this.Parent = null;

	this.RootDiv = null;
	this.TextDiv = null;
	this.DivLeft = null;
	this.DivMiddle = null;
	this.DivRight = null;
	
	this.ZIndex = 1;
}
SfUI.Menu.MenuItem.prototype =
{
	InitializeCalculator : function()
	{
		this.Calculator = new SfUI.Menu.Calculator();
	},

	CreateElement : function(top, left, width, height)
	{
		var elem = document.createElement("div");
		elem.style.position = 'absolute';
		elem.style.top = top + 'px';
		elem.style.left = left + 'px';
		elem.style.width = width + 'px';
		elem.style.height = height + 'px';
		return elem;
	},

	GetDivClassName : function(hilite, loc)
	{
	},

	Hide : function()
	{
		this.RootDiv.style.visibility = 'hidden';
		this.UnHiliteDiv();
	},

	Show : function()
	{
		this.RootDiv.style.visibility = 'visible';
	},

	OnMouseOver : function()
	{
		if (this.Parent != null)
		{
			var children = this.Parent.GetChildren();
			for (var i=0; i<children.length; ++i)
			{
				children[i].CollapseChildrenNow();
			}
		}
		this.ExpandChildrenNow();

		this.HiliteDiv();
		this.HiliteAllParents();	
	},

	HiliteAllParents : function()
	{
		var current = this;
		var par = current.Parent;
		while (par != null)
		{
			par.HiliteDiv();
			var children = par.GetChildren();
			for (var i=0; i<children.length; ++i)
			{
				if (children[i].Container != current.Container)
				{
					children[i].UnHiliteDiv();
				}
			}
			current = par;
			par = par.Parent;
		}
	},

	HiliteDiv : function()
	{
		this.DivLeft.className = this.GetDivClassName(true, 'Left');
		this.DivRight.className = this.GetDivClassName(true, 'Right');
		this.DivMiddle.className = this.GetDivClassName(true, 'Middle');
	},

	OnMouseOut : function()
	{
		this.UnHiliteDiv();
	},

	UnHiliteDiv : function()
	{
		this.DivLeft.className = this.GetDivClassName(false, 'Left');
		this.DivRight.className = this.GetDivClassName(false, 'Right');
		this.DivMiddle.className = this.GetDivClassName(false, 'Middle');
	},

	GetRootParent : function()
	{
		var currentElem = this;
		while (currentElem.Parent != null)
		{
			currentElem = currentElem.Parent;
		}
		return currentElem;
	},

	CollapseChildrenNow : function()
	{
	},

	ExpandChildrenNow : function()
	{
	},

	CreateRootDiv : function()
	{
		this.RootDiv = this.CreateElement(this.TopOffset, this.LeftOffset, this.Calculator.GetWidth(this.Width, this.GetBorderWidth()), this.Calculator.GetHeight(this.Height, this.GetBorderWidth()));
	},

	GetLeftDivWidth : function()
	{
		return this.Template.LeftDivWidth;
	},

	GetRightDivWidth : function()
	{
		return this.Template.RightDivWidth;
	},

	GetBorderWidth : function()
	{
		return this.Template.ChildBorderWidth;
	},

	CreateTextDiv : function()
	{
		this.TextDiv = this.CreateElement(0, 0, this.Calculator.GetWidth(this.Width, this.GetBorderWidth()), this.Calculator.GetHeight(this.Height, this.GetBorderWidth()));
		this.RootDiv.appendChild(this.TextDiv);

		this.DivLeft = this.CreateElement(0, 0, this.GetLeftDivWidth(), this.Height-2*this.GetBorderWidth());
		this.DivLeft.className = this.GetDivClassName(false, 'Left');
		this.TextDiv.appendChild(this.DivLeft);

		this.DivMiddle = this.CreateElement(0, this.GetLeftDivWidth(), this.Calculator.GetPaddingBorderAdjustment(this.Width - (this.GetLeftDivWidth() + this.GetRightDivWidth()), this.GetBorderWidth(), this.Template.PaddingLeft), this.Calculator.GetPaddingBorderAdjustment(this.Height, this.GetBorderWidth(), this.Template.PaddingTop));
		this.DivMiddle.className = this.GetDivClassName(false, 'Middle');
		this.DivMiddle.style.paddingLeft = this.Template.PaddingLeft + 'px';
		this.DivMiddle.style.paddingTop = this.Template.PaddingTop + 'px';
		this.DivMiddle.appendChild(document.createTextNode(this.Text));
		this.TextDiv.appendChild(this.DivMiddle);

		this.DivRight = this.CreateElement(0, this.Width-this.GetRightDivWidth()-2*this.GetBorderWidth(), this.GetRightDivWidth(), this.Height-2*this.GetBorderWidth());
		this.DivRight.className = this.GetDivClassName(false, 'Right');
		this.TextDiv.appendChild(this.DivRight);

		this.TextDiv.onmouseover = new Function("", this.Container + ".OnMouseOver();");
		this.TextDiv.onmouseout = new Function("", this.Container + ".OnMouseOut();");
	}
}
SfUI.Menu.MenuItem.registerClass('SfUI.Menu.MenuItem', null);
SfUI.Menu.LeafItem = function(container, text, template, onClickFunction)
{
	SfUI.Menu.LeafItem.initializeBase(this, [container, text, template]);
	this.OnClickFunction = onClickFunction;

	this.MenuType = SfUI.Menu.MenuType.Leaf;
	this.IsSelectedLeaf = false;
}
SfUI.Menu.LeafItem.prototype =
{
	Create : function()
	{
		this.InitializeCalculator();
		this.CreateRootDiv();
		this.CreateTextDiv();
		this.TextDiv.onclick = new Function("", this.Container + ".OnClick();");
	},

	OnClick : function()
	{
		var rootParent = this.GetRootParent();
		rootParent.CollapseChildrenNow();
		rootParent.Expanded = false;
		rootParent.UnHiliteDiv();

		if (this.OnClickFunction)
		{
			this.OnClickFunction();
		}
		
		if (this.Group)
		{
			this.Group.Select(this);
		}
	},

	GetDivClassName : function(hilite, loc)
	{
		if (hilite == true)
		{
			if (this.IsSelectedLeaf == true)
			{
				return 'div' + this.Template.CssPrefix + 'SelectedLeaf' + loc + 'Over';
			}
			else
			{
				return 'div' + this.Template.CssPrefix + loc + 'Over';
			}
		}
		else
		{
			if (this.IsSelectedLeaf == true)
			{
				return 'div' + this.Template.CssPrefix + 'SelectedLeaf' + loc;
			}
			else
			{
				return 'div' + this.Template.CssPrefix + loc;
			}
		}
	}
}
SfUI.Menu.LeafItem.registerClass('SfUI.Menu.LeafItem', SfUI.Menu.MenuItem);

SfUI.Menu.LeafGroup = function()
{
	this.Leafs = new Array();
}
SfUI.Menu.LeafGroup.prototype = 
{
	Add : function(leaf)
	{
		this.Leafs[this.Leafs.length] = leaf;
		leaf.Group = this;
	},
	
	Select : function(leaf)
	{
		for (var i=0; i<this.Leafs.length; ++i)
		{
			if (this.Leafs[i].Container == leaf.Container)
			{
				this.Leafs[i].IsSelectedLeaf = true;
			}
			else
			{
				this.Leafs[i].IsSelectedLeaf = false;
			}
			this.Leafs[i].UnHiliteDiv();
		}
	}
}
SfUI.Menu.LeafGroup.registerClass('SfUI.Menu.LeafGroup', null);

SfUI.Menu.SubMenuItem = function(container, text, template)
{
	SfUI.Menu.SubMenuItem.initializeBase(this, [container, text, template]);

	this.SubMenuWidth = this.Template.SubMenuSizeInfo.Width;
	this.SubMenuHeight = this.Template.SubMenuSizeInfo.Height;
	this.MenuType = SfUI.Menu.MenuType.SubMenu;

	this.ChildDiv = null;
	this.Children = null;
}

SfUI.Menu.SubMenuItem.prototype =
{	
	GetDivClassName : function(hilite, loc)
	{
		if (hilite == true)
		{
			return 'div' + this.Template.CssPrefix + 'SubMenu' + loc + 'Over';
		}
		else
		{
			return 'div' + this.Template.CssPrefix + 'SubMenu' + loc;
		}
	},

	GetChildren : function()
	{
		return this.Children;
	},

	AddLeaf : function(text, onClickFunction)
	{
		var template = this.Template.Clone();
		template.LocationInfo = new SfUI.Menu.LocationInfo(this.GetCurrentChildTopOffset(), 0, this.SubMenuWidth, this.SubMenuHeight);
 		var item = new SfUI.Menu.LeafItem(this.GetCurrentChildContainer(), 
 			text, 
 			template,
 			onClickFunction);
 		item.Create();
		this.AddChild(item);
		return item;
	},

	AddSubMenu : function(text, subSubMenuWidth, subSubMenuHeight)
	{
		var template = this.Template.Clone();
		template.LocationInfo = new SfUI.Menu.LocationInfo(this.GetCurrentChildTopOffset(), 0, this.SubMenuWidth, this.SubMenuHeight);
		template.SubMenuSizeInfo = new SfUI.Menu.SizeInfo(subSubMenuWidth, subSubMenuHeight);
		var sub = new SfUI.Menu.SubMenuItem(this.GetCurrentChildContainer(), text, template);
		sub.Create();
		this.AddChild(sub);
		return sub;
	},

	GetCurrentChildContainer : function()
	{
		return this.Container + ".GetChildItem(" + this.Children.length + ")";
	},

	GetChildItem : function(index)
	{
		return this.Children[index];
	},

	ExpandChildrenNow : function()
	{
		this.ChildDiv.style.visibility = 'visible';
		for (var i=0; i<this.Children.length; ++i)
		{
			this.Children[i].Show();
		}
	},

	CollapseChildrenNow : function()
	{
		this.ChildDiv.style.visibility = 'hidden';
		for (var i=0; i<this.Children.length; ++i)
		{
			this.Children[i].Hide();
			if (this.Children[i].MenuType == SfUI.Menu.MenuType.SubMenu)
			{
				this.Children[i].CollapseChildrenNow();
			}
		}
	},
	
	AddChild : function(item)
	{
		item.Parent = this;
		item.ZIndex = this.ZIndex+1;

		item.TextDiv.style.zIndex = item.ZIndex;

		this.ChildDiv.appendChild(item.RootDiv);
		this.Children[this.Children.length] = item;
		this.ChildDiv.style.height = this.Calculator.GetHeight(((this.SubMenuHeight-2*this.Template.ChildBorderWidth)*this.Children.length+2*this.Template.ChildBorderWidth), this.Template.ChildBorderWidth) + 'px';
	},

	GetCurrentChildTopOffset : function()
	{
		return this.Children.length * (this.SubMenuHeight-2*this.Template.ChildBorderWidth);
	},

	Create : function()
	{
		this.InitializeCalculator();
		this.CreateRootDiv();
		this.CreateTextDiv();
		this.CreateChildDiv();
		this.Children = new Array(0);
	},

	CreateChildDiv : function()
	{
		this.ChildDiv = this.CreateElement(
			this.Calculator.GetCalculatedChildTopOffset(0, this.GetBorderWidth()), 
			this.Calculator.GetCalculatedChildLeftOffset(this.Width, this.GetBorderWidth()), 
			this.Calculator.GetWidth(this.SubMenuWidth, this.GetBorderWidth()), 
			this.Calculator.GetHeight(this.Height, this.GetBorderWidth()));
		this.RootDiv.appendChild(this.ChildDiv);
	}
}
SfUI.Menu.SubMenuItem.registerClass('SfUI.Menu.SubMenuItem', SfUI.Menu.MenuItem);

SfUI.Menu.BaseMenuItem = function(container, text, template, tooltip)
{
	SfUI.Menu.BaseMenuItem.initializeBase(this, [container, text, template, tooltip]);

	this.Expanded = false;

	this.Create();
	
    this.TextDiv.setAttribute('title', tooltip);
	this.TextDiv.onclick = new Function("", this.Container + ".OnClick();");

}
SfUI.Menu.BaseMenuItem.prototype =
{
	GetBorderWidth : function()
	{
		return this.Template.BaseBorderWidth;
	},

	GetDivClassName : function(hilite, loc)
	{
		if (hilite == true)
		{
			return 'div' + this.Template.CssPrefix + 'Base' + loc + 'Over';
		}
		else
		{
			return 'div' + this.Template.CssPrefix + 'Base' + loc;
		}
	},

	CreateChildDiv : function()
	{
		this.ChildDiv = this.CreateElement(
			this.Height,
			0,
			this.Calculator.GetWidth(this.SubMenuWidth, this.Template.ChildBorderWidth), 
			this.Calculator.GetHeight(this.Height, this.Template.ChildBorderWidth));
		this.RootDiv.appendChild(this.ChildDiv);
	},

	GetLeftDivWidth : function()
	{
		return this.Template.BaseLeftDivWidth;
	},

	GetRightDivWidth : function()
	{
		return this.Template.BaseRightDivWidth;
	},

	OnMouseOver : function()
	{
		this.HiliteDiv();
	},

	OnMouseOut : function()
	{
		if (this.Expanded == true)
		{
			return;
		}
		this.UnHiliteDiv();

	},

	OnClick : function()
	{
		if (this.Expanded == true)
		{
			this.CollapseChildrenNow();
		}
		else
		{
			this.ExpandChildrenNow();
		}
		this.Expanded = !this.Expanded;
	}

}
SfUI.Menu.BaseMenuItem.registerClass('SfUI.Menu.BaseMenuItem', SfUI.Menu.SubMenuItem);


Type.registerNamespace('SfUI.Tooltip');			
SfUI.Tooltip.TooltipEnabled = function(container, client, toolTip)
{
	this._container = container;
	this._client = client;
	this._tooltip = toolTip;
	this._handleClient = null;
	this._handleTooltip = null;
	
	this._Initialize();
}

SfUI.Tooltip.TooltipEnabled.prototype = 
{
	_Initialize : function()
	{
		this._client.observe('mouseover', this._ClientOnMouseOver.bindAsEventListener(this), true);					
		this._client.observe('mouseout', this._ClientOnMouseOut.bindAsEventListener(this), true);
		this._tooltip.observe('mouseover', this._TooltipOnMouseOver.bindAsEventListener(this), true);					
		this._tooltip.observe('mouseout', this._TooltipOnMouseOut.bindAsEventListener(this), true);
	},
	
	_ClientOnMouseOver : function(e)
	{
		SfKernel.Util.SetCursor(this._client, SfKernel.CursorType.Hand);

		Event.stop(e);

		window.clearTimeout(this._handleTooltip);
		window.clearTimeout(this._handleClient);
	
		var containerDimension = {Width:this._container.getWidth(), Height:this._container.getHeight()};
		var boxDimension = {Width:this._tooltip.getWidth(), Height:this._tooltip.getHeight()};

		var positionCalculator = new SfImage.Popup.PositionCalculator(containerDimension, boxDimension);

		var offset = this._GetOffsetFromContainer();
		
		var anchorInfo = {Top:offset.OffsetTop, Left:offset.OffsetLeft, Width:this._client.getWidth(), Height:this._client.getHeight()};
		
		var displayPos = positionCalculator.GetPopupPosition(anchorInfo);

		this._tooltip.setStyle({'top':displayPos.Top+'px', 'left':displayPos.Left+'px'});
		this._tooltip.show();
		
	},
	
	//! Refactor Up
	_GetOffsetFromContainer : function()
	{
		var containerOffset = Position.cumulativeOffset(this._container);
		var boxOffset = Position.cumulativeOffset(this._client);
		
		return {OffsetTop: boxOffset[1] - containerOffset[1], OffsetLeft: boxOffset[0] - containerOffset[0]};
	},
	
	_ClientOnMouseOut : function(e)
	{
		SfKernel.Util.SetCursor(this._client, SfKernel.CursorType.Default);

		this._handleClient = window.setTimeout(this._HideTooltip.bind(this), 300);
	},
	
	_TooltipOnMouseOver : function(e)
	{
		Event.stop(e);

		window.clearTimeout(this._handleClient);
		window.clearTimeout(this._handleTooltip);
		
	},
	
	_TooltipOnMouseOut : function(e)
	{
		this._handleTooltip = window.setTimeout(this._HideTooltip.bind(this), 300);
	},
	
	_HideTooltip : function()
	{
		this._tooltip.hide();
	}
	
}

SfUI.Checkbox = function(element, imageInfo, enabled)
{
	this._element = element;
	this._imageInfo = imageInfo;
	this._checked = false;
	this._enabled = enabled;

	if (this._enabled == true)
	{
		this._mouseOverListener = this._OnMouseOver.bind(this);
		this._mouseOutListener = this._OnMouseOut.bind(this);

		this._element.observe('mouseover', this._mouseOverListener);
		this._element.observe('mouseout', this._mouseOutListener);
	}
	else
	{
		this._element.style.backgroundImage = 'url(' + this._imageInfo.DisabledImage + ')';
	}
}
SfUI.Checkbox.prototype =
{
	SetChecked : function(value)
	{
		this._checked = value;
		this._UpdateImage();
	},
	
	GetChecked : function()
	{
		return this._checked;
	},

	Toggle : function()
	{
		this.SetChecked(!this.GetChecked());
	},
		
	SetOnClickMethod : function(onClickFunction)
	{
		this._element.observe('click', onClickFunction);
	},
	
	_OnMouseOver : function()
	{
		SfKernel.Util.SetCursor(this._element, SfKernel.CursorType.Hand);
		if (this._checked == false)
		{
			this._element.style.backgroundImage = 'url(' + this._imageInfo.OverImage + ')';
		}
		else
		{
			this._element.style.backgroundImage = 'url(' + this._imageInfo.CheckedOverImage + ')';
		}
	},
	
	_OnMouseOut : function()
	{
		this._UpdateImage();
		SfKernel.Util.SetCursor(this._element, SfKernel.CursorType.Default);
	},
	
	_UpdateImage : function()
	{
		if (this._enabled == false)
		{
			this._element.style.backgroundImage = 'url(' + this._imageInfo.DisabledImage + ')';
			return;
		}
		
		if (this._checked == true)
		{
			this._element.style.backgroundImage = 'url(' + this._imageInfo.CheckedImage + ')';
		}
		else
		{
			this._element.style.backgroundImage = 'url(' + this._imageInfo.NormalImage + ')';
		}
	}
}
SfUI.Checkbox.registerClass('SfUI.Checkbox', null);



SfUI.$create__imagePos = function SfUI__imagePos() { return {}; }

SfUI.Magnifier = function SfUI_Magnifier(imageDiv, magAreaDiv) {
    this._image = imageDiv;
    this._magArea = magAreaDiv;
    this._initialize();
}
SfUI.Magnifier.prototype = {
    _image: null,
    _magArea: null,
    _imagePos: null,
    _magWidth: 0,
    _magHeight: 0,
    _isEnabled: false,
    _mouseOutListener: null,
    _mouseMoveListener: null,
    
    IsEnabled: function SfUI_Magnifier$IsEnabled() {
        return this._isEnabled;
    },
    
    Enable: function SfUI_Magnifier$Enable() {
        if (this._isEnabled) {
            return;
        }
        this._bindEventListeners();
        this._isEnabled = true;
    },
    
    Disable: function SfUI_Magnifier$Disable() {
        if (!this._isEnabled) {
            return;
        }
        this._unbindEventListeners();
        this._onMouseOut(null);
        this._isEnabled = false;
    },
    
    _bindEventListeners: function SfUI_Magnifier$_bindEventListeners() {
        this._image.observe('mousemove', this._mouseMoveListener);
        this._magArea.observe('mousemove', this._mouseMoveListener);
        this._magArea.observe('mouseout', this._mouseOutListener);
        this._image.observe('mouseover', this._mouseOverListener);
    },
    
    _unbindEventListeners: function SfUI_Magnifier$_unbindEventListeners() {
        this._image.stopObserving('mousemove', this._mouseMoveListener);
        this._magArea.stopObserving('mousemove', this._mouseMoveListener);
        this._magArea.stopObserving('mouseout', this._mouseOutListener);
        this._image.stopObserving('mouseover', this._mouseOverListener);
    },
    
    _initialize: function SfUI_Magnifier$_initialize() {
        this._imagePos = SfUI.$create__imagePos();
        this._magWidth = this._magArea.getWidth() + 2;
        this._magHeight = this._magArea.getHeight() + 2;
        var myPos = Position.cumulativeOffset(this._image);
        this._imagePos.left = myPos[0];
        this._imagePos.right = this._imagePos.left + this._image.getWidth();
        this._imagePos.top = myPos[1];
        this._imagePos.bottom = this._imagePos.top + this._image.getHeight();                
        this._mouseOutListener = Function.createDelegate(this, this._onMouseOut);
        this._mouseMoveListener = Function.createDelegate(this, this._onMouseMove);
        this._mouseOverListener = Function.createDelegate(this, this._onMouseOver);
    },    
    
    _recalculatePositions: function SfUI_Magnifier$_recalculatePositions() {
        /* needs to be done somtime after the currentslide position is changed */
        this._imagePos = SfUI.$create__imagePos();
        var myPos = Position.cumulativeOffset(this._image);
        this._imagePos.left = myPos[0];
        this._imagePos.right = this._imagePos.left + this._image.getWidth();
        this._imagePos.top = myPos[1];
        this._imagePos.bottom = this._imagePos.top + this._image.getHeight();
    },
    
    _onMouseOut: function SfUI_Magnifier$_onMouseOut(e) {
        this._magArea.style.display = 'none';
    },
    
    _onMouseOver: function SfUI_Magnifier$_onMouseOver(e) {
        this._recalculatePositions();
    },
        
    _onMouseMove: function SfUI_Magnifier$_onMouseMove(e) {
        var ex = e.clientX;
        var ey = e.clientY;
        this._magArea.style.display = '';
  
        var fullSizeWidth = document.getElementById('currentSlideMagnifierImage').width;
        var fullSizeHeight = document.getElementById('currentSlideMagnifierImage').height;
                
        var leftOffset = (ex - this._imagePos.left) * (fullSizeWidth / this._image.width) - (this._magWidth/2);        
        
        if(leftOffset < 0 )
        {
            this._magArea.scrollLeft = 0;
        }
        else
        {
            this._magArea.scrollLeft = leftOffset;
        }
 
        var topOffset = (ey - this._imagePos.top) * (fullSizeHeight / this._image.height) - (this._magHeight/2);        
        if(topOffset < 0 )
        {
            this._magArea.scrollTop = 0;
        }
        else
        {
            this._magArea.scrollTop = topOffset;        
        }
       
        this._magArea.setStyle({ left: this._getMagLeftPosition(ex) + 'px', top: this._getMagTopPosition(ey) + 'px' });
    },
    
    _getMagLeftPosition: function SfUI_Magnifier$_getMagLeftPosition(ex) {
        var leftPos = ex - this._magWidth / 2;
        if (leftPos > this._imagePos.right - this._magWidth) {
            leftPos = this._imagePos.right - this._magWidth;
        }
        else if (leftPos < this._imagePos.left) {
            leftPos = this._imagePos.left;
        }
        return leftPos;
    },
    
    _getMagTopPosition: function SfUI_Magnifier$_getMagTopPosition(ey) {
        var topPos = ey - this._magHeight / 2;
        if (topPos > this._imagePos.bottom - this._magHeight) {
            topPos = this._imagePos.bottom - this._magHeight;
        }
        else if (topPos < this._imagePos.top) {
            topPos = this._imagePos.top;
        }
        return topPos;
    }
}


SfUI.Magnifier.registerClass('SfUI.Magnifier');