﻿function ImageAccordionPanel(accordion, divMain, i)
{
	this._accordion = accordion;
	this._divMain = divMain;
	this._divText = this._divMain.$$("DIV.text");
	this._index = i;
	this._navigateUrl = this._divMain.getAttribute("NavigateUrl");
	this._expandedLocation = new Point(parseInt(this._divMain.getAttribute("ExpandedX")), parseInt(this._divMain.getAttribute("ExpandedY")));
	this._collapsedLocation = new Point(parseInt(this._divMain.getAttribute("CollapsedX")), parseInt(this._divMain.getAttribute("CollapsedY")));

	this._divMain.addEvent("click", this._OnClick.bind(this));
	this._divMain.addEvent("mouseover", this._OnMouseOver.bind(this));
	this._divMain.addEvent("mouseout", this._OnMouseOut.bind(this));
}
ImageAccordionPanel.prototype._accordion = null;
var _____a;
if (_____a)
	ImageAccordionPanel.prototype._accordion = new ImageAccordion();
ImageAccordionPanel.prototype._divMain = document.createElement("div");
ImageAccordionPanel.prototype._divText = document.createElement("div");
//ImageAccordionPanel.prototype._image = document.createElement("img");
ImageAccordionPanel.prototype._index = 0;
ImageAccordionPanel.prototype._width = 105;
ImageAccordionPanel.prototype._mouseOverTimeoutId = null;
ImageAccordionPanel.prototype._navigateUrl = "";
ImageAccordionPanel.prototype._expandedLocation = new Point(0, 0);
ImageAccordionPanel.prototype._collapsedLocation = new Point(0, 0);

//ImageAccordionPanel.prototype._get_Width = function _get_Width()
//{
//	return this._width;
//}
ImageAccordionPanel.prototype._set_Width = function _set_Width(value)
{
	if (value != Math.round(value)) 
		throw new Error("Bad value");
	this._width = value;
	if (this._width >= this._accordion._expandedWidth)
	{
		//		this._width = this._accordion._expandedWidth;
		this.Show();
	}
	else if ((this._width - this._accordion._collapsedWidth) <= -1)
	{
		this._width = this._accordion._collapsedWidth;
	}
	this._divMain.set_WidthStyle(this._width);
	this._UpdateImagePosition();
}
ImageAccordionPanel.prototype.Show = function Show()
{
	this._divText.style.display = "block";
}
ImageAccordionPanel.prototype.Hide = function Hide()
{
	this._divText.style.display = "";
}
ImageAccordionPanel.prototype._UpdateImagePosition = function _UpdateImagePosition()
{
	var coef = (this._width - this._accordion._collapsedWidth) / (this._accordion._expandedWidth - this._accordion._collapsedWidth);
	var loc = new Point(this._collapsedLocation.x + (this._expandedLocation.x - this._collapsedLocation.x) * coef, this._collapsedLocation.y + (this._expandedLocation.y - this._collapsedLocation.y) * coef);
	this._divMain.style.backgroundPosition = loc.x + "px " + loc.y + "px";
}
ImageAccordionPanel.prototype._ClearTimeout = function _ClearTimeout()
{
	if (this._mouseOverTimeoutId != null)
	{
		clearTimeout(this._mouseOverTimeoutId);
		this._mouseOverTimeoutId = null;
	}
}
ImageAccordionPanel.prototype.Activate = function Activate()
{
	this._mouseOverTimeoutId = null;
	if (this._accordion._activePanel != this._index)
	{
		this._accordion._Activate(this);
	}
}
ImageAccordionPanel.prototype._OnClick = function _OnClick(e)
{
	location.href = this._navigateUrl;
}
ImageAccordionPanel.prototype._OnMouseOver = function _OnMouseOver(e)
{
	this.Activate();
}
ImageAccordionPanel.prototype._OnMouseOut = function _OnMouseOut(e)
{
}
ImageAccordionPanel.prototype._get_Step = function _get_Step()
{
	return Math.min(this._width - this._accordion._collapsedWidth, Math.min(this._accordion._maxSpeed / this._accordion._numToCollapse, Math.max(this._accordion._minSpeed / this._accordion._numToCollapse, (this._width - this._accordion._collapsedWidth) / 10)));
}

function ImageAccordion(clientId)
{
	this._toCollapse = null;
	this._divMain = document.getElementById(clientId);
	this._expandedWidth = parseInt(this._divMain.getAttribute("ExpandedWidth"));

	this._panels = new Array();
	var panelDivs = this._divMain.$$("DIV", true);

	for (var i = 0; i < panelDivs.length; ++i)
	{
		this._panels.push(new ImageAccordionPanel(this, panelDivs[i], i));
	}
	if (this._panels.length > 0)
	{
		this._activePanel = 0;
		this._panels[this._panels.length - 1]._divMain.style.borderRight = "none";

		this._CalculateWidths();

		var width = this._width - this._expandedWidth;
		var numCollapsed = this._panels.length - 1;
		for (var iPanel = 0; iPanel < this._panels.length; ++iPanel)
		{
			if (iPanel != this._activePanel)
			{
				var panel = this._panels[iPanel];
				panel._set_Width(Math.round(width / numCollapsed));
				width -= panel._width;
				--numCollapsed;
			}
		}
		this._panels[this._activePanel]._set_Width(this._expandedWidth);

		window.addEvent("resize", this.window_Resize.bind(this));
	}
}
ImageAccordion.prototype._collapsedWidth = 105;
ImageAccordion.prototype._expandedWidth = 535;
ImageAccordion.prototype._panels = new Array();
ImageAccordion.prototype._activePanel = 0;
ImageAccordion.prototype._toCollapse = null;
ImageAccordion.prototype._divMain = document.createElement("asd");
ImageAccordion.prototype._width = 0;
ImageAccordion.prototype._intervalId = null;
ImageAccordion.prototype._animationActive = false;
ImageAccordion.prototype._animationIntervalTimeout = 1;
ImageAccordion.prototype._maxSpeed = 25;
ImageAccordion.prototype._minSpeed = 6;
ImageAccordion.prototype._mouseOverTimeout = 700;

ImageAccordion.prototype._CalculateWidths = function _CalculateWidths()
{
	this._width = this._divMain.offsetWidth - getNumValueFromStyle(this._divMain.GetComputedStyle().borderLeftWidth) - getNumValueFromStyle(this._divMain.GetComputedStyle().borderRightWidth);
	this._collapsedWidth = (this._width - this._expandedWidth) / (this._panels.length - 1);
}

ImageAccordion.prototype._Activate = function _Activate(panel)
{
	this._panels[this._activePanel].Hide();
	this._activePanel = panel._index;

	this._toCollapse = new Array();
	for (var iPanel = 0; iPanel < this._panels.length; ++iPanel)
	{
		var panel = this._panels[iPanel];
		if (iPanel != this._activePanel && (panel._width - this._collapsedWidth) >= 1)
		{
			//		this
			//			var iToCollapse = 0;
			//			for (; iToCollapse < this._toCollapse.length; ++iToCollapse)
			//			{
			//				var collapse = this._toCollapse[iToCollapse];
			//				if (collapse._width > panel._width)
			//				{
			//				
			//				}
			//			}
			//			this._toCollapse.splice(iInsert, 0, this._panels[iPanel]);
			this._toCollapse.push(this._panels[iPanel]);
		}
	}
	this._StartAnimation();
}
ImageAccordion.prototype._StartAnimation = function _StartAnimation()
{
	if (this._intervalId == null)
	{
		this._intervalId = setInterval(this._AnimationStep.bind(this), this._animationIntervalTimeout);
	}
}
ImageAccordion.prototype._StopAnimation = function _StopAnimation()
{
	clearInterval(this._intervalId);
	this._intervalId = null;
}

var colors = ["Red", "Blue", "Green", "Black"];

ImageAccordion.prototype._AnimationStep = function _AnimationStep()
{
	var expandPanel = this._panels[this._activePanel];
	var expandStep =
		Math.min(
			this._expandedWidth - expandPanel._width,
			Math.min(
				this._maxSpeed,
				Math.max(
					this._minSpeed,
					(this._expandedWidth - expandPanel._width) / 10
				)
			)
		);
	expandStep = Math.round(expandStep);

	if (expandStep == 0)
	{
		this._StopAnimation();
		return;
	}

	var sum = 0;
	for (var iToCollapse = 0; iToCollapse < this._toCollapse.length; ++iToCollapse)
	{
		var collapsePanel = this._toCollapse[iToCollapse];
		sum += collapsePanel._width - this._collapsedWidth;
	}

	var t = expandStep;
	for (var iToCollapse = 0; iToCollapse < this._toCollapse.length; ++iToCollapse)
	{
		var collapsePanel = this._toCollapse[iToCollapse];

		var collapseStep = Math.min(t, Math.round(expandStep * Math.ceil(collapsePanel._width - this._collapsedWidth) / sum));
		collapsePanel._set_Width(collapsePanel._width - collapseStep);

		t -= collapseStep;
	}

	expandPanel._set_Width(expandPanel._width + expandStep - t);

	var total = 0;
	for (var iPanel = 0; iPanel < this._panels.length; ++iPanel)
	{
		total += this._panels[iPanel]._width;
	}
	this._panels[this._activePanel]._set_Width(this._panels[this._activePanel]._width + this._width - total);
}

ImageAccordion.prototype.window_Resize = function window_Resize(e)
{
	this._CalculateWidths();
	this._StartAnimation();
}