/**

*  gollum.dialog.js
*
*  Used for dialogs. Duh.
*
*/

(function($) {

var Dialog = {

  debugOn: false,
  markupCreated: false,
  markup: '',

  currentAspect: function(){
    if (window.innerWidth < 480) return "small-mobile";
    if ($('#gollum-dialog-dialog').css('position') == 'fixed') return "large-mobile";
    return "desktop";
  },

  attachEvents: function( evtOK ) {
    $('#gollum-dialog-action-ok').click(function( e ) {
      Dialog.eventOK( e, evtOK );
    });
    $('#gollum-dialog-action-cancel').click( Dialog.eventCancel );
    $('#gollum-dialog-dialog input[type="text"]').keydown(function( e ) {
      if ( e.keyCode == 13 ) {
        Dialog.eventOK( e, evtOK );
      }
    });
  },

  detachEvents: function() {
    $('#gollum-dialog-action-ok').unbind('click');
    $('#gollum-dialog-action-cancel').unbind('click');
  },

  createFieldMarkup: function( fieldArray ) {
    var fieldMarkup = '<fieldset>';
    for ( var i=0; i < fieldArray.length; i++ ) {
      if ( typeof fieldArray[i] == 'object' ) {
        fieldMarkup += '<div class="field">';
        switch ( fieldArray[i].type ) {

        case 'text':
          fieldMarkup += Dialog.createFieldText( fieldArray[i] );
          break;

        case 'file':
          fieldMarkup += Dialog.createFieldFile( fieldArray[i] );
          break;

        default:
          break;

        }
        fieldMarkup += '</div>';
      }

    }
    fieldMarkup += '</fieldset>';
    return fieldMarkup;
  },

  createFieldText: function( fieldAttributes ) {
    var html = '';

    if ( fieldAttributes.name ) {
      html += '<label';
      if ( fieldAttributes.id ) {
        html += ' for="gollum-dialog-dialog-generated-field-' + fieldAttributes.id + '"';
      }
      html += '>' + fieldAttributes.name + '</label>';
    }

    html += '<input type="text" class="form-control input-sm width-full"';

    if ( fieldAttributes.id ) {
      html += ' name="' + fieldAttributes.id + '"'
      if ( fieldAttributes.type == 'code' ) {
        html+= ' class="code"';
      }
      if ( fieldAttributes.defaultValue ) {
        html+= ' value="' + fieldAttributes.defaultValue.split('"').join('&quot;') + '"';
      }
      html += ' id="gollum-dialog-dialog-generated-field-' +
        fieldAttributes.id + '">';
    }

    if( fieldAttributes.context ){
      html += '<span class="context">' + fieldAttributes.context + '</span>';
    }

    return html;
  },

  createFieldFile: function( fieldAttributes ) {
    // Not actually a field, but an embedded form.
    var html = '';

    var id = fieldAttributes.id || 'upload';
    var name = fieldAttributes.name || 'file';
    var action = fieldAttributes.action || routePath('upload_file');

    html += '<form method=post enctype="multipart/form-data" ' +
      'action="' + action + '" ' + 'id="' + id + '">';
    html += '<input type=file name="' + name + '" class="form-control width-full">';
    html += '</form>';

    if( fieldAttributes.context ){
      html += '<span class="context">' + fieldAttributes.context + '</span>';
    }

    return html;
  },

  createMarkup: function( title, body ) {
    Dialog.markupCreated = true;
    return '<div id="gollum-dialog-dialog">' +
           '<div id="gollum-dialog-dialog-inner" class="border rounded-1">' +
           '<div id="gollum-dialog-dialog-title"><h4 class="f2 border-bottom mb-3">' +
           title +'</h4></div>' +
           '<div id="gollum-dialog-dialog-body">' + body + '</div>' +
           '<div id="gollum-dialog-dialog-buttons" class="pt-2 float-right">' +
           '<button name="Cancel" id="gollum-dialog-action-cancel" ' +
           'class="btn">Cancel</button>' +
           '<span class="px-1"></span>' +
           '<button name="OK" id="gollum-dialog-action-ok" '+
           'class="btn btn-primary">OK</button>' +
           '</div>' +
           '</div>' +
           '</div>';
  },

  eventCancel: function( e ) {
    e.preventDefault();
    debug('Cancelled dialog.');
    Dialog.hide();
  },

  eventOK: function( e, evtOK ) {
    e.preventDefault();

    var results = [];
    // get the results from each field and build them into the object
    $('#gollum-dialog-dialog-body input').each(function() {
      results[$(this).attr('name')] = $(this).val();
    });

    // pass them to evtOK if it exists (which it should)
    if ( evtOK &&
         typeof evtOK == 'function' ) {
      evtOK( results );
    }
    Dialog.hide();
  },

  hide: function() {
    $('#gollum-dialog-dialog').animate({ opacity: 0 }, {
      duration: 200,
      complete: function() {
        $('#gollum-dialog-dialog').removeClass('active');
        $('#gollum-dialog-dialog').css('display', 'none');
      }
    });

    $(window).unbind('resize', Dialog.resize);
  },

  init: function( argObject ) {
    var title = '';
    var body = '';

    // bail out if necessary
    if ( !argObject ||
         typeof argObject != 'object' ) {
      debug('Editor Dialog: Cannot init; invalid init object');
      return;
    }

    if ( argObject.body && typeof argObject.body == 'string' ) {
      body = '<p>' + argObject.body + '</p>';
    }

    // alright, build out fields
    if ( argObject.fields && typeof argObject.fields == 'object' ) {
      body += Dialog.createFieldMarkup( argObject.fields );
    }

    if ( argObject.title && typeof argObject.title == 'string' ) {
      title = argObject.title;
    }

    if ( Dialog.markupCreated ) {
      $('#gollum-dialog-dialog').remove();
    }

    Dialog.markup = Dialog.createMarkup( title, body );

    $('body').append( Dialog.markup );
    if ( argObject.OK &&
         typeof argObject.OK == 'function' ) {
      Dialog.attachEvents( argObject.OK );
    }

    Dialog.show();
  },

  show: function() {
    if ( !Dialog.markupCreated ) {
      debug('Dialog: No markup to show. Please use init first.');
    } else {
      debug('Showing dialog');

      $('#gollum-dialog.dialog').css('display', 'none');
      $('#gollum-dialog-dialog').animate({ opacity: 0 }, {
        duration: 0,
        complete: function() {
          $('#gollum-dialog-dialog').css('display', 'block');
          Dialog.position(); // position this thing
          $('#gollum-dialog-dialog').animate({ opacity: 1 }, {
          duration: 500
          });
          $($('#gollum-dialog-dialog input[type="text"]').get(0)).focus();
        }
      });

      $(window).bind('resize', Dialog.resize);
    }
  },

  resize: function(){
    Dialog.position();
  },

  position: function() {
    if (Dialog.currentAspect() == "small-mobile") {
      $('#gollum-dialog-dialog-inner').css('height', '100%').css('margin-top', 'auto');
    }
    else if (Dialog.currentAspect() == "large-mobile") {
      $('#gollum-dialog-dialog-inner').css('height', 'auto').css('margin-top', 'auto');
    }
    else if (Dialog.currentAspect() == "desktop") {
      var dialogHeight = $('#gollum-dialog-dialog-inner').height();
      $('#gollum-dialog-dialog-inner')
        .css('height', dialogHeight + 'px')
        .css('margin-top', -1 * parseInt( dialogHeight / 2 ));
    }
  }
};

var debug = function(m) {
  if ( Dialog.debugOn
       && typeof console != 'undefined' ) {
    console.log( m );
  }
};

$.GollumDialog = Dialog;

})(jQuery);