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

(function () {
	/**
	 * Constructor
	 *
	 * @param  target  {DomNode}
	 * @param  model   {Object}
	 */
	TRAVEL.HorizMenu = function (target, model) {
		
		var self = this;
		var items, domElement, obj = [], i;

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

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

        /**
         * Select specified menu item. Userful for firing events after binding
         */
        this.selectItem = function (index) {
            var target = items.get(index);
            chooseItem.apply(target);
            return self;
        };


        /**
         * Create widget
         */
        obj.push('<ul class="unselectable menu">');
        if (model.title) {
            obj.push('<li class="title"><span unselectable="on">', model.title, '</span></li>');
        }
        if (model.items) {
            for (i = 0; i < model.items.length; i++) {
                obj.push('<li><span unselectable="on">', model.items[i].name, '</span></li>');
            }
        }
        obj.push('</ul>');

        domElement = $(obj.join('')).appendTo(target);
        items = $("li:not(.title)", domElement);
        if (model.selectedIndex !== undefined) {
            $(items.get(model.selectedIndex)).addClass("selected");
        }
        items.click(chooseItem);

        /**
         * Extend it by Observable interface
         */
        TRAVEL.Observable2(this);
    };
})();