/**
 * Scroll List
 * @author TongPV
 * @version 1.0
 * 
 */

function slideTo(el, x, y, uTime)
{
	if (!(el = $(el))) {
		return;
	}
	var pos = el.viewportOffset();
	if (!el.timeout) {
		el.timeout = 25;
	}
	el.xTarget = x;
	el.yTarget = y;
	el.slideTime = uTime;
	el.stop = false;
	el.xA = el.xTarget - el.getLeft(); // A = distance
	el.yA = el.yTarget - el.getTop();
	if (el.slideLinear) {
		el.B = 1/el.slideTime;
	}
	else {
		el.B = Math.PI / (2 * el.slideTime); // B = period
	}
	el.yD = el.getTop();
	el.xD = el.getLeft(); // D = initial position
	var d = new Date();
	el.C = d.getTime();
	if (!el.moving) {
		_slideTo(el);
	}
}
function _slideTo(el)
{
	if (!(el = $(el))) {
		return;
	}
	var now, s, t, newY, newX;
	now = new Date();
	t = now.getTime() - el.C;
	if (el.stop) {
		el.moving = false;
	}
	else if (t < el.slideTime) {
		setTimeout("_slideTo('" + el.id + "')", el.timeout);
		s = el.B * t;
		if (!el.slideLinear) {
			s = Math.sin(s);
		}
		
		newX = Math.round(el.xA * s + el.xD);
		newY = Math.round(el.yA * s + el.yD);
		//alert([newX, newY]);
		el.setLeft(newX);
		el.setTop(newY);
		el.moving = true;
	}
	else {
		el.setLeft(el.xTarget);
		el.setTop(el.yTarget);
		el.moving = false;
		if (el.onslideend) {
			el.onslideend();
		}
	}
}

// ScrollList
ScrollList = Class.create();
ScrollList.prototype = {
	options: {
		parent: '',
		id: 'scrollList',
		title: '',
		position: 'absolute',
		top: 0,
		left: 0,
		width: 0,
		height: 0,
		direction: 'vertical', // vertical: top - down; horizontal: left - right
		left_right: 'right',
		currentPage: 0,
		scrlStep: 150,
		duration: 1000,
		autoScroll: false,
		delay: 5,
		enableMouseOver: false,
		enableMouseWheel: false,
		_pause: false,
		dataSource: [],
		itemTemplate: '',
		items: [],
		itemsTooltipTemplate: '',
		containerSelector: 'div.scrollList',
		scrlElSelector: 'div.list',
		itemSelector: 'div.item',
		btnNextSelector: 'div.btnNext',
		btnPreviousSelector: 'div.btnPrevious',
		scrollNavEnable: false
	},

	initialize: function(parent, options) {
		options = options || {};
		Object.extend(this.options, options);
		Object.extend(this, this.options);
		this.options = options || this.options;
		this.containerEl = $(parent);
		
		this.container = this.containerEl.getElementsBySelector(this.containerSelector);
		if (!this.container.length) {
			this.container = new Element('div', {
				id: this.id,
				'class': 'scrollList'
			});
			this.containerEl.appendChild(this.container);
		} else {
			this.container = this.container[0];
			if (this.container.id) {
				this.id = this.container.id;
			}
		}
		this.container.parent = this;
		this.style = this.container.style;

		// btnPrevious
		this.btnPrevious = this.containerEl.getElementsBySelector(this.btnPreviousSelector);
		if (!this.btnPrevious.length) {
			this.btnPrevious = new Element('div', {
				'class': 'btnPrevious'
			});
			this.container.appendChild(this.btnPrevious);
		} else {
			this.btnPrevious = this.btnPrevious[0];
		}
		this.btnPrevious.scrlUp = true;
		this.btnPrevious.parent = this;
		
		// scrollNav
		if (this.scrollNavEnable) {
			this.scrollNav = this.containerEl.getElementsBySelector('div.scrollNav');
			if (!this.scrollNav.length) {
				this.scrollNav = new Element('div', {
					'class': 'scrollNav'
				});
				this.container.appendChild(this.scrollNav);
			} else {
				this.scrollNav = this.scrollNav[0];
				this.navPages = this.scrollNav.getElementsBySelector('li');
				if (this.navPages.length) {
					for (var i = 0, l = this.navPages.length; i < l; i++) {
						if (this.navPages[i].hasClassName('current')) {
							this.currentPage = this.navPages[i].value;
						}
						Event.observe(this.navPages[i], 'click', this._menuItemOnClick.bindAsEventListener(this, i), false);
					}
				}
			}
			this.scrollNav.parent = this;
		}
		
		// mask layer
		this.mask = this.containerEl.getElementsBySelector('div.mask');
		if (!this.mask.length) {
			this.mask = new Element('div', {
				'class': 'mask'
			});
			this.container.appendChild(this.mask);
		} else {
			this.mask = this.mask[0];
		}
		this.mask.parent = this;
		
		// itemList
		this.scrlEl = this.containerEl.getElementsBySelector(this.scrlElSelector);		
		if (!this.scrlEl.length) {
			this.scrlEl = new Element('div', {
				id: this.id + "_scrlEle",
				'class': 'list',
				'style': 'position: absolute; z-index: 1'
			});
			this.mask.appendChild(this.scrlEl);
		} else {
			this.scrlEl = this.scrlEl[0];
			this.items = this.scrlEl.getElementsBySelector(this.itemSelector);
			if (this.items.length) {
				for (var i = 0, l = this.items.length; i < l; i++) {
					Event.observe(this.items[i], 'click', this.iOnClick.bindAsEventListener(this, i), false);
				}
			}
		}

		// btnNext
		this.btnNext = this.containerEl.getElementsBySelector(this.btnNextSelector);
		if (!this.btnNext.length) {
			this.btnNext = new Element('div', {
				'class': 'btnNext'
			});
			this.container.appendChild(this.btnNext);
		} else {
			this.btnNext = this.btnNext[0];
		}
		this.btnNext.parent = this;

		// Event
		if (this.enableMouseWheel) {
			Event.observe(this.container, "mousewheel", this.mWheel.bindAsEventListener(this), false);
			Event.observe(this.container, "DOMMouseScroll", this.mWheel.bindAsEventListener(this), false); // Firefox
		}

		if (this.direction == 'vertical') {
			if (this.enableMouseOver) {
				Event.observe(this.btnPrevious, "mouseover", this.bOnMouseover.bindAsEventListener(this, "up"), false);
				Event.observe(this.btnPrevious, "mouseout", this.bOnMouseout.bindAsEventListener(this), false);
				Event.observe(this.btnNext, "mouseover", this.bOnMouseover.bindAsEventListener(this, "down"), false);
				Event.observe(this.btnNext, "mouseout", this.bOnMouseout.bindAsEventListener(this), false);
			}
			Event.observe(this.btnPrevious, "click", this.bOnClick.bindAsEventListener(this, "up"), false);
			Event.observe(this.btnNext, "click", this.bOnClick.bindAsEventListener(this, "down"), false);
		}
		else {
			if (this.enableMouseOver) {
				Event.observe(this.btnPrevious, "mouseover", this.bOnMouseover.bindAsEventListener(this, "left"), false);
				Event.observe(this.btnPrevious, "mouseout", this.bOnMouseout.bindAsEventListener(this), false);
				Event.observe(this.btnNext, "mouseover", this.bOnMouseover.bindAsEventListener(this, "right"), false);
				Event.observe(this.btnNext, "mouseout", this.bOnMouseout.bindAsEventListener(this), false);
			}
			Event.observe(this.btnPrevious, "click", this.bOnClick.bindAsEventListener(this, "left"), false);
			Event.observe(this.btnNext, "click", this.bOnClick.bindAsEventListener(this, "right"), false);
		}
	},
	setTemplate: function(itemTemplate, syntax)
	{
		syntax = syntax || '/(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/';
		this.itemTemplate = new Template(itemTemplate, syntax);
	},
	
	dataBind: function()
	{
		this.scrlEl.innerHTML = '';
		var __data__ = this.dataSource;
		this.items.count = __data__.length;
		if (this.items.count < 1)
		{
			this.scrlEl.innerHTML = 'No items found';
		}
		else
		{
			var itt;
			var objBody = document.getElementsByTagName("body")[0];
			if (this.itemsTooltipTemplate != '' || this.itemsTooltipTemplate != '')
			{
				itt = $(this.itemsTooltipTemplate);
			}
			for (var i=0; i<this.items.count; i++)
			{
				var iDiv = document.createElement("div");
				var item = __data__[i];
				iDiv.className = 'item';
				this.scrlEl.appendChild(iDiv);
				iDiv.parent = this;
				//iDiv.id = this.id + "_item_" + i;
				//iDiv.style.position = 'relative';
				//iDiv.style.width = this.options.width;
				iDiv.innerHTML = this.itemTemplate.evaluate(item);
				iDiv.index = i;
				iDiv.onclick = this.iOnClick;
				this.items.push(iDiv);
				/*if (itt)
				{
					var tooltip = document.createElement("div");
					tooltip = itt.cloneNode(true);
					objBody.appendChild(tooltip);
					tooltip.id = this.id + "_tooltip_" + i;
					html = this.ApplyTemplate(itt.innerHTML, item);
					tooltip.innerHTML = html;
					var my_tooltip = new ToolTip(iDiv, tooltip);
				}*/
			}
		}
	},
	show: function() {
		this.style.display = 'block';
		if (this.autoScroll) {
			new PeriodicalExecuter(function()
			{
				if(!this._pause){
					this.bOnClick(null, this.left_right);	
				}				
			}.bind(this), this.delay);			
		}
	},
	hide: function() {
		this.style.display = 'none';
    },
	refresh: function() {
	},
	changeDataSource: function(dataSource) {
		this.setDataSource(dataSource);
		this.databind();
		this.show();
	},

	setDataSource: function(dataSource) {
		if (typeof(dataSource) == 'string' && dataSource.isJSON()) {
			this.dataSource = dataSource.evalJSON();
		}
		else if (typeof(dataSource) == 'array') {
			this.dataSource = dataSource;
		}
		else {
			throw 'Thuoc tinh dataSource khong la xau dang JSON hoac mang';
		}
	},

	mWheel: function(e) {
		var __offset;
		var x = this.scrlEl.getLeft();
		var y = this.scrlEl.getTop();
		if (Event.wheel(e) > 0)
		{
			if (this.direction == 'vertical') {
				if (this.scrlEl.getTop() < 0) {
					__offset = Math.max(this.scrlEl.getTop(), -this.scrlStep);
					y = this.scrlEl.getTop() - __offset;
				}
			}
			else {
				if (this.scrlEl.getLeft() <= 0) {
					__offset = Math.max(this.scrlEl.getLeft(), -this.scrlStep);
					x = this.scrlEl.getLeft() - __offset;
				}
			}
		}
		else {
			if (this.direction == 'vertical') {
				if (this.scrlEl.getTop() + this.scrlEl.getHeight() > this.mask.getTop() + this.mask.getHeight()) {
					__offset = Math.min(this.scrlEl.getTop() + this.scrlEl.getHeight() - this.mask.getTop() - this.mask.getHeight(), this.scrlStep);
					y = this.scrlEl.getTop() - __offset;
				}
			}
			else {
				if (this.scrlEl.getLeft() + this.scrlEl.getWidth() > this.mask.getWidth()) {
					__offset = Math.min(this.scrlEl.getLeft() + this.scrlEl.getWidth() - this.mask.getWidth(), this.scrlStep);
					x = this.scrlEl.getLeft() - __offset;
				}
			}
		}
		slideTo(this.scrlEl.id, x, y, this.duration);
	},

	bOnMouseover: function(e, direct) {
		this._pause = true;		
	},

	bOnMouseout: function() {
		this._pause = false;		
	},

	bOnClick: function(e, direct) {		
		var __offset;
		var x = this.scrlEl.getLeft();
		var y = this.scrlEl.getTop();
		//alert([x, y, direct]);
		//alert(this.scrlEl.getWidth());
		if (direct == 'up') {
			if (this.scrlEl.getTop() < 0) {
				__offset = Math.max(this.scrlEl.getTop(), -this.scrlStep);
				y = this.scrlEl.getTop() - __offset;
			}
		}
		else 
			if (direct == 'down') {
				if (this.scrlEl.getTop() + this.scrlEl.getHeight() > this.mask.getTop() + this.mask.getHeight()) {
					__offset = Math.min(this.scrlEl.getTop() + this.scrlEl.getHeight() - this.mask.getTop() - this.mask.getHeight(), this.scrlStep);
					y = this.scrlEl.getTop() - __offset;
				}
			}
			else 
				if (direct == 'left') {
					if (this.scrlEl.getLeft() <= 0) {
						__offset = Math.max(this.scrlEl.getLeft(), -this.scrlStep);
						x = this.scrlEl.getLeft() - __offset;
					}
				}
				else 
					if (direct == 'right') {
						//alert([this.scrlEl.getLeft(), this.scrlEl.getWidth(), this.mask.getWidth()]);
						if (this.scrlEl.getLeft() + this.scrlEl.getWidth() > this.mask.getWidth()) {
							__offset = Math.min(this.scrlEl.getLeft() + this.scrlEl.getWidth() - this.mask.getWidth(), this.scrlStep);
							x = this.scrlEl.getLeft() - __offset;
						}
					}
		//alert([this.scrlEl.id, x, y]);
		if (direct == 'left'||direct == 'right') {			
			if (x < 0) {				
				this.btnPrevious.className = "";							
			}else{
				this.btnPrevious.className = "disable";
				this.left_right = 'right';
			}		
			if (x + this.scrlEl.getWidth() > this.mask.getWidth()) {
				this.btnNext.className = "";
			}else{
				this.btnNext.className = "disable";
				this.left_right = 'left';
			}
		}
		slideTo(this.scrlEl.id, x, y, this.duration);
			
	},
		
	iOnClick: function(e, itemIndex) {
		/*if (typeof(this.parent.itemOnclick) != 'undefined') {
			this.parent.itemOnclick.apply(this, itemIndex);
		}
		if (typeof(this.itemOnclick) == 'function') {
			this.itemOnclick(itemIndex);
		}*/
	},
	
	gotoPage: function(pageIndex)
	{
		if (pageIndex != this.currentPage) {
			var x = this.scrlEl.getLeft();
			var y = this.scrlEl.getTop();
			var offset = (pageIndex - this.currentPage) * this.scrlStep;
			if (this.direction == 'vertical') {
				y -= offset;
			} else {
				x -= offset;
			}
			this.navPages[this.currentPage].removeClassName('current');
			slideTo(this.scrlEl.id, x, y, this.duration);
			this.currentPage = pageIndex;
			this.navPages[this.currentPage].addClassName('current');
		}
	},
	
	_menuItemOnClick: function(e, pageIndex)
	{
		this.gotoPage(pageIndex);
	}
};
// End ScrollList