/*
 * Script from NETTUTS.com [by James Padolsey]
 * Enhanced by Jannik Streek
 * @requires jQuery($), jQuery UI & sortable/draggable UI modules
 */

var iNettuts = {
    
    jQuery : $,
    
    settings : {
        columns : '.column',
        startColumn : '#column0',
        widgetSelector: '.widget',
        handleSelector: '.widget-head',
        contentSelector: '.widget-content',
        saveWidgets : '/dashboard/save-widgets',
        saveWidgetOptions : '/dashboard/save-widget-options',
        deleteWidget : '/dashboard/delete-widget'
    },

    init : function () {
       /* this.attachStylesheet('inettuts.js.css');*/
       
        //Make every Widget draggable&custamizable which are already on the dashboard
        this.initWidgetControls($('.column > li'));
        this.makeSortable($('.column > li'));
        this.initClickHandler();
    },
    
    getWidgetSettings : function (id) {
        var $ = this.jQuery,
            settings = this.settings;
        return (id&&settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault;
    },
    
    initWidgetControls : function (e) {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings;

            
        $(e).each(function () {
                $(this).find('.remove').mousedown(function (e) {
                    e.stopPropagation();    
                }).click(function () {
                    //TODO make message member var
                    if(confirm('This widget will be removed, ok?')) {
                        $(this).parents(settings.widgetSelector).animate({
                            opacity: 0    
                        },function () {
                            $(this).wrap('<div/>').parent().slideUp(function () {
                                $(this).remove();
                                
                                //Delete Widget from DB
                                widgetId = $(this).find('.widget_id').attr('value');
                                $.ajax({
                                    type: "POST",
                                    url: settings.deleteWidget,
                                    data: "id="+widgetId
                                });
                            });
                        });
                    }
                    return false;
                });
                
                $(this).find('.submit').click(function() {
                        $widgetSelector = $(this).parents(settings.widgetSelector);
                        var answer = {};
                        answer[0] = $widgetSelector.find('.widget_id').attr('value');
                        answer[1] = $widgetSelector.find('.widget_title').attr('value');
                        answer[2] = $widgetSelector.find('.widget_color').attr('value');
                        console.log(answer);
                        data = JSON.stringify(answer);
                        $.ajax({
                            type: "POST",
                            dataType: 'json',
                            url: settings.saveWidgetOptions,
                            data: data
                        });
                });
            
                $(this).find('.edit').mousedown(function (e) {
                    e.stopPropagation();    
                }).toggle(function () {
                    $(this).css({backgroundPosition: '-66px 0', width: '55px'})
                        .parents(settings.widgetSelector)
                            .find('.edit-box').show().find('input').focus();
                    return false;
                },function () {
                    $(this).css({backgroundPosition: '', width: ''})
                        .parents(settings.widgetSelector)
                            .find('.edit-box').hide();
                    return false;
                });
            
                $(this).find('.collapse').mousedown(function (e) {
                    e.stopPropagation();    
                }).toggle(function () {
                    $(this).css({backgroundPosition: '-38px 0'})
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).hide();
                    return false;
                },function () {
                    $(this).css({backgroundPosition: ''})
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).show();
                    return false;
                });

        });
        
        //Show changes to the user
        //But not saved in db yet
        $('.edit-box').each(function () {
            $('input',this).keyup(function () {
                $(this).parents(settings.widgetSelector).find('h3').text( $(this).val().length>20 ? $(this).val().substr(0,20)+'...' : $(this).val() );
            });
            $('ul.colors li',this).click(function () {
                
                var colorStylePattern = /\bcolor-[\w]{1,}\b/,
                    thisWidgetColorClass = $(this).parents(settings.widgetSelector).attr('class').match(colorStylePattern)
                if (thisWidgetColorClass) {
                    var newClass = $(this).attr('class').match(colorStylePattern)[0];
                    $(this).parents(settings.widgetSelector)
                        .removeClass(thisWidgetColorClass[0])
                        .addClass(newClass)
                        .find('.widget_color').attr('value', String(newClass));
                }
                return false;
                
            });
        });
        
    },
    
    attachStylesheet : function (href) {
        var $ = this.jQuery;
        return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
    },
    
    initClickHandler : function () {
            var iNettuts = this;
            settings = this.settings,
            $("#addWidget").click(function() {
                    var name = this.name;
                   
                    //TODO -1 without the +1 ??
                    $lis = $(settings.startColumn).children('li');
                    var lastWidgetPosition = $lis.index($lis.last())+1;
                    
                    //Add the widget
                    $.ajax({
                      url: "dashboard/"+name+"/",
                      type: "GET",
                      data: ({position : lastWidgetPosition}),
                      success: function(msg){
                        $(settings.startColumn).append($(msg));

                        $lis = $(settings.startColumn).children('li');
                        var e = $lis.get(lastWidgetPosition);
                        
                        //Only register handler for the new item, not for all
                        iNettuts.initWidgetControls(e);
                        iNettuts.makeSortable(e);
                      }
                   });

    });
        
    },
    
    makeSortable : function (e) {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings,
            $sortableItems = $(e);
        
        $sortableItems.find(settings.handleSelector).css({
            cursor: 'move'
        }).mousedown(function (e) {
            $sortableItems.css({width:''});
            $(this).parent().css({
                width: $(this).parent().width() + 'px'
            });
        }).mouseup(function () {
            if(!$(this).parent().hasClass('dragging')) {
                $(this).parent().css({width:''});
            } else {
                $(settings.columns).sortable('disable');
            }
        });
        $(settings.columns).sortable({
            items: $('.column > li'),
            connectWith: $(settings.columns),
            handle: settings.handleSelector,
            placeholder: 'widget-placeholder',
            forcePlaceholderSize: true,
            revert: 300,
            delay: 100,
            opacity: 0.8,
            containment: 'document',
            start: function (e,ui) {
                $(ui.helper).addClass('dragging');
            },
            stop: function (e,ui) {
                $(ui.item).css({width:''}).removeClass('dragging');
                $(settings.columns).sortable('enable');
                
                $columnParent = $(ui.item).parent().parent();
                var numberOfColums =  $columnParent.children('ul').size();

                var answer = {};
                var counter = 0;
                
                //TODO Evtl. Optimierung: Nur die Spalten betrachten, indenen gedraggt wird. 
                for(var o = 0; o < numberOfColums;o++){
                        $column = $($columnParent.children('ul').get(o));
                        var numberOfWidgetsInColumn = $column.children('li').size();
                        for (var i = 0; i < numberOfWidgetsInColumn; i++) {
                            var widgetId = $($column.children('li').get(i)).find('.widget_id').attr('value');
                            answer[counter] = {};
                            answer[counter][0] = i; //Widget Position
                            answer[counter][1] = o; //Widget Column
                            answer[counter][2] = widgetId; //Widget Id
                            counter = counter+1;
                        }
                }
                data = JSON.stringify(answer);
                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: settings.saveWidgets,
                    data: data
                });
                
            }
        });
    }
  
};

iNettuts.init();