/*global jQuery */
(function($, fm) {

    $.fn.facetContainer = function(properties) {
        return this.each(function() {
            var facetContainer = $.extend({},fm.prototypes.facetContainer);
            facetContainer._selector = $(this);
            facetContainer.id = facetContainer.findWidget().attr("id");            

            facetContainer.findWidget()
            .sortable({
               connectWith: ['#build .facet-container'],			    
               distance: 10,
               handle: '.facet-header',
               items: '.facet'
            })
            .data("model", facetContainer)
            .addClass("ui-widget-content").addClass("facet-container")
            .append("<div class='create-facet-button button button-icon-left' title='Add a Facet'><span class='ui-icon ui-icon-plus'></span>Add a Facet</div>");

            facetContainer.findWidget()
            .find(".create-facet-button")
                .freemixPopupButton("Create a facet", function() {
                    return facetContainer.getPopupContent();
                },{style: {width: {min: 430}},
                    position: {target: $(".create-facet-button .ui-icon", facetContainer.findWidget())}});              
        });
    };
    
    fm.prototypes.facetContainer = $.extend(true,{}, fm.prototypes.container, {
        id: "",
        findWidget: function() {
            if (!this._selector) {
                this._selector = $(".facet-container#" + this.id, fm.getBuilder());  
            }
            return this._selector;
        },

        getConfigList: function() {
            var config = [];
            this.findWidget().find(".facet").each(function() {
                 var data = $(this).data("model");
                 config.push($.extend(true, {}, data.getConfig()));
            });
	        return config;
        },
        addFacet: function(facet) {                    
            facet.findWidget().appendTo(this.findWidget());
        },
        generateExhibitHTML: function() {
            var result = "";
             this.findWidget().find(".facet").each(function() {
                 result += $(this).data("model").generateExhibitHTML();
            });
            return result;
        },       
        getPopupContent: function() {
            var fc = this;
	        return $("<div class='chooser'></div>").freemixThumbnails(
	            fm.facet.types, fm.facet.prototypes, 
                function(facetTemplate) {
                    var facet = fm.facet.createFacet({type: facetTemplate.config.type, name: facetTemplate.label});
        		        facet.showEditor(fc);
     	        });  
	    },
        getPopupButton: function() {
            return this.findWidget().find(".create-facet-button");
        }
    });
    
    fm.prototypes.facet = $.extend(true, {}, fm.prototypes.widget, {
        findContainer: function() {
            return this.findWidget().parents(".facet-container");
        },
        generateWidget: function() {
            var facet = this;
            return $("<div class='facet ui-draggable' id='" +
                this.config.id + "'><div class='facet-header ui-state-default ui-helper-clearfix ui-dialog-titlebar' title='Click and drag to move to any other facet sidebar or to reorder facets'><span class='label'>" + this.config.name +
                "</span><span class='popup-button ui-icon ui-icon-triangle-1-s'/></div>" +
                "<div class='facet-content ui-widget-content'></div></div>")
            .data("model", this)                      
            .find(".popup-button").freemixPopupButton("Edit Facet", function() {
                return facet.getPopupContent();
            }).end()
            .find(".facet-content").append(this.generateContent()).end();
        },
        generateContent: function() {
            return $("<span>Type: <em>" + this.config.type + "</em></span>");
        },
        showEditor: function(facetContainer){
            facetContainer.hidePopup();
            facetContainer.addFacet(this);
        },
        generateExhibitHTML: function() {}
     });   
    
    
	fm.facet = {
	    createFacet: function(properties) {
            var props = $.extend({}, properties);
            if (!props.id) {
                props.id = $.uuid();
            }                    
            var facet = $.extend(true, {},fm.facet.prototypes[properties.type], {config: props});                    
            return facet;
        },
        types: [],
        prototypes: {},
        addFacetType: function(content) {
            var type = content.config.type;
            fm.facet.types.push(type);
            fm.facet.prototypes[type]= $.extend(true, {},fm.prototypes.facet,content);
        },
        getFacetContainer: function(id) {
          return $(".facet-container#" + id, fm.getBuilder()).data("model");
        }
    };
    
})(jQuery, jQuery.freemix);