/**
 * @requires Nico.messages
 */
var MylistVideoLinkListModel = Class.create();
MylistVideoLinkListModel.prototype = {
	user_id: null,
	mylistgroup_id: null,
	prev_items: [],
	next_items: [],
	current_items: [null, null, null],
	prev_id: null,
	next_id: null,
	num: 6,
	
	initialize: function (user_id, mylistgroup_id, prev_items, current_items, next_items, prev_id, next_id, num) {
		this.user_id = user_id;
		this.mylistgroup_id = mylistgroup_id;
		this.prev_items = prev_items;
		this.current_items = current_items;
		this.next_items = next_items;
		this.prev_id = prev_id ? prev_id : null;
		this.next_id = next_id ? next_id : null;
		this.num = num != null ? num : null;
	},
	
	shiftPrev: function (onSuccess, onFailure) {
		if (this.prev_items.length > 0) {
			this.shiftPrevItems();
			onSuccess();
		} else if (this.prev_id != null) {
			this.requestApi(this.prev_id, 'prev', function(result) {
				this.prev_items = result.items;
				this.prev_id = result.prev ? result.prev : null;
				this.shiftPrevItems();
				if (typeof onSuccess !== 'undefined') {
					onSuccess();
				}
			}.bind(this), onFailure);
		}
	},
	shiftNext: function (onSuccess, onFailure) {
		if (this.next_items.length > 0) {
			this.shiftNextItems();
			onSuccess();
		} else if (this.next_id != null) {
			this.requestApi(this.next_id, 'next', function(result) {
				this.next_items = result.items;
				this.next_id = result.next ? result.next : null;
				this.shiftNextItems();
				if (typeof onSuccess !== 'undefined') {
					onSuccess();
				}
			}.bind(this), onFailure);
		}
	},
	getCurrentItems: function () {
		return this.current_items;
	},
	isPrevExists: function () {
		if (this.prev_id != null || this.prev_items.length > 0) {
			return true;
		}
		return false;
	},
	isNextExists: function () {
		if (this.next_id != null || this.next_items.length > 0) {
			return true;
		}
		return false;
	},
	requestApi: function (watch_id, mode, onSuccess, onFailure) {
		new Ajax.Request("/api/mylistvideolinklist", {
			method: "get",
			parameters: "mylist=" + encodeURI(this.mylistgroup_id) + "&user=" + encodeURI(this.user_id)
				+ "&video=" + encodeURI(watch_id) + "&mode=" + encodeURI(mode) + "&num=" + encodeURI(this.num),
			onSuccess: function (obj) {
				var result = obj.responseText.evalJSON();
				if (result.status == "ok") {
					if (typeof onSuccess !== 'undefined') {
						onSuccess(result);
					}
				}
			}.bind(this),
			onFailure: function () {
				if (typeof onFailure !== 'undefined') {
					onFailure();
				}
			}
		});
	},
	shiftPrevItems: function () {
		var tmp = this.current_items.pop();
		if (tmp != null) {
			this.next_items.unshift(tmp);
		}
		this.current_items.unshift(this.prev_items.pop());
	},
	shiftNextItems: function () {
		var tmp = this.current_items.shift();
		if (tmp != null) {
			this.prev_items.push(tmp);
		}
		this.current_items.push(this.next_items.shift());
	}
}

var MylistVideoLinkListView = Class.create();
MylistVideoLinkListView.prototype = {
	initialize: function () {
		var obj = $('mylistlinklist');
		if (obj) {
			this.start(obj);
		}
	},
	start: function (obj) {
		var data = obj.getAttribute('data-mylist').evalJSON();
		this.model = new MylistVideoLinkListModel(
			data.user_id, data.mylist.id, data.prev_items, data.current_items, data.next_items, data.prev, data.next, 6
		);

		this.mylistgroup_name = data.mylist.name;
		this.setSubject(this.mylistgroup_name);

		this.onClickPrevHandle = this.onClickPrev.bind(this);
		if (this.model.isPrevExists()) {
			this.enablePrevCursor();
		}
		this.onClickNextHandle = this.onClickNext.bind(this);
		if (this.model.isNextExists()) {
			this.enableNextCursor();
		}
		
		Event.observe('mylistlinklist_prev', 'selectstart', this.eventCancel);
		Event.observe('mylistlinklist_next', 'selectstart', this.eventCancel);
		//this.bindEventToVideos();
	},
	update: function () {
		if (this.model.isPrevExists()) {
			this.enablePrevCursor();
		} else {
			this.disablePrevCursor();
		}
		if (this.model.isNextExists()) {
			this.enableNextCursor();
		} else {
			this.disableNextCursor();
		}
		var items = this.model.getCurrentItems();
		var item_containers = $$('.mylistlinklist_item');
		for (var i = 0; i < 3; i++) {
			if (items[i] != null) {
				Element.update(item_containers[i], 
					'<a href="/watch/' + items[i].watch_id.escapeHTML() + '">'
					+ '<img src="' + items[i].thumbnail_url.escapeHTML() +'" title="' + items[i].title.escapeHTML() + '" />'
					+ '</a>'
				);
			}
		}
		//this.bindEventToVideos();
	},
	bindEventToVideos: function() {
		var self = this;
		$$('#mylistlinklist_items img').each(function(obj){
			Event.observe(obj, 'mouseover', function(e){self.onMouseoverVideo(e);});
			Event.observe(obj, 'mouseout',  function(e){self.onMouseoutVideo(e);});
		});
	},
	onMouseoverVideo: function (evt) {
		if (evt.srcElement) {
			var title = evt.srcElement.getAttribute('data-title');
		} else {
			var title = evt.target.getAttribute('data-title');
		}
		if (title) {
			this.setSubject(title);
		}
	},
	onMouseoutVideo: function () {
		this.setSubject(this.mylistgroup_name);
	},
	onClickPrev: function () {
		this.disablePrevCursor();
		this.model.shiftPrev(function(){
			this.update()
		}.bind(this), function(){
		});
	},
	onClickNext: function () {
		this.disableNextCursor();
		this.model.shiftNext(function(){
			this.update()
		}.bind(this), function(){
		});
	},
	enablePrevCursor: function () {
		var obj = $('mylistlinklist_prev');
		if (!Element.hasClassName(obj, 'mylistlinklist_cursor_enable')) {
			Element.addClassName(obj, 'mylistlinklist_cursor_enable');
			Element.removeClassName(obj, 'mylistlinklist_cursor_disable');
			Event.observe(obj, 'click', this.onClickPrevHandle);
		}
	},
	disablePrevCursor: function () {
		var obj = $('mylistlinklist_prev');
		if (Element.hasClassName(obj, 'mylistlinklist_cursor_enable')) {
			Element.addClassName(obj, 'mylistlinklist_cursor_disable');
			Element.removeClassName(obj, 'mylistlinklist_cursor_enable');
			Event.stopObserving(obj, 'click', this.onClickPrevHandle);
		}
	},
	enableNextCursor: function () {
		var obj = $('mylistlinklist_next');
		if (!Element.hasClassName(obj, 'mylistlinklist_cursor_enable')) {
			Element.addClassName(obj, 'mylistlinklist_cursor_enable');
			Element.removeClassName(obj, 'mylistlinklist_cursor_disable');
			Event.observe(obj, 'click', this.onClickNextHandle);
		}
	},
	disableNextCursor: function () {
		var obj = $('mylistlinklist_next');
		if (Element.hasClassName(obj, 'mylistlinklist_cursor_enable')) {
			Element.addClassName(obj, 'mylistlinklist_cursor_disable');
			Element.removeClassName(obj, 'mylistlinklist_cursor_enable');
			Event.stopObserving(obj, 'click', this.onClickNextHandle);
		}
	},
	errorMessage: function (msg) {
		console.log(msg);
	},
	setSubject: function (str) {
		$('mylistlinklist_subject').innerHTML = str;
		if ($('mylistlinklist_subject').offsetWidth >= 240 || $('mylistlinklist_subject').offsetHeight >= 20) {
			for (var i=str.length-1; i>0; i--) {
				$('mylistlinklist_subject').innerHTML = str.substring(0, i) + Nico.messages.ellipsis;
				if ($('mylistlinklist_subject').offsetWidth < 240 && $('mylistlinklist_subject').offsetHeight < 20) {
					break;
				}
			}
		}
	},
	eventCancel: function (evt) {
		Event.stop(evt);
	}
}

Nico.onReady(function() {
	new MylistVideoLinkListView();
});
