/** jQuery Plugin for edit in place
 *
 */
(function($){
    var methods = {
        init : function(options){
            var settings = {
                'editType' : 'text',
                'successCallback' : null,
                'cancelCallback' : null,
                'options' : [],
                language : '',
                'activateEvent' : 'dblclick'
            };
            settings = $.extend(settings, options || {});

            return this.each(function(){
                //bind the events
                var jel_element = $(this);
                jel_element.addClass('mmi_editInPlace');
                jel_element.data('editInPlace', settings);
                jel_element.bind(settings.activateEvent, methods.editInPlace);
                //rollover
                jel_element.bind('mouseover', methods.mouseover);
                jel_element.bind('mouseout', methods.mouseout);
            });
        },
        destroy : function(){

        },
        getTranslation : function(jel_element, settings) {
            if(settings.language == 'eng' || settings.language == '' || settings.language == 'en' || ! settings.language){
                return '';
            }
            //Translate it
            jel_rawContainer = jQuery('#'+jel_element.attr('id')+'_data .untranslatedValue');
            var textValue = jQuery.trim(jel_rawContainer.html());
            if(textValue == ''){
                return '';
            }
            // Chop it all up
            var replacements = [];
            var textPieces = [];
            var tagGroupings = textValue.split('<');
            var translateText = '';
            for(var tagNum=0;tagNum<tagGroupings.length;tagNum++){
                //we have the start of each tag, but check the first.
                var node = tagGroupings[tagNum];
                translateText = '';
                if(tagNum == 0 && textValue.substring(0, 1) != '<'){
                    //first one is text
                    textPieces[textPieces.length] = node;
                    translateText = node;
                }else{
                    //this is a part of a tag so use it as such
                    var tagPieces = node.split('>');
                    var tag = tagPieces.shift();
                    translateText = tagPieces.join('>');
                    if(jQuery.trim(tag) != ''){
                        var spacer = '';
                        if(translateText.substring(0,1) == ' ' ){
                            spacer = ' ';
                        }
                        textPieces[textPieces.length] = ' <'+tag+'> '+spacer;
                    }

                    textPieces[textPieces.length] = translateText;

                }
                //check the text
                if(jQuery.trim(translateText) != ''){
                    //we need to translate it
                    replacements[replacements.length] = textPieces.length-1;
                    if(textPieces[textPieces.length-1].substr(-1)==' '){
                        textPieces[textPieces.length] = ' ' ;
                    }
                    //to do - split if too big
                }
            }
            //store replacements and text
            jel_element.data('translationProgress', {replacements : replacements, parts : textPieces});

            //get the language
            lang = settings.language.substr(0,2);
            switch(lang){
                case 'sp' :
                    lang = 'es';
                break;
            }

            if(replacements.length > 0){
                jQuery.each(replacements, function(i, replacement){
                    var replacementNum = replacement;
                    var translateData = {text : textPieces[replacementNum], type : 'html'};
                    google.language.translate(translateData, 'en', lang, MMI.Util.bind(methods.handleTranslationCallback, this, [jel_element, replacementNum]));

                }) ;


            }
        },
        handleTranslationCallback : function(jel_element, replacementNum, result){
            var currentData = jel_element.data('translationProgress');
            if(!result.error){
                currentData.parts[replacementNum] = result.translation;
            }
            currentData.replacements.splice(jQuery.inArray(replacementNum, currentData.replacements), 1);
            //re-store it
            jel_element.data('translationProgress', currentData);
            if(currentData.replacements.length == 0){
                var fieldId = jel_element.attr('id')+'_input';
                var translated = jQuery('#'+fieldId);
                var updatedText = currentData.parts.join('');
                if(translated[0].tagName.toLowerCase() == 'textarea' && typeof(translated.tinymce) == 'function' && typeof(tinyMCE) == 'function') {
                    translated.tinymce().execCommand('mceSetContent', false, updatedText);
                }else{
                    translated.val(result.translation);
                }
            }
        },
        htmlEventCallback : function(e){
            parts = e.editorContainer.split('_');
            parts.pop();
            parts.pop();
            var nm = '#'+parts.join('_');
            var el = jQuery(nm);
            el.editInPlace('getTranslation', el,  el.data('editInPlace'));
        },
        editInPlace: function(event){
            jel_element = jQuery(this);
            var jel_input = '';
            var option, selected;
            var settings = jel_element.data('editInPlace');
            jel_storageContainer = jQuery('#'+jel_element.attr('id')+'_data .rawValue');

            switch (settings.editType){
                case 'textarea' :
                    jel_input = jQuery('<textarea id="'+jel_element.attr('id')+'_input"></textarea>');
                    jel_input.val(jel_storageContainer.html());
                    if(! settings.hastranslation){
                        methods.getTranslation(jel_element, settings);
                    }
                    break;
                case 'checkbox' :
                    jel_input = jQuery('<input type="checkbox" id="'+jel_element.attr('id')+'_input"/>');
                    //actual value
                    // @mmi-log MMI.log(jel_storageContainer.html());
                    if(jel_storageContainer.html() == '1'){
                        // @mmi-log MMI.log('should be checked');
                        jel_input.attr('checked','checked');
                    }

                    break;
                case 'checkboxgroup' :
                    jel_input = jQuery('<ol class="input_checkboxgroup"></ol>');
                    var currentItems = jel_storageContainer.text().split(':::');
                    for(i in settings.options){
                        option = settings.options[i];
                        selected = '';
                        var jel_li = jQuery('<li class="checkboxgroup_item_input"><input type="checkbox" id="'+jel_element.attr('id')+'['+i+']_input"/> '+option+'</li>');
                        jel_li.appendTo(jel_input);
                        if(jQuery.inArray(option, currentItems) > -1){
                            jel_li.find('input').attr('checked', 'checked');
                        }
                    }
                    //requires a complete button

                    break;
                case 'option' :
                case 'select' :
                    var multiple = '';
                    if(settings.multiAnswer){
                        multiple = ' MULTIPLE'
                    }
                    jel_input = jQuery('<select id="'+jel_element.attr('id')+'_input"'+multiple+'></select>');
                    //add options
                    var jel_rawValue = jQuery('#'+jel_element.attr('id')+'_data .rawValue');
                    for(i in settings.options){
                        option = settings.options[i];
                        selected = '';
                        if(settings.multiAnswer){
                            var chosen = jel_rawValue.html().split(':::');

                            if(jQuery.inArray(i, chosen) > -1 && i != ''){
                                selected = ' selected';
                            }
                        }else{
                            if(option == jel_element.html() || i.toString() == jel_element.html()){
                                selected = ' selected';
                            }
                        }
                        if(typeof(i) == 'string'){
                            jel_input.append('<option value="'+i+'" '+selected+'>'+option+'</option>');
                        }else{

                            jel_input.append('<option value="'+option+'" '+selected+'>'+option+'</option>');
                        }
                    }

                    break;
                case 'date' :
                    jel_input = jQuery('<input type="text" id="'+jel_element.attr('id')+'_input"/>');
                    // get the text value
                    jel_input.val(jel_element.html());

                    // raw value field
                    var jel_rawField = jQuery('<input type="hidden" id="'+jel_element.attr('id')+'_input_raw"/>');
                    jel_rawField.val(jel_storageContainer.html());
                    var storedDate = new Date(jel_rawField.val() * 1000);
                    // activate the display field
                    var date_options = {
                        onClose : methods.unEditInPlace
                    };
                    jel_input.datepicker(date_options);
                    jel_input.datepicker('setDate', storedDate);
                    break;
                case 'datetime':
                    jel_input = jQuery('<input type="text" id="'+jel_element.attr('id')+'_input"/>');
                    // get the text value
                    jel_input.val(jel_element.html());

                    // raw value field
                    var jel_rawField = jQuery('<input type="hidden" id="'+jel_element.attr('id')+'_input_raw"/>');
                    jel_rawField.val(jel_storageContainer.html());
                    var storedDate = new Date(jel_rawField.val() * 1000);
                    // activate the display field
                    var date_options = {
                        ampm: true,
                        timeFormat: 'hh:mm TT'
                        ,onClose : methods.unEditInPlace
                    };
                    jel_input.datetimepicker(date_options);
                    jel_input.datetimepicker('setTime', storedDate);
                    jel_input.datetimepicker('setDate', storedDate);
                    break;
                case 'html' :
                    jel_input = jQuery('<textarea id="'+jel_element.attr('id')+'_input"></textarea>');
                    jel_input.val(jel_element.html());
                    jel_input
                        .width(jel_element.width())
                        .height(jel_element.height());
                    settings = jel_element.data('editInPlace');
                    var tinymceSettings = {
                        script_url : '/javascripts/jquery-plugins/jquery.tinymce/tiny_mce.js',
                        forced_root_block : false,
                        mode : "none",
                        theme : "advanced",
                        skin : "o2k7",
                        convert_urls : false,
                        relative_urls : true,
                        nonbreaking_force_tab : true,
                        auto_cleanup_word : true,
                        valid_elements : "*[*]",
                        theme_advanced_toolbar_location : "external",
                        theme_advanced_toolbar_target : "",
                        theme_advanced_toolbar_align : "left",
                        theme_advanced_statusbar_location : "bottom",
                        theme_advanced_resizing : true,
                        theme_advanced_resizing_use_cookie : false,
                        execcommand_callback : MMI.Editable.htmlEditorSaved,
                        setup : function(ed){
                            ed.onInit.add(methods.htmlEventCallback);
                        },
                        plugins: "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
                        theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,cancel",
                        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,insertimage,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak"

                    };
                    if(typeof(kfm_for_tiny_mce) != 'undefined'){
                        tinymceSettings['file_browser_callback'] = kfm_for_tiny_mce;
                    }

                    tinymceSettings = jQuery.extend(tinymceSettings, settings.tinymceSettings || {});
                    jel_element.parent().append(jel_input);
                    jel_input.css({ 'visibility' : 'hidden' });
                    jel_input.tinymce(tinymceSettings);


                    break;
                case 'file' :
                    //nothing
                    return;
                    break;
                default :
                    jel_input = jQuery('<input type="text" id="'+jel_element.attr('id')+'_input"/>');
                    jel_input.val(jel_storageContainer.html());
                    jel_element.parent().append(jel_input);
                    if(! settings.hastranslation){
                        methods.getTranslation(jel_element, settings);
                    }
                    break;
            }


            if(settings.editType == 'html'){
                jel_input.bind('mmiEditInPlaceHtmlChanged', methods.unEditInPlace);
                jel_input.bind('mmiEditInPlaceHtmlCanceled', methods.cancelEditInPlace);

            }else if(settings.editType == 'date' || settings.editType == 'datetime'){
                jel_element.parent().append(jel_input);
                jel_element.parent().append(jel_rawField);
                jel_input
                    .width(jel_element.width())
                    .height(jel_element.height())
                    .focus();
                //bind to close event for cal
            }else if(settings.editType == 'checkbox'){
                jel_element.parent().append(jel_input);
                jel_input
                    .focus();

                jel_input.bind('blur', methods.unEditInPlace);
                jel_input.bind('change', methods.unEditInPlace);
            }else if(settings.editType == 'checkboxgroup'){
                jel_element.parent().append(jel_input);
                var jel_save = jQuery('<div>Save Changes</div>');
                jel_save.bind('click', MMI.Util.bind(methods.unEditInPlace, jel_input)).button();
                jel_input.append(jel_save);
                //jel_input.bind('change', methods.unEditInPlace);
            }else if(settings.editType == 'text'){

                jel_input
                    .width(jel_element.width())
                    .height(jel_element.height())
                    .focus();

                jel_input.bind('blur', methods.unEditInPlace);
                jel_input.bind('change', methods.unEditInPlace);
            }else if(settings.multiAnswer){
                jel_element.parent().append(jel_input);
                jel_input
                        .width(jel_element.width())
                        .height(100)
                        .focus();
                jel_input.bind('blur', methods.unEditInPlace);

            }else{
                jel_element.parent().append(jel_input);
                jel_input
                    .width(jel_element.width())
                    .height(jel_element.height())
                    .focus();

                jel_input.bind('blur', methods.unEditInPlace);
                jel_input.bind('change', methods.unEditInPlace);
            }
            jel_input.bind('keypress', methods.checkTab);
            jel_element.hide();

        },
        checkTab:function(event){
            if(event.keyCode == 9 || event.keyCode == 13){
                //Tabbed out
                var jel_input = jQuery(this);
                var jel_element = jel_input.siblings('.mmi_editInPlace');
                var jel_all = jQuery('.mmi_editInPlace');
                var found = false;
                jel_all.each(function(){
                    var jel_check = jQuery(this);
                    if(jel_check.attr('id') == jel_element.attr('id')){
                        found = true;
                    }else if(found){
                        var settings = jel_element.data('editInPlace');
                        jel_check.trigger(settings.activateEvent).trigger(settings.activateEvent);
                        // Cause IE refuses to use standards we have to trap the key press
                        return false;
                    }
                });
                //return false;
            }
        },
        unEditInPlace:function(event){
            var jel_input = jQuery(this);

            jel_input.unbind('change');
            jel_input.unbind('blur');
            jel_input.unbind('mmiEditInPlaceHtmlChanged');
            jel_input.unbind('mmiEditInPlaceHtmlCanceled');
            var jel_element = jel_input.siblings('.mmi_editInPlace');
            jel_element.show();
            var jel_rawValue = jQuery('#'+jel_element.attr('id')+'_data .rawValue');
            var oldText = jel_element.html();
            var newText;
            var newValue = jel_input.val();
            var settings = jel_element.data('editInPlace');

            switch (settings.editType){
                case 'option':
                case 'select' :
                case 'radio' :
                    if(settings.multiAnswer){
                        newText = '';
                        jQuery.each(newValue, function(i, v){
                            if(newText != ''){
                                newText += ', ';
                            }
                            newText += settings.options[v];
                        });
                        newValue = ':::' + newValue.join(':::') + ':::';
                    }else{
                        newText = settings.options[newValue];
                    }
                    break;
                case 'checkbox' :
                    //check the value
                    newValue = false;
                    if(jel_input.attr('checked')){
                        newValue = true;
                    }
                    newText = (newValue ? 'Yes':'No');
                    break;
                case 'checkboxgroup' :
                    var jel_inputs = jel_input.find('input');
                    newValue = '';
                    newText = '';
                    jel_inputs.each(function(){
                        var jel_currentInput = jQuery(this);
                        if(jel_currentInput.attr('checked')){

                            var storeValue = jel_currentInput.attr('id').split(']').shift().split('[').pop();
                            newValue = newValue + ':::' + storeValue;
                            if(newText != ''){
                                newText = newText + ', ';
                            }
                            newText = newText + jel_currentInput.parent().text();
                        }
                    });
                    newValue = newValue + ':::';
                    break;
                case 'date':
                    newText = newValue;
                    newValue = (jel_input.datepicker('getDate').getTime()) / 1000;
                    break;
                case 'datetime':
                    newText = newValue;
                    newValue = (jel_input.datetimepicker('getDate').getTime()) / 1000;
                    break;
                default :
                    newText = newValue;
                    break;
            }

            jel_element.html(newText);
            jel_rawValue.html(newValue); // Change the raw value before triggering any events on the field
            jel_element.trigger('mmi_editable_change');

            // Trigger inlinechange on first parent div with live_inlineChange event
            jel_input.parents('.live_inlinechange').trigger('inlinechange');

            //remove it
            jel_input.remove();
            //callback
            if(oldText != newText){
                var successCallback = jel_element.data('editInPlace').successCallback;
                if(successCallback != null){
                    successCallback.apply(this, [jel_element, newValue, newText, oldText]);
                }
                //mark it as "dirty"
                jel_element.addClass('mmi_editInPlace_dirty');
                //store the real deal value
                var jel_storageContainer = jQuery('#'+jel_element.attr('id')+'_data .rawValue');
                if(jel_storageContainer.size() > 0){
                    jel_storageContainer.html(newValue);
                }
            }

        },
        cancelEditInPlace:function(){
          //just revert it back
            jel_input = jQuery(this);
            jel_input.unbind('change');
            jel_element = jel_input.siblings('.mmi_editInPlace');
            jel_element.show();
            jel_input.remove();

        },
        cleanField: function(){
            //cleans the field and removes the mmi_editInPlace_dirty class
            var jel_element = jQuery(this);
            jel_element.removeClass('mmi_editInPlace_dirty');
            var settings = jel_element.data('editInPlace');
            if(settings && typeof(settings.updateCallback) == 'function') {
                settings.updateCallback.apply(this, [jel_element]);
            }
        },
        mouseover:function(){
            jQuery(this).addClass('mmi_editInPlace_over');
        },
        mouseout:function(){
            jQuery(this).removeClass('mmi_editInPlace_over');
        }

    };

    $.fn.editInPlace = function(method){
        if ( methods[method] ) {
          return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
          return methods.init.apply( this, arguments );
        } else {
          $.error( 'Method ' +  method + ' does not exist on jQuery.editInPlace' );
        }
    }
})( jQuery );

/* Item Save Callback
*/
MMI.Util.ns('MMI.Editable');
MMI.Editable = {
    width : 900,
    height:500,
    itemInPlaceEditCallback: function(element, newValue, newText, oldText){
        var jel_element = jQuery(element);
        var settings = jel_element.data('editInPlace');
        var formData = settings['formData'];
        MMI.Editable.saveItemData(formData.itemId, formData.fieldName, newValue, jel_element, function(){
            jel_element.editInPlace('cleanField');
        })
    },
    itemInPlaceEditFileCallback: function(element, parent_id, type){
        //make a form
        jel = jQuery(element);
        jel_parent = jel.parent();
        if(jel.val() == ''){
            return;
        }
        //check the extensions

        jel_parent.triggerHandler('uploadStarted');

        //go for it
        parts = jel.attr('id').split('_');
        parts.shift(); //remove the item_
        var id = parts.shift();
        parts.pop(); //remove the _input

        var fieldName = parts.join('_');

        var newDate = new Date();
        var uploadForm = jQuery('<form id="mmi_advupload_tmpform_' + newDate.getTime() + '" style="display: none;" action="/index.php" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="upload" /><input type="hidden" name="attitude" value="overlay" /><input type="hidden" name="external_id" value="'+newDate.getTime()+'" /></form>');
        var newName = 'upload[' + id + ']['+fieldName+']';
        jel.attr('name', newName);

        uploadForm.append(jel);

        jQuery('body').append(uploadForm);
        var ajamInstanceId = MMI.Util.Ajax.submitBasic(uploadForm, {}, MMI.Editable._handleItemInPlaceFileUpload, [jel, jel_parent, 'item[' + id + ']['+fieldName+']', uploadForm, id, parent_id, type]);

    },
    _handleItemInPlaceFileUpload: function(response, jel, jel_parent, fieldName, jelForm, id, parent_id, type){
        //we had a file come over, post the form
        jelForm.remove();
        //put it back
        jel_parent.append(jel);
        jel.bind('change', function(){
             MMI.Editable.itemInPlaceEditFileCallback(jQuery(this));
        });
        //Post
        data = {id : id, mode : 'edit', attitude : 'json', view : 'blank'};
        data[fieldName] = 1;
        if(parent_id){
            data['item['+id+'][item_parent]']=parent_id;
        }
        if(type){
            data['type']=type;
        }
        MMI.Util.Ajax.request(
                {
                    'url': '/index.php'
                    ,'method': 'post'
                    ,'async': true
                    ,'json': true
                    ,'data': data
                } ,function() {} ,function(response) {
                    jel_parent.triggerHandler('uploadComplete', [response]);
                } ,function() {} ,function() {}
            );

    },
    saveItemData: function(itemId, fieldName, fieldValue, targetElement, callback){
       var settings = targetElement.data('editInPlace');
       var options = { 'url' : '/index.php', 'method' : 'post' };
       var data = {
           'mode' : 'edit',
           'attitude' : 'json',
           'view' : 'blank',
           'id' : itemId
       };
       //Check translated
       if(!settings.isTranslatable || (settings.language == '' || settings.language == 'eng')){
           data['item['+itemId+']['+fieldName+']'] = fieldValue;
       }else{
            data['translation['+itemId+'][default]['+settings.language+']['+fieldName+']'] = fieldValue;
       }
       options['data'] = data;
       targetElement = jQuery(targetElement);
       // @mmi-log MMI.log(data);
       MMI.Util.Ajax.basic(options, function(a, b){
           jQuery(this).editInPlace('cleanField');
       }, '', jQuery(targetElement))

   },
    htmlEditorSaved:function(editor_id, elm, command, user_interface, value){
        MMI.log('Command'+command);
        switch(command){
            case 'mceCancel' :
                //put it back
                var jel_input = jQuery('#' + editor_id);
                var editor = jel_input.tinymce();
                editor.remove();
                editor.destroy();
                jel_input.trigger('mmiEditInPlaceHtmlCanceled');
                return true;
                break;
            case 'mceSave' :
                var jel_input = jQuery('#' + editor_id);
                //clean it up

                var editor = jel_input.tinymce();
                var content=editor.getContent();
                jel_input.val(content);
                editor.remove();
                editor.destroy();
                jel_input.trigger('mmiEditInPlaceHtmlChanged');
                return true;
                break;
            default :
                return false;
        }
    },
    makeEditOptionsButton:function(itemId){
        //in case its already here, remove it
        jQuery('#editOptionsButton').remove();
        //Make new
        jel_button = jQuery('<div class="mmi_editOptionsButton" id="editOptionsButton">Page Options</div>');
        jQuery('body').append(jel_button);
        jel_button.button({
            icons : {
                primary : 'ui-icon-pencil'
            }
        });
        jel_button.removeClass('ui-corner-all ui-corner-bottom');
        jel_button.addClass('ui-corner-tl');
        jel_button.data('itemId', itemId);
        jel_button.click(function(){
           MMI.Editable.openEditOptionsDialog(jQuery(this).data('itemId'));
        });
    },
    /* More advanced version of the edit options button. This one is a stack of options that can be changed as needed */
    makeEditPopupMenu:function(menuTitle, options){
        //in case its already here, remove it
        jQuery('#editOptionsButton').remove();
        var jel_menu = jQuery('<div class="mmi_editOptionsButton mmi_editOptionsMenu" id="editOptionsButton"></div>');

        jQuery('body').append(jel_menu);
        //add the trigger button to the top
        var jel_button = jQuery('<div id="editOptionsButtonToggle" class="editOptionButtonItem">'+menuTitle+'</div>')
            .appendTo(jel_menu)
            .button({
                 icons : {
                    primary : 'ui-icon-circle-triangle-n'
                 }
            })
            .bind('click', this.toggleEditPopupMenu)
            .data('open', false);
        //Each piece
        var jel_groups = jQuery('<div id="editMenuGroups"></div>').appendTo(jel_menu);
        for(var i in options){
            var option = options[i];
            var group = (option.group ? option.group : 'Options');
            var gName = 'group_' + group.replace(' ', '_');
            var groupName = (option.groupName ? option.groupName : group);
            //make the group
            var jel_group = jel_menu.find('#group_' + group);
            if(jel_group.size() == 0){
                jel_group = jQuery('<h3><a href="#">'+groupName+'</a></h3><div class="groupContent" id="'+gName+'"></div>');
                jel_groups.append(jel_group);
            }
            var jel_group_content = jel_groups.find('#'+gName);
            var icon = (option.icon ? option.icon : '');
            jel_group_content.append(jQuery('<div style="clear:both;"></div>'));

            jQuery('<div class="editOptionButtonItem"><span class="mmi_editMenu_icon ui-icon '+option.icon+'"></span>'+option.name+'</div>')
                .appendTo(jel_group_content)
                .data('buttonData', option.data)
                .bind('click', option.handler)
                .bind('click', function(){ jQuery('#editOptionsButtonToggle').click(); });
        }
        jel_groups.accordion();
        jel_button.removeClass('ui-corner-all ui-corner-bottom');
        jel_button.addClass('ui-corner-tl');
        //set it to the top
        jel_menu.css('bottom', -(jel_menu.outerHeight() - jel_button.outerHeight()));
    },
    toggleEditPopupMenu:function(){
        //get the toggle
        var jel_button = jQuery(this);
        jel_menu = jQuery('#editOptionsButton');
        //check the state
        var open = ! jel_button.data('open');
        //icon swap
        if(open){
            jel_button.button('option', 'icons', { primary : 'ui-icon-circle-triangle-s' });
        jel_menu.css('bottom', 0);

        }else{
            jel_button.button('option', 'icons', { primary : 'ui-icon-circle-triangle-n' });
        jel_menu.css('bottom', -(jel_menu.outerHeight() - jel_button.outerHeight()));
        }
        jel_button.data('open', open);
    },
    /* If there were a set of options passed to either edit or create options dialog then this would use that functionality instead */
    cloneThenEditOptionsDialog: function(itemToCloneId, parentItemId, deleteButton, options) {
        var defaultOptions = {
            callback: false,
            newName: false,
            newSeoName: false
        };
        options = jQuery.extend(defaultOptions, options);
        var data = {
            mode: 'clone',
            confirm_clone: 1,
            id: itemToCloneId,
            clone_deep: 1
        };
        if(isNaN(parentItemId)) {
            parentItemId = 0;
        }
        data['item['+itemToCloneId+'][item_parent]'] = parentItemId;
        if(options.newName !== false) {
            data['item['+itemToCloneId+'][item_name]'] = options.newName;
        }
        if(options.newSeoName !== false) {
            data['item['+itemToCloneId+'][item_seo_name]'] = options.newSeoName;
        }
        data['view'] = 'blank';
        data['next_mode'] = 'display';
        //cover it
        MMI.Util.Ajax.basic({
            url: '/',
            method: 'post',
            json: true,
            data: data
        }, function(response) {
            if(typeof(response.json) == 'object' && response.json != null) {
                MMI.Editable.openEditOptionsDialog(response.json.id, deleteButton, options.callback);
            }
        });
    },
    /**
     *
     * @param itemId
     * @param deleteButton false
     * @param callback
     */
    openEditOptionsDialog: function(itemId, deleteButton, callback) {
        var jel_content = jQuery('#item_'+itemId+'_edit_dialog');
        if(!jel_content.size()) {
            jel_content = jQuery('<div id="item_'+itemId+'_edit_dialog"></div>');
        } else {
            jel_content.html('');
        }
        jel_content.data('itemId', itemId);
        var buttons = {
                'Save' : function(){
                    //get the form
                    var jel_form = jQuery('form:first', jQuery(this));
                    jel_form.submit();
                    //jQuery(this).dialog('close');
                },
                'Cancel' : function(){
                    jQuery(this).dialog('close');
                }
            };
        if(deleteButton){
            buttons['Delete'] = function() {
                var doDelete = confirm('Are you sure you want to delete this item?');
                if(doDelete) {
                    var jel = jQuery(this);
                    var passedData = jel.dialog('option', 'mmiDeleteFormData');
                    //form
                    var theData = {
                        'mode': 'delete',
                        'id': itemId,
                        'view' : 'close_and_refresh'
                    };

                    theData['delete['+itemId+'][children]']= 1;
                    theData['delete['+itemId+'][confirm]']= 1;
                    theData['attitude'] = 'json';
                    MMI.Ajax.replaceContent(jel, '/index.php', theData, {'json' : true, 'method' : 'post'}, null, function(response) {
                        jel.dialog('destroy').remove();
                    });
                }
            }

        }
        jel_content.dialog({
            width : this.width,
            height : this.height,
            show : 'slide',
            modal : true,
            hide : 'drop',
            title : 'Edit',
            close : function(){
                jQuery(this).remove();
            },
            buttons : buttons
        });
        jel_content.data('mmi-editable-callback', callback);

        //load in the content
        MMI.Ajax.replaceContent(jel_content, '/index.php', {'id' : itemId, 'mode' : 'edit', 'attitude' : 'json'}, {'json' : true, 'method' : 'post'}, null, MMI.Editable._handlePrepareEditOptionsDialogForm);
    },
    openNewOptionsDialog:function(type, parent, callback){
        var jel_content = jQuery('<div id="item_'+type+'_edit_dialog"></div>');
        jel_content.data('type', type);
        if(parent == undefined){
            parent = 0;
        }
        var buttons = {
                'Save' : function(){
                    //get the form
                    var jel_form = jQuery('form:first', jQuery(this));
                    jel_form.submit();
                    //jQuery(this).dialog('close');
                },
                'Cancel' : function(){
                    jQuery(this).dialog('close');
                }
        };
        jel_content.dialog({
            width : this.width,
            height : this.height,
            show : 'slide',
            modal : true,
            hide : 'drop',
            title : 'Create',
            close : function(){
                jQuery(this).remove();
            },
            buttons : buttons
        });
        jel_content.data('mmi-editable-callback', callback);

        //load in the content
        MMI.Ajax.replaceContent(jel_content, '/index.php', {'parent_id' : parent, 'type' : type, 'mode' : 'edit', 'attitude' : 'json'}, {'json' : true, 'method' : 'post'}, null, MMI.Editable._handlePrepareEditOptionsDialogForm);

    },
    deleteItem: function(itemId) {
        var doDelete = confirm('Are you sure you want to delete this item?');
        if(doDelete) {
            var theData = {
                'mode': 'delete',
                'id': itemId,
                'view' : 'close_and_refresh'
            };

            theData['delete['+itemId+'][children]']= 1;
            theData['delete['+itemId+'][confirm]']= 1;
            theData['attitude'] = 'json';
            var jel = jQuery('#item_'+itemId+'_edit_dialog');
            MMI.Ajax.replaceContent(jel, '/', theData, {'json' : true, 'method' : 'post'}, null, function(response) {
                jel.dialog('destroy').remove();
            });
        }
    },
    _handlePrepareEditOptionsDialogForm: function(response, containerId) {
        //get the form
        var jel_container = jQuery(containerId);
        //intercept submit
        var jel_form = jQuery('form:first', jel_container);
        jel_form.bind('submit', MMI.Editable._handleFormSubmit);
        MMI.Util.Form.AdvancedUploader.autoRegisterForms();
    },
    _handleFormSubmit:function(){
        var jel_form = jQuery(this);
        var jel_ancestor = jel_form.parents('.ui-dialog-content').children().first();
        // Fix any date/time fields based on the jquery datetime plugin.
        var jel_dateFields = jel_form.find('.mmiDateField');
        jel_dateFields.each(function() {
            var jel = jQuery(this);
            var sourceDateFieldName = '#'+jel.attr('name')+'_text';
            var realJsDate = jQuery.genome(sourceDateFieldName).datepicker('getDate');
            var unixTimestamp = realJsDate.getTime() / 1000;
            jel.val(unixTimestamp);
        });
        var jel_dateTimeFields = jel_form.find('.mmiDateTimeField');
        jel_dateTimeFields.each(function() {
            var jel = jQuery(this);
            var sourceDateFieldName = '#'+jel.attr('name')+'_text';
            var realJsDate = jQuery.genome(sourceDateFieldName).datetimepicker('getDate');
            var unixTimestamp = realJsDate.getTime() / 1000;
            jel.val(unixTimestamp);
        });
        var customCallback = jel_ancestor.data('mmi-editable-callback');
        var callback = typeof(customCallback) == 'function' ? customCallback : MMI.Editable._handleFormSubmitDone;
        clog('About to submit and replace using: ', callback);
        MMI.Util.Ajax.submitAndReplaceContent(jel_form, jel_ancestor, {json:true}, callback);
        return false;
    },
    _handleFormSubmitDone: function() {
        clog('_handleFormSubmitDone');
        window.location.reload();
        return;
        //reload
        //window.location.reload();
    }
};