$.editable.addInputType('droppable', {
    element : function(settings, original) {
        return $.editable.types.autogrow.element.call(this, settings, original);
    },
    plugin : function(settings, original) {
        $('textarea', this).droppable(settings.droppable);
        return $.editable.types.autogrow.plugin.call(this, settings, original);
    }
});

Esof.filterMedia = function (media, filter){
    media = $(media);

    if(!filter) {
        media.show();
        return;
    }

    if(media.text().indexOf(filter) < 0) {
        media.hide();
    }
    else {
        media.show();
    }
}

Esof.updateMediaListSize = function() {
    var visibles = $('#media-carousel ul li:visible');
    var width = visibles.outerWidth();
    $('#media-carousel ul').css({overflow: 'hidden'}).width(width * visibles.length + 'px');
}

Esof.baseEditableOptions = {
    cssclass  : 'cms',
    onblur    : 'ignore',
    submit    : 'Save',
    cancel    : 'Cancel',
    indicator : 'Saving...'
};

Esof.textareaEditableOptions = jQuery.extend({}, Esof.baseEditableOptions, {
    loadurl   : '?pagelang='+(Esof.getLanguage() || '')+'&_action=get&_view=PageRenderer:textdata',
    type      : 'droppable',
    droppable : {
        tolerance: "pointer",
        accept: '#media-carousel li',
        drop: function(e, ui) {
            var before = this.value.substring(0,this.selectionStart);
            var after = this.value.substring(this.selectionEnd);
            var media = $(ui.draggable).find('div.id').text();
            var mediaId = media.replace("http://initd.org/edito/media/", "");
            if(mediaId)
                this.value = before + "\n{media:" + mediaId + "}\n" + after;
        }
    }
});

Esof.setupInPlaceEditing = function() {
    var lang = Esof.getLanguage();
    if (!lang)
        return;

    $('.page.edit #page-title')
        .editable('?pagelang='+lang+'&_action=edit&_view=PageRenderer:textdata', jQuery.extend({}, Esof.baseEditableOptions, {
            tooltip   : 'Click to edit the title',
            placeholder : 'Click here to edit the title'
        }));

    $('.page.edit #page-summary')
        .editable('?pagelang='+lang+'&_action=edit&_view=PageRenderer:textdata', jQuery.extend({}, Esof.textareaEditableOptions, {
            tooltip   : 'Click to edit the summary',
            placeholder : 'The summary is empty. Click here to edit.'
        }));
    $('.page.edit #page-shortContent')
        .editable('?pagelang='+lang+'&_action=edit&_view=PageRenderer:textdata', jQuery.extend({}, Esof.textareaEditableOptions, {
            tooltip   : 'Click to edit the short content',
            placeholder : 'There is no short version of the content. Click here to edit.'
        }));
    $('.page.edit #page-content')
        .editable('?pagelang='+lang+'&_action=edit&_view=PageRenderer:textdata', jQuery.extend({}, Esof.textareaEditableOptions, {
            tooltip   : 'Click to edit the page contents',
            placeholder : 'The page has no contents. Click here to edit.'
        }));
};

Esof.setupMetadataPanel = function() {
    var openclose = function(curr, other) {
        $(curr).find('.edit-link a').click(function(evt){
            evt.preventDefault();
            $('#page-info')
                .slideUp(function(){
                    $(this)
                        .find(other)
                        .show()
                        .end()
                        .find(curr)
                        .hide()
                        .end()
                        .slideDown()
                });
        });
    };
    openclose('#page-info-view', '#page-info-edit');
    openclose('#page-info-edit', '#page-info-view');

    var ajaxify = function(){
        $('#edit-metadata').ajaxForm({
            iframe: true,
            beforeSubmit: function(formData, jqForm, options){
                $('#edit-metadata .form-status')
                    .text('Saving...');
            },
            success: function(responseText, statusText) {
                var newPageInfo = $(responseText).find('#page-info');
                newPageInfo.find('#page-info-view').hide();
                newPageInfo.find('#page-info-edit').show();
                $('#page-info').replaceWith(newPageInfo);

                // re-bind events
                openclose('#page-info-view', '#page-info-edit');
                openclose('#page-info-edit', '#page-info-view');
                ajaxify();

                $('#page-info-edit div.date input').datepicker($.datepicker.regional["it"]);
                $('#page-edit div.date input').datepicker($.datepicker.regional["it"]);
            }
        });
    }
    ajaxify();

    $('#page-info-edit div.date input').datepicker($.datepicker.regional["it"]);
    $('#page-edit div.date input').datepicker($.datepicker.regional["it"]);
};

Esof.loadCarousel = function(startId) {
    var startIndex;
    var setupCarouselItems = function(data) {
       data = $(data);
       data.find('li')
           .draggable({
               helper: 'clone',
               appendTo: '#content-box',
               revert: 'invalid'
           });
       data.find('li')
           .each(function(index){
               var id = $(this).find('div.id').text();
               if(id == startId) {
                   startIndex = index;
               }
           });
       return data.find('ul:first');
    }

    jQuery.get('/_api/MediaList?_view=MediaList:htmldata', {},
           function (data, textStatus) {
               $('<div id="media-carousel"/>')
                  .replaceAll('#media-carousel')
                  .append(setupCarouselItems(data));
           },
           'html'
       );
}

Esof.MediaPanel = {};
Esof.MediaPanel.register = function(button, callback) {
    $(button).attr('href', '#').click(callback);
};
Esof.MediaPanel.unregister = function(button) {
    $(button).unbind('click').removeAttr('href');
};
Esof.MediaPanel.open = function(panel, callback) {
    panel.hide().slideDown(callback);
};
Esof.MediaPanel.close = function(panel, callback) {
    panel.slideUp(callback);
};


Esof.fetchMediaEdit = function(callback, mediaId) {
    url = '/_api/MediaEdit?_view=:htmldata';
    if(mediaId)
        url = url + '&id=' + mediaId;
    jQuery.get(url, {}, callback, 'html');
};

Esof.registerMediaCreate = function() {
    Esof.MediaPanel.register('#page-media-buttons a.media-create', function(evt) {
        Esof.fetchMediaEdit(function (data, textStatus) {
            var panel = Esof.setupMediaEdit(data, 'Create new media', Esof.closeMediaCreate);
            Esof.MediaPanel.open(panel.find('#media-edit'));
        });
        Esof.MediaPanel.unregister('#page-media-buttons a.media-create');
    });
};

Esof.closeMediaCreate = function() {
    Esof.MediaPanel.close($('#media-edit'), function(){
        $('#media-edit-panel').remove();
    });
    Esof.registerMediaCreate();
};

Esof.setupMediaEdit = function(panel, title, onclose) {
    panel = $(panel).children();
    if(title) {
       panel.find('form').prepend('<h2>'+title+'</h2>');
    }
    var cancelButton = $('<button type="button">Cancel</button>')
       .click(function(evt) {
           evt.preventDefault();
           onclose();
       });
    panel.find('.button-bar').prepend(cancelButton);
    panel.find('form')
       .ajaxForm({
           iframe: true,
           success: function(responseText, statusText) {
               var result = $(responseText);
               var id = result.find(':input[name=id]').val();
               if(result.find('.error').length > 0) {
                   Esof.setupMediaEdit(result.replaceAll(panel), title, onclose);
               }
               else {
                   onclose();
               }
               Esof.loadCarousel(id);
           }
       });
    panel.prependTo('#page-media')
    return panel;
}

Esof.setupMediaFilter = function(){
    var panel = $('<div id="media-filter-panel" class="media-edit">'
          +'<form id="media-filter" class="span-26"><h2>Filter media</h2>'
          +'<div class="span-26 last"><input class="span-26 last" name="filter" type="text" /></div>'
          +'<div class="span-26 last button-bar">'
            +'<button type="button">Close</button>'
          +'</div>'
          +'</form></div>');
    panel.find('button')
        .click(function(evt) {
            evt.preventDefault();
            Esof.MediaPanel.close(panel.find('#media-filter'));
        });
    panel.find('input[name=filter]')
        .keypress(function(evt){
            var input = $(this);
            var handler = function(){
                var filter = input.val();
                $('#media-carousel li').each(function(){
                    Esof.filterMedia(this, filter);
                });
                Esof.updateMediaListSize();
            };
            // run the handler when the event has been handled and
            // the new <input> value has been set
            setTimeout(handler, 10);
        })
    panel.prependTo('#page-media').find('#media-filter').hide();
};

Esof.registerMediaFilter = function() {
    Esof.MediaPanel.register('#page-media-buttons a.media-filter', function(evt) {
        evt.preventDefault();
        Esof.MediaPanel.open($('#media-filter-panel').find('#media-filter'));
    });
};

Esof.closeMediaEditItem = function(mediaList) {
    Esof.MediaPanel.close($('#media-edit'), function(){
        $('#media-edit-panel').remove();
    });
    Esof.registerMediaEditItem(mediaList);
};

Esof.setupMediaEditItem = function(evt) {
    var mediaList = $(evt.currentTarget);
    var mediaId = $(evt.target).parents('li').find('div.id').text().replace("http://initd.org/edito/media/", "");
    Esof.fetchMediaEdit(function (data, textStatus) {
        var panel = Esof.setupMediaEdit(data, 'Edit media ('+mediaId+')', function(){
            Esof.closeMediaEditItem(mediaList)
        });
        Esof.MediaPanel.open(panel.find('#media-edit'));
    }, mediaId);
    $('#media-carousel').expire(Esof.setupMediaEditItem);
};

Esof.registerMediaEditItem = function(mediaList) {
    $('#media-carousel').livequery('click', Esof.setupMediaEditItem);
};

Esof.setupTwitterForm = function(form, max) {
    var $form = $(form);
    var $textarea = $form.find(".twitter-text :input");
    var $counter = $form.find(".twitter-counter");
    var $status = $form.find(".twitter-status");
    var $message = $form.find(".twitter-message");
    $textarea.keypress(function(evt){
        // delay the input value computation *after* the keypress has been handled
        setTimeout(function() {
            var length = $textarea.val().length;

            var remaining = max - length;
            $counter.text(remaining);

            var exceeded = "twitter-exceeded";
            if (remaining < 0) {
                $form.addClass(exceeded);
                $form.find(":submit").get(0).disabled = true;
            }
            else {
                $form.removeClass(exceeded);
                $form.find(":submit").get(0).disabled = false;
            }
        }, 0);
    });
    $form.ajaxForm({
        success: function(responseText, statusText) {
            var statusText = responseText;
            var messageText = "";

            if (responseText.match(/^ok/)) {
                statusText = "ok"
                messageText = responseText.substr(3);
            }

            if (statusText == "ok") {
                $form.removeClass('twitter-error');
                $textarea.val('').keypress();
            }
            else {
                $form.addClass('twitter-error');
            }
            $status.text(statusText);
            $message.text(messageText);
            $textarea.keypress();
        }
    });
};

$(function(){
    if($('.page.edit #page-media').length < 1)
        return;

    Esof.setupInPlaceEditing();
    Esof.setupMetadataPanel();

    // media list panels setup
    var buttons = $('<div id="page-media-buttons"/>').appendTo('#page-media');
    $('<a class="media-create">Create new media</a>'
     +'<span>|</span>'
     +'<a class="media-filter">Filter</a>').appendTo(buttons);

    Esof.registerMediaCreate();
    Esof.registerMediaFilter();
    Esof.setupMediaFilter();

    // media list setup
    var mediaList = $('<div id="media-carousel"/>').appendTo('#page-media');
    Esof.loadCarousel();
    Esof.registerMediaEditItem('#media-carousel');

    $('#media-carousel li').livequery(function(){
        var filter = $('#media-filter input[name=filter]').val();
        Esof.filterMedia(this, filter);
        Esof.updateMediaListSize();
    });

    // markdown editor setup
    $('textarea').livequery(function(){
        new Attacklab.wmd.editor(this);
    });

    var twitter = $("form#twitter");
    Esof.setupTwitterForm(twitter, jQuery.trim(twitter.find('.twitter-counter').text()));
})