Views.Tab = Views.Base.extend({
	classType: "Views.Tab",
    tagName: "div",
    
    listenEvents: function() {
    	//See Views.Base listenDefaultEvents()
    	this.on("onrender", this.onRender);
    },
	
	onRender: function() {
    	if (!this.options.checked) {
    		this.checkOptions();
    		this.options.checked = true;
    	}
    	
    	this.options.tabgroupview.addTab(this);
    	
		this.options.tabgroupview.$el.append($("#" + this.options.id).detach());
		
		this.options.tabgroupview.refresh();
	},

    checkOptions: function() {
    	var that = this;
    	
    	if (this.options.tabgroupid) {
    		this.options.tabgroupview = edManager.getViewByID(this.options.tabgroupid);
    	} else {
    		console.log("your tab must be in a tab group !");
    	}
    	
		if (!this.options.id) {
			this.options.id = Math.floor(Math.random()*5001);
		}

		if (!this.options.title) {
			this.options.title = "Titre non défini";
		}

    },
    
    removeTab: function(tabId) {
    	$("#tab_" + tabId, this.options.tabgroup.$el).remove();
    },

    addTab: function(tabId, tabTitle) {
		$("ul", this.options.tabgroup.$el).append("<li><a href='#" + tabId + "'>" + tabTitle + "</a></li>");
		var tabPanel = $("#" + tabId);
		if (!tabPanel.length == 0) {
			tabPanel = $("<div id='" + tabId + "' style='height:100%; width:100%'></div>");
		}
		this.options.tabgroup.$el.append(tabPanel);
    }
});

Views.TabList = Views.BaseList.extend({
	classType: "Views.TabList",
	
    listenEvents: function() {
    	//See Views.Base listenDefaultEvents()
    	this.on("oninitialize", this.onInitialize);
    	this.on("onrender", this.onRender);
    },
	
	onInitialize: function() {
		this.options.forbiddenemptychildviews = true;
	},
	
	onRender: function() {
		var that = this;
		this.$el.tabs({
			active: 0,
			beforeActivate: function(event, ui) {return that.activate(event, ui);},
			heightStyle: "content"
		});
	},
	
	refresh: function () {
		this.$el.tabs("refresh");
		this.$el.tabs("option", {active: 0});
	},
	
	addTab: function(tabView) {
		$("ul", this.$el).append('<li><a href="#' + tabView.options.id + '">' + tabView.options.title + '</a></li>');
	},
	
	removeTab: function(tabView) {
		this.options.viewsinlist.remove(tabView);
		this.render();
	},
	
    activate: function(event, ui) {
    	var oldPanelId = ui.oldPanel.attr("id");
    	
    	var notifier = edNotification().getNotifier();
    	
    	if (notifier) {
    		notifier.options.childviews.each(function (viewItem) {
	    		var aView = viewItem.get("view");
	    		//console.log(aView);
	    		if (aView.options.belongstotab) {
	    			if (aView.options.belongstotab == oldPanelId) {
	    				aView.options.dialogBox.dialog("widget").css('display', 'none');
	    			} else {
	    				//console.log(aView.options.dialogBox.dialog("widget"));
	    				aView.options.dialogBox.dialog("widget").css('display', '');
	    			}
	    		}
	    	});
    	}
    },

});