/*global jQuery */
(function($, fm) {
    $.fn.viewContainer = function(properties) {        
        return this.each(function() {
			var viewContainer = $.extend({}, fm.prototypes.viewContainer);
		    viewContainer.id = $(this).attr("id");
		    
		    $(this).data("model", viewContainer)
		    .append("<ul class='view-set'></ul>")
			.append("<div class='view-content'></div>")
			.addClass("view-container")
                        
			.find(".view-set")
			    .sortable({
                    // axis: "x",
                    tolerance: "pointer",
			        distance: 10,
                    connectWith: ".view-container>ul",
                    cancel: "li.create-view, .bt-wrapper",
                    items: "li:not(.create-view)",
                    receive: function(event, ui) {
                        $(ui.item).data("model")._container = undefined;
                    }
 			    })
 			    .append("<li class='create-view ui-state-default'><div class='create-view-button button button-icon-left'><span class='ui-icon ui-icon-plus'></span><span class='label'>Add a View</span></div></li>")
 			    .find(".create-view-button")
                .freemixPopupButton("Create a View", function() {
                    return viewContainer.getPopupContent();
                },{style: {width: {min: 430}}});
        });
    };   
    fm.prototypes.viewContainer = $.extend(true, {}, fm.prototypes.container,{
        id: "",
        findWidget: function() {
            return $(".view-container#" + this.id, fm.getBuilder());  
        },
		getContent: function() {
		    return $(".view-content", this.findWidget());
		},
        generateExhibitHTML: function() {
	        var viewPanel = $("<div class='view-panel' ex:role='viewPanel'></div>");
	        $("ul.view-set>li", this.findWidget()).each(function() {
	            // TODO: the new view icon should be moved out of the list
	            if (!$(this).hasClass("create-view")) {
	                var view = $(this).data("model");
	                viewPanel.append(view.generateExhibitHTML());
                }
	        });
	        return viewPanel;
        },
        getConfigList: function() {
            var config = [];
	        $("ul.view-set>li", this.findWidget()).each(function() {
	            if (!$(this).hasClass("create-view")) {
	                var view = $(this).data("model");
	                config.push($.extend(true, {}, view.getConfig()));
                }
	        });
	        return config;
        },                
        addView: function(view) {
            $('.view-set li.create-view', this.findWidget()).before(view.findWidget());
		    view.select();
        },
        getSelected: function() {
            return this.findWidget().find(".view-set>li.ui-state-active");
        },
        getPopupContent: function() {
            var fc = this;
	        return $("<div class='chooser'></div>")
                .freemixThumbnails(fm.view.types, fm.view.prototypes, function(viewTemplate) {
                    var view = fm.view.createView({type: viewTemplate.config.type, name: viewTemplate.label});
        		    view.showEditor(fc);
     	        });  
	    },
        getPopupButton: function() {
            return this.findWidget().find(".create-view-button");
        }
    });
    
    fm.prototypes.view = $.extend(true, {}, $.freemix.prototypes.widget, {
        getContainer: function() {
            if (!this._container) {
                this._container = this.findWidget().parents(".view-container");
            }
            return this._container;
        },
        getContent: function() {
            return this.getContainer().data("model").getContent();
        },
        generateWidget: function() {
             var view = this;
             var widget =  $("<li id='" + view.config.id + 
                            "' class='view button button-icon-left ui-state-default'><span class='popup-button ui-icon ui-icon-triangle-1-s'/><span class='label'>" + 
                            view.config.name + "</span></li>")
                .data("model", view)
                .hover(function() {$(this).addClass('ui-state-hover');}, function() {$(this).removeClass('ui-state-hover');})	
                .click(function() {
        			if (!$(this).hasClass("ui-state-active")) {
                        $(this).data("model").select();
    			    }
    			    return false;
			    });
			widget.find(".popup-button").hide();
		    widget.find("span.popup-button").freemixPopupButton("Edit View", function() {
		        return view.getPopupContent();
		    });
                
            return widget;
        },
        select: function() {
            var control = this.findWidget();
            $(".view-set>li.view", this.getContainer()).removeClass("ui-state-active")
            .find(".popup-button").hide();
                
		    control.addClass("ui-state-active");
		    control.find('.popup-button').show();
            this.display();
        },
        remove: function() {
            var container = this.getContainer();
            this.findWidget().remove();
            var next = container.find(".view-set>li.button:first");
            if (next.size() > 0) {
                next.data("model").select();
            } else {
                container.find(".view-content").empty();
            }
        },	        
        display: function() {},
        generateExhibitHTML: function() {},
        showEditor: function(vc) {
            vc.hidePopup();
            vc.addView(this);
        }
         
     });
    
    fm.view = {
        types: [],
        addViewType: function(content) {
            var type = content.config.type;
            fm.view.types.push(type);
            fm.view.prototypes[type]= $.extend(true, {},fm.prototypes.view,content);
        },
        prototypes: {},
        createView: function(properties) {
             var props = $.extend({}, properties);
             if (!props.id) {
                 props.id = $.uuid();
             }                    
             var view = $.extend(true, {}, fm.view.prototypes[props.type], {"config": props});                    

             return view;                   
         },
        getViewContainer: function(id) {
            return $(".view-container#" + id, fm.getBuilder()).data("model");
        }
     };       
})(jQuery, jQuery.freemix);