/* Author: 
 * @author Matthew Doll
*/
(function($) {
    // The jQuery.aj namespace will automatically be created if it doesn't exist
    $.widget("cms.selectimage", {
        options: {
            delay: 250,
            "className": "",
            compact: false,
            maxImages: 1,
            count: 0
        },
        
        _loadOptions: function(){
            for (var i in this.options)
            {
                if(this.element.data(i) != undefined){
                    this.options[i] = this.element.data(i);
                }
            }
        },
        
        _create: function() {
            //<div class="cms-element-image" data-name="image" data-alt="" data-path="" data-thumbnail=""></div>
            this.element.addClass("ui-widget-content " + this.options.className);
            
            
            if(this.options.compact == true){
                this.options.maxImages = 1;
            }
            
            //this._loadOptions();
            
            var images = this.element.children();
            images.wrapAll('<div class="content-objects" />')
            
            
            //alert(images.length);
            for (var i = 0; i < images.length; i++)
            {
                // alert(images);
                //i.append('test');
                this.addImageContents($(images[i]));
            }
            
            this.button = $('<button class="content-gallery-button">');
            
            if(this.options.compact == true){
                this.button.append('Select Image');
                this.element.append(this.button);
            } else {
                this.element.append('<div class="content-gallery-footer">',this.button,'</button>');
            }
            this.button.bind("click.selectimage", $.proxy(this.selectImages,this));

            if(images.length == this.options.maxImages){
                this.hideSelect();
            }
        /*
            this.element
            .addClass("ui-widget-content " + this.options.className)
            .bind("mouseenter.selectimage mouseleave.selectimage", $.proxy(this, "_hover")); */
        /*
            this.filterInput = $("<input>", {
                type: "text"
            })
            .insertBefore(this.element)
            .bind("keyup.selectimage", $.proxy(this, "filter"))
            .wrap("<div class='ui-widget-header " + this.options.className + "'>");
            this.timeout = false;

            this._trigger("ready");*/

        },
        selectImages: function(){
            var options = this.element.data();
            //options.save = $.proxy(this.editImage,image);
            this.button.filemanager(options);
        },
         
        showSelect: function(){
            this.button.show();
        },
        hideSelect: function(){
            this.button.hide();
        },
        
        
        addImage: function(options){
            
            var img = $('<div>');//document.createElement('div');
            img.data(options);
            img = this.addImageContents(img); 
            this.element.append(img);
            
            if(this.element.find(".content-objects").children().length == this.options.maxImages){
                this.hideSelect();
            }
            
        },
        
        addImageContents: function(image){
            
            var name = image.data('name');
            if(this.options.compact == true){
                name += '['+this.options.count+']';
            }
            
            image.append('<img src="'+image.data('thumbnail')+'">'+
                '<input type="hidden" name="'+name+'[path]"  value="'+image.data('path')+'">'+
                '<input type="hidden" name="'+name+'[title]"   value="'+image.data('title')+'">'+
                '<input type="hidden" name="'+name+'[order]" value="'+image.data('order')+'">');
            var edit = $('<div class="ui-state-default ui-corner-all content-image-edit ui-button"  ><span class="ui-icon ui-icon-pencil"></span></div>');
            // edit.editimage(image.data());
            edit.bind("click.selectimage", $.proxy(this.editPrompt,this));
            var del = $('<div class="ui-state-default ui-corner-all content-image-delete ui-button"  ><span class="ui-icon ui-icon-closethick"></span></div>');
            del.bind("click.selectimage", $.proxy(this.deletePrompt,this));
            //  edit.append('');
            //  '<div class="ui-state-default ui-corner-all content-image-delete ui-button"><span class="ui-icon ui-icon-closethick"></span></div>');
            //  image.children('content-image-edit').click(this.editImage(image));// $.proxy(this, "editImage"));// //this.editImage(image)
            // image.children('content-image-delete').bind("click.selectimage", $.proxy(this.deleteImage()));
            image.append(edit,del);
            if(this.options.compact == true){
                image.append('<div class="content-image-alt">'+image.data('title')+'</div>'+
                    '<div class="content-image-properties">'+''+'</div>');
            }
            this.options.count++;
            return image;
        },
        
        editPrompt: function(evt){
            var image = $(evt.target).parent().parent();
            var options = image.data();
            options.save = $.proxy(this.editImage,image);
            image.editimage(options);
        },
        
        editImage: function(){
            this.find(".content-image-alt").html(this.data('title'));
        },
        
        
        deletePrompt: function(evt){
            var image = $(evt.target).parent().parent();
            image.prompt = $('<div>Are you sure you want to delete '+image.data('title')+'</div>').dialog({
                resizable: false,
                title: "Delete",
                modal: true,
                buttons: {
                    Delete: $.proxy(this.deleteImage,image)
                    ,
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        //image.remove();
        },
        
        deleteImage: function(){
            this.parent().parent().selectimage("showSelect");
            this.prompt.dialog( "close" );
            this.remove();
           
        },
        
        destroy: function() {
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);


(function($) {
    // The jQuery.aj namespace will automatically be created if it doesn't exist
    
    // var cmsEditImageDialog = undefined;
    
    $.widget("cms.editimage", {
        options: {
            width: 1000,
            height: 1000,
            owner: "Matthew Doll",
            date: "3/5/2006",
            path: false,
            preview: "/image.php",
            crop: false,
            title: "",
            source: "",
            sourceUrl: ""
        },
        
        
        
        _init: function() {
            if($.cmsEditImageDialog == undefined){
                $.cmsEditImageDialog = $('<div id="cms-image-editor"></div>'); 
                $.cmsEditImageDialog.dialog({
                    autoOpen: false,
                    resizable: false,
                    width:480,
                    height:550,
                    title: "Edit Image",
                    modal: true,
                    buttons: {
                        Save: $.proxy(this.saveImage,this),
                        Cancel: $.proxy(this.closeEditor,this)
                    }
                });
            }
       
            this.openEditor();
        },
        openEditor: function(){
            $.cmsEditImageDialog.dialog('option','title', "Edit "+this.options.path);
            $.cmsEditImageDialog.html('<img id="preview" src="'+this.options.preview+'" alt="Preview"/>\n\
  <fieldset><legend><span id="path">'+this.options.path+'</span> Properties</legend>\n\
<div class="properties">Width: <span id="width">'+this.options.width+'</span> Height: <span id="height">'+this.options.height+'</span> Uploaded By: <span id="owner">'+this.options.owner+'</span> <span id="date">'+this.options.date+'</span></div>\n\
<div><label for="title">Image Title:</label><input type="text" value="'+this.options.title+'" id="title"></div>\n\
<div><label for="source">Image Source:</label><input type="text" value="'+this.options.source+'" id="source"></div>\n\
<div><label for="sourceUrl">Source Url:</label><input type="text" value="'+this.options.sourceUrl+'" id="sourceUrl"></div>\n\
</fieldset>')
            // $.cmsEditImageDialog.setOption('image', this);
            $.cmsEditImageDialog.dialog("open");
        // alert('Open Editor');
        },
        saveImage: function(){
            
            this.element.data('title',$("input#title").val())
            this.element.data('source',$("input#source").val())
            this.element.data('sourceUrl',$("input#sourceUrl").val());
            
            if($.isFunction(this.options.save)){
                this.options.save();
            }
            
            this.closeEditor();
        },
        closeEditor: function(){
            $.cmsEditImageDialog.dialog("close");
        },
     
        destroy: function() {
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);

(function($) {
    // The jQuery.aj namespace will automatically be created if it doesn't exist
    $.widget("cms.filemanager", {
        options: {
            type: "image", //any|document
            max: 1,
            destination: undefined,
            folder:undefined,
            hash:undefined,
            
            indexes:[],
            
            managers: {
                upload: {
                    title: "Upload Files", 
                    button:"Upload", 
                    contents: function(){ return this._uploadContents() },//this._uploadContents()//"fsdfsfsfsdfsfs"//$.proxy(this._uploadContents,this),
                    load: function(){  return{};}
                },
                file:   {
                    title: "File Manager", 
                    button:"Select", 
                    contents:  function(){ },
                    load: function(){
                        $.getJSON(this.options.rest, {
                            element: "Image", 
                             method: "items", 
                             folder: this.options.folder, 
                               hash: this.options.hash
                        },
                        function(data){
                            alert('Data Loaded');
                        });
                    }
                },
                flickr: {
                    title: "Flickr",       
                    button:"Select", 
                    contents: function(){ }, 
                    load: function(){
                        return {};                    
                    }
                }
            }
    
    },
        
    _uploadContents: function(){
        alert('uploadContents');
        return "uploadsdfgdfgdg";
    },
        
    _filemanagerContents: function(){
        return "filemadlsfishdlfks";
    },
        
    _fileManagerLoad: function(){
        alert('load file manager');
        
    //return {};
    },
        
        
    _create: function() {
           
        var tabs ="";
        var body ="";
        
        
        
        for(var i in this.options.managers){
            tabs += '<li><a href="#tabs-'+i+'">'+this.options.managers[i].title+'</a></li>';
            body += '<div id="tabs-'+i+'">'+     this.options.managers[i].contents.call(this)+'</div>';
            this.options.indexes.push(i);
        }
        
        
        for(var i in this.options.managers){
            this.options.managers[i].load.call(this);
        }
        
        // this.options.managers.upload.contents();
        
        this.dialog = $('<div class="cms-filemanager"><ul>'+tabs+'</ul>'+body+'</div>'); 
        
        this.dialog.tabs({
            selected: 0,
            select: function(event, ui) {
                var obj = $(event.target).parent().parent();
                obj.css('border','solid red');
               // alert(this.options.type);
              alert(obj.options.indexes[ui.index]);
            }
        }); 
       
        
        //enable tabs
        /*$( ".selector" ).dialog( "option", "buttons", [
    {
        text: "Ok",
        click: function() { $(this).dialog("close"); }
    }
] );*/
             
             
        this.dialog.dialog({
            autoOpen: false,
            resizable: false,
            width:480,
            height:550,
            title: "File Manager",
            modal: true,
            buttons: {
                Select: function(){},
                Cancel: function(){}
            }
        });
        
        
        
    },
    _init: function() {
        this.dialog.dialog("open");
    },
    selectImages: function(){
        alert('Select Images');
    },
        
        
    saveImage: function(options){
            
    },
        
   
    destroy: function() {
        $.Widget.prototype.destroy.call(this);
    }
});
})(jQuery);