/**
 * 左侧页面导航
 */
//当前选中的menuitem
indexCurrnt = 0;
option.menu = function() {
	this._menus = [];
    this._items = [];
	this.indexAdd = 0;
	this.menuWidth = 150;
};
option.menu.prototype = {
    /**
     * 加入一个菜单项
     */
    add_item: function(text, items) {
        var menu = $('<li><a href="#"></a></li>')
            .appendTo('#menu-box ul')
            // 将事件处理函数代理到类内部，并传递参数及生成的index
            .bind('click',proxy( this.menu_click, this,this._menus.length));
		var menuPic = 144 + this.indexAdd*33;
		$("#menu-box ul li").eq(this.indexAdd).css({backgroundPosition:"-302px -"+menuPic +"px"});
		var menuItem = $("#menu-box ul li").get(this.indexAdd);
		menuItem.indexPic = this.indexAdd;
		menuItem.onmouseover = function(){
			if (indexCurrnt == this.indexPic){
				return;
			}
			var menuPic = 144 + this.indexPic*33;
			this.style.backgroundPosition="-151px -"+menuPic +"px";
		}
		menuItem.onmouseout = function(){			
			if (indexCurrnt == this.indexPic){
				return;
			}
			var menuPic = 144 + this.indexPic*33;
			this.style.backgroundPosition="-302px -"+menuPic +"px";
		}
		//prompt("-342px -"+menuPic +"px");
        this._items.push(items);
        this._menus.push(menu);
		this.indexAdd++;
	},
    /**
     * 点击了某个菜单项
     */
    menu_click: function(e) {
        e.preventDefault();
        var index = e.args[0]; // 
		
        this.select(index);
    },
    /**
     * 将某个菜单项至为选中状态
     */
    select: function(index,fade) {
        indexCurrnt = index;
        for(var i=0;i<this._items.length;i++) {
            //this._menus[i].removeClass('current');
			var menuPic = 144+i*33;
			$("#menu-box ul li").eq(i).css({backgroundPosition:"-302px -"+menuPic+"px"});
        }
        //this._menus[index].addClass('current');
		var menuPic = 144+index*33;
		$("#menu-box ul li").eq(index).css({backgroundPosition:"-0px -"+menuPic+"px"});
        this._render( index ,fade);
        this._last_index = index;
    },
	//渲染当前页面
	_render_currnt_index:function(){
		this._render(this._last_index);
	},
    /**
     * 渲染指定的items
     */
    _render: function(index,fade) {        
        this._rendering = true;
        var target = $('#page-box');
        target.empty();
        if(fade) {
            target.css('opacity',0)
        }
        target.show();
        for(var i=0;i<this._items[index].length;i++) {
            this._items[index][i].init();
            this._items[index][i].render(target);
        }
		
        var that = this;
        if(fade) {
            var opacity = 0,interval = setInterval(function(i) {
                target.css('opacity', opacity+=0.2);
                if(opacity >= 1) {
                    clearInterval(interval);
                    that._rendering = false;
                }
            },10);
        }
        
        return true;
    }
};