/// <reference path="intellisense/intellisense.js" />

/******************************************************************************
**      Desc: Contains the client-side functionality for Reading Room page.
**		Auth: Steve Saxon
**		Date: 04/01/2008
*******************************************************************************
**		Change History
*******************************************************************************
**		Date:		Author:		Description:
**		-----------	-----------	-----------------------------------------------
**		04/01/2008	Steve S.	File created.
*******************************************************************************/

/******************************************************************************
	Fidelity.Scripts.Pages.ReadingRoom static class
******************************************************************************/

function ReadingRoomCarousel(id, items, ix)
{
	this._id = id;
	this._element = $get(id);
	this._items = items;
	this._index = ix;
	this._transition = null;
	
	this._setupPager();
}

ReadingRoomCarousel.prototype = 
{
	setUrl : function(src) {
		var i;
		for(i = 0; i < this._items.length; i++)
		{
			var item = this._items[i];
			if(item.image == src)
			{
				if(this._index != i)
				{
					this._index = i;
					window.clearInterval(this._interval);
					this._interval = window.setInterval( function() { me._next(); }, 10000 );
		
					if(this._transition)
					{
						var me = this;
						this._transition.transition(Fidelity.Scripts.TransitionType.crossFade, function() { me._setImage(); });
					}
					else
					{
						this._setImage();			
					}
				}
				break;
			}
		}
	},

	_setupPager : function() {
	
		// if we only have 1 photo, no need for a pager
		if (this._items.length <= 1) return;
	
		this._interval = window.setInterval( Function.createDelegate(this, function() { this._next(); }), 10000 );
		this._transition = $create(Fidelity.Scripts.Behaviors.Transitions, null, null, null, this._element);

		var bounds = Sys.UI.DomElement.getBounds(this._element);
		var w = bounds.width;
		var h = bounds.height;
		if(!w)
		{
			w = this._element.offsetWidth;
			h = this._element.offsetHeight;
		}

		var top = (h - 18) / 2;
		var elemDiv = $get(this._id + '_bg');
		var div = document.createElement("div");
		div.className = 'carouselPager';
		div.style.left = 4 + 'px';
		div.style.top = top + 'px';
		div.innerHTML = '<img src="' + $staticUrl + '/6.14.11/5/13/50/carouselLeft.png" />';
		this._leftPager = this._element.insertBefore(div, elemDiv);
		div = document.createElement("div");
		div.className = 'carouselPager';
		div.style.left = (w - 20 - 4 - 2) + 'px';
		div.style.top = top + 'px';
		div.innerHTML = '<img src="' + $staticUrl + '/6.14.11/5/13/50/carouselRight.png" />';
		this._rightPager = this._element.insertBefore(div, elemDiv);
		
		var me = this;
		$addHandler(this._element, "mouseover", Function.createDelegate(this, function(evt) { this._leftPager.style.display = 'block'; me._rightPager.style.display = 'block'; evt.stopPropagation(); }));
		$addHandler(document.body, "mouseover", Function.createDelegate(this, function(evt) { if(!this._inside(evt)) { this._leftPager.style.display = 'none'; me._rightPager.style.display = 'none'; }}));
		$addHandler(this._leftPager, "click", Function.createDelegate(this, function(evt) { this._pageBackward(); }));
		$addHandler(this._rightPager, "click", Function.createDelegate(this, function(evt) { this._pageForward(); }));
	},
	
	_inside : function(evt) {
		return(evt.target == this._element || evt.target.parentNode == this._leftPager || evt.target.parentNode == this._rightPager);
	},

	_pageBackward : function() {
		var me = this;
		window.clearInterval(this._interval);
		this._interval = window.setInterval( function() { me._next(); }, 10000 );
	
		if(!this._transition)
		{
			this._transition = $create(Fidelity.Scripts.Behaviors.Transitions, null, null, null, this._element);
		}
		
		this._index--;
		
		if(this._index < 0)
		{
			this._index = this._items.length - 1;
		}
		
		this._transition.transition(Fidelity.Scripts.TransitionType.wipeRight, function() { me._setImage(); });
	},

	_pageForward : function() {
		var me = this;
		window.clearInterval(this._interval);
		this._interval = window.setInterval( function() { me._next(); }, 10000 );
	
		if(!this._transition)
		{
			this._transition = $create(Fidelity.Scripts.Behaviors.Transitions, null, null, null, this._element);
		}
		
		this._index++;
		
		if(this._index == this._items.length)
		{
			this._index = 0;
		}
		
		this._transition.transition(Fidelity.Scripts.TransitionType.wipeLeft, function() { me._setImage(); });
	},

	_next : function() {
		if(!this._transition)
		{
			this._transition = $create(Fidelity.Scripts.Behaviors.Transitions, null, null, null, this._element);
		}
	
		this._index++;
		if(this._index == this._items.length)
		{
			this._index = 0;
		}
	
		var me = this;
		this._transition.transition(Fidelity.Scripts.TransitionType.gradientWipe, function() { me._setImage(); });
	},
	
	_onClick : function() {
		var item = this._items[this._index];
		document.location = item.url;
	},

	_setImage : function() {
		var elemDiv = $get(this._id + '_bg');
		var elemTd = $get(this._id + '_cell');
		var item = this._items[this._index];
		if(elemTd)
		{
			var h = '<div class="articleType{3}">{0}</div><div class="title{3}">{1}';
			if(item.synopsis)
			{
				h += '</div><div class="subtitle{3}">{2}</div>';
			}
			elemTd.innerHTML = h.format( item.category, item.headline, item.synopsis, !!item.dark ? "Dark" : "Light" );
		}
		elemDiv.style.backgroundImage = 'url(' + item.image + ')';
	}
};