/**
 * Horizontal menu widget
 * Internal data model:
 * {
 *     title: 'Title:'
 *     items: [
 *         {
 *             name: 'Item1',
			   className: 'class1',
 *             event: 'onItem1Click',
 *         }, {
 *             ...
 *         }
 *      ],
 *      selectedIndex: 0,
 * }
 *
 * @author Mista K.
 */

(function () {
	/**
	 * Constructor
	 *
	 * @param  target  {DomNode}
	 * @param  model   {Object}
	 */
	ICFO.HorizMenu = function (target, model) {
		
		var self;
		var root;
		var data;
		var items;
        var domElement;

		/**
		 * onClick listener
		 */
		function chooseItem() {
			if (! $(this).hasClass("active")) {
				items.removeClass("active");
				$(this).addClass("active");
				
				var index = $.inArray(this, items);
				if (index >= 0) {
					self.notify(data.items[index].event, data.items[index].name);
				}
				
			}
		}

		function create(model) {
			
			var obj = ['<ul class="index">'];
			if (model.title !== undefined) {
				obj.push('<li class="title">', model.title, '</li>');
			}
			for (var i = 0; i < model.items.length; i++) {
				obj.push('<li', (model.items[i].className ? ' class="' + model.items[i].className + '"' : '')  ,'><span>', model.items[i].name, '</span></li>');
			}
			obj.push('</ul>');
			
            domElement = $(obj.join('')).appendTo(root);
			items = $("li:not(.title)", domElement);
			if (model.selectedIndex !== undefined) {
				$(items.get(model.selectedIndex)).addClass("active");
			}
			items.click(chooseItem);
		}
		
		self = this;
		root = target;
		data = model;

		create(model);
		
		new ICFO.Observable(this);
        
        /**
         * Return DOM Element of menu
         */
        this.getElement = function () {
            return domElement.get(0);
        };
	};
	
	ICFO.HorizMenu2 = function (target, model) {
		
		var self;
		var root;
		var data;
		var items;
        var domElement;

		/**
		 * onClick listener
		 */
		function chooseItem() {
			if (! $(this).hasClass("active")) {
				items.removeClass("active");
				$(this).addClass("active");
				
				var index = $.inArray(this, items);
				if (index >= 0) {
					self.notify(data.items[index].event, new Array(data.items[index].period, index));
				}
				
			}
		}

		function create(model) {
			
			var obj = ['<ul>'];
			if (model.title !== undefined) {
				obj.push('<li class="title">', model.title, '</li>');
			}
			for (var i = 0; i < model.items.length; i++) {
				obj.push('<li', (model.items[i].className ? ' class="' + model.items[i].className + '"' : '')  ,'><span>', model.items[i].name, '</span></li>');
			}
			obj.push('</ul>');
			
            domElement = $(obj.join('')).appendTo(root);
			items = $("li:not(.title)", domElement);
			if (model.selectedIndex !== undefined) {
				$(items.get(model.selectedIndex)).addClass("active");
			}
			items.click(chooseItem);
		}
		
		self = this;
		root = target;
		data = model;

		create(model);
		
		new ICFO.Observable(this);
        
        /**
         * Return DOM Element of menu
         */
        this.getElement = function () {
            return domElement.get(0);
        };
	};
	
	ICFO.HorizMenu3 = function (target, model) {
		
		var self;
		var root;
		var data;
		var items;
        var domElement;

		/**
		 * onClick listener
		 */
		function chooseItem() {
			if (! $(this).hasClass("active")) {
				items.removeClass("active");
				$(this).addClass("active");
				
				var index = $.inArray(this, items);
				if (index >= 0) {
					self.notify(data.items[index].event, data.items[index].type);
				}
				
			}
		}

		function create(model) {
			
			var obj = ['<ul>'];
			if (model.title !== undefined) {
				obj.push('<li class="title">', model.title, '</li>');
			}
			for (var i = 0; i < model.items.length; i++) {
				obj.push('<li', (model.items[i].className ? ' class="' + model.items[i].className + '"' : '')  ,'><span>', model.items[i].name, '</span></li>');
			}
			obj.push('</ul>');
			
            domElement = $(obj.join('')).appendTo(root);
			items = $("li:not(.title)", domElement);
			if (model.selectedIndex !== undefined) {
				$(items.get(model.selectedIndex)).addClass("active");
			}
			items.click(chooseItem);
		}
		
		self = this;
		root = target;
		data = model;

		create(model);
		
		new ICFO.Observable(this);
        
        /**
         * Return DOM Element of menu
         */
        this.getElement = function () {
            return domElement.get(0);
        };
	};
	
	ICFO.HorizMenu4 = function (target, model) {
		
		var self;
		var root;
		var data;
		var items;
        var domElement;

		/**
		 * onClick listener
		 */
		function chooseItem() {
			if (! $(this).hasClass("active")) {
				items.removeClass("active");
				$(this).addClass("active");
				
				var index = $.inArray(this, items);
				if (index >= 0) {
					self.notify(data.items[index].event, data.items[index].url != undefined ? data.items[index].url : data.items[index].alias);
				}
				
			}
		}

		function create(model) {
			
			var obj = ['<ul class="years">'];
			if (model.title !== undefined) {
				obj.push('<li class="title">', model.title, '</li>');
			}
			for (var i = 0; i < model.items.length; i++) {
				obj.push('<li id="year-', model.items[i].alias, '" ', (model.items[i].className ? ' class="' + model.items[i].className + '"' : '')  ,'><span>', model.items[i].name, '</span></li>');
			}
			obj.push('</ul>');
			
            domElement = $(obj.join('')).appendTo(root);
			items = $("li:not(.title)", domElement);
			if (model.selectedYear !== undefined) {
				$('#year-' + model.selectedYear).addClass("active");
			}
			items.click(chooseItem);
		}
		
		self = this;
		root = target;
		data = model;

		create(model);
		
		new ICFO.Observable(this);
        
        /**
         * Return DOM Element of menu
         */
        this.getElement = function () {
            return domElement.get(0);
        };
	};
	
	ICFO.HorizMenuEconShow = function (target, model) {
		
		var self;
		var root;
		var data;
		var items;
        var domElement;

		/**
		 * onClick listener
		 */
		function chooseItem() {
			if (! $(this).hasClass("active")) {
				items.removeClass("active");
				$(this).addClass("active");
				
				var index = $.inArray(this, items);
				if (index >= 0) {
					self.notify(data.items[index].event, data.items[index].type);
				}
				
			}
		}

		function create(model) {
			
			var obj = ['<ul class="index">'];
			if (model.title !== undefined) {
				obj.push('<li class="title">', model.title, '</li>');
			}
			for (var i = 0; i < model.items.length; i++) {
				obj.push('<li id="econ-show-', model.items[i].type, '"', (model.items[i].className ? ' class="' + model.items[i].className + '"' : '')  ,'><span>', model.items[i].name, '</span></li>');
			}
			obj.push('</ul>');
			
            domElement = $(obj.join('')).appendTo(root);
			items = $("li:not(.title)", domElement);
			if (model.selectedType !== undefined) {
				$('#econ-show-' + model.selectedType).addClass("active");
			}
			items.click(chooseItem);
		}
		
		self = this;
		root = target;
		data = model;

		create(model);
		
		new ICFO.Observable(this);
        
        /**
         * Return DOM Element of menu
         */
        this.getElement = function () {
            return domElement.get(0);
        };
	};
	
	
})();