$.fn.tinymce = function(options){
   return this.each(function(){
      tinyMCE.execCommand("mceAddControl", true, this.id);
   });
}


$.editable.addInputType('mce', {
   element : function(settings, original) {
      var textarea = $('<textarea id="'+$(original).attr("id")+'_mce"/>');
      if (settings.rows) {
         textarea.attr('rows', settings.rows);
      } else {
         textarea.height(settings.height);
      }
      if (settings.cols) {
         textarea.attr('cols', settings.cols);
      } else {
         textarea.width(settings.width);
      }
      $(this).append(textarea);
         return(textarea);
      },
   plugin : function(settings, original) {
      tinyMCE.execCommand("mceAddControl", true, $(original).attr("id")+'_mce');
      },
   submit : function(settings, original) {
      // tinyMCE.triggerSave();
      // tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
      },
   reset : function(settings, original) {
      tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
      original.reset();
   }
});

$.editable.addInputType('autogrow', {
    element : function(settings, original) {
        var textarea = $('<textarea />');
        if (settings.rows) {
            textarea.attr('rows', settings.rows);
        } else {
            textarea.height(settings.height);
        }
        if (settings.cols) {
            textarea.attr('cols', settings.cols);
        } else {
            textarea.width(settings.width);
        }
        $(this).append(textarea);
        return(textarea);
    },
    plugin : function(settings, original) {
        $('textarea', this).autogrow(settings.autogrow);
    }
});


$.editable.addInputType('month_and_year', {
    element : function(settings, original) {       
        var monthSelect = $('<select id="month_">'
           +'<option value="1">January</option>'
           +'<option value="2">February</option>'
           +'<option value="3">March</option>'
           +'<option value="4">April</option>'
           +'<option value="5">May</option>'
           +'<option value="6">June</option>'
           +'<option value="7">July</option>'
           +'<option value="8">August</option>'
           +'<option value="9">September</option>'
           +'<option value="10">October</option>'
           +'<option value="11">November</option>'
           +'<option value="12">December</option>'
           +'</select>');
           
        var yearSelect  = $('<select id="year_">');
        
        for(var year=(new Date).getFullYear(); year >= 1950; year--) {
            var option = $('<option>').val(year).append(year);
            yearSelect.append(option);
        }
        
        $(this).append(monthSelect);
        $(this).append(yearSelect);
        $(this).append($('<br/>'));

        /* Hidden input to store value which is submitted to server. */
        var hidden = $('<input type="hidden">');
        $(this).append(hidden);
        return(hidden);
    },
    
    submit: function (settings, original) {
        var value = $("#month_").val() + " " + $("#year_").val();
        $("input[type=hidden]", this).val(value);
    },
    
    content : function(string, settings, original) {
        var split = string.split(' ');
        var month = split[0];
        var year = split[1];

        $("#month_", this).children().each(function() {
            if (month == $(this).val()) {
                $(this).attr('selected', 'selected');
            }
        });
        $("#year_", this).children().each(function() {
            if (year == $(this).val()) {
                $(this).attr('selected', 'selected');
            }
        });
    }
    
    
});

var types = [
  ['.month_and_year','month_and_year'],
  ['.area', 'autogrow'],
  ['.mce','mce'],
  ['span','text']
];

function makeEditable(content){
  $('.editable-object > .editable-data').each(function(){
		var object = $(this).parent();
		var dataSpanElement = $(this);
		var url = dataSpanElement.html();
		dataSpanElement.remove();
		
		object.find('a.edit').remove();
		
		object.find(".editable-field").each(function(){
			var element = $(this);
//			jQuery.data(this, 'flower',
//  			new flower_bubble({
//        	base_obj: element,
//        	base_dir: '/images',
//        	block_mode: 'base_obj',
//        	background: { css: 'white', opacity: 0.8 },
//        	flower: { image: 'flower.gif', width: 16, height: 16 }
//        }));
			var elementData = element[0].id.split('---');
			var model = elementData[0];
			var field = elementData[2];
			var type = $.grep(types, function(theType){
			  return element.is(theType[0]);
			});
  		type = type.length > 0 ? type[0][1] : 'text';
			
			element.editable(url,
				{
				  onsubmit: function(settings, original) {
				    if(original.input.val() == original.revert)
				    {
				      original.editing = false;
				      $(original).html(original.revert);
  				    tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
				      return false;
				    }
//				    jQuery.data(original, 'flower').enable();
				  },
//				  onreset: function(settings, original) {
//				    jQuery.noticeRemove($('.' + original.id + '---error'), 400);
//				    jQuery.data(original, 'flower').disable();
//				  },
				  callback: function(value, settings) {
				    var element = $(this);
//				    jQuery.data(this, 'flower').disable();
				    if(value.errors.length == 0)
				    {
				      this.editing = false;
				      element.html(value.value);
  				    tinyMCE.execCommand("mceRemoveControl", true, element.attr("id")+'_mce');
//  				    jQuery.noticeRemove($('.' + this.id + '---error'), 100);
//  				    jQuery.noticeAdd({
//                text: 'Updated ' + value.field + ' on ' + value.id + '.',
//                stayTime: 5000
//              });
				    }
            else
            {
//              var message = '<h3>' + value.field + ' on ' + value.id + ' was not saved because:</h3><ul>';
//              jQuery.each(value.errors, function(i, error){
//                message += '<li>It ' + error[1] + '</li>';
//              });
//              message += '</ul>';
//              jQuery.noticeAdd({
//                text: message,
//                stay: true,
//                type: 'error ' + this.id + '---error'
//              });
              $(this.firstElementChild).css('border', '3px solid red')
              $(this.firstElementChild).css('padding', '0.5em')
            }
				  },
					type : type,
	      	submit : 'Save',
			  	cancel : 'Cancel',
	      	indicator : "Saving...",
					method: "PUT",
					model: model,
					id: null,
					name: field,
					onblur: 'ignore',
					style: 'inherit',
					ajaxoptions: {
						dataType: "json"
					}
				});
			});
		});
}

function makeEditableReplace(){
  $('.editable-object-replace').each(function(){
    var element = $(this);
    var dataSpanElement = element.children(":first-child");
    var url = dataSpanElement.html();
		dataSpanElement.remove();
		
		element.find('a.edit').remove();
		
		element.click(function(){
		  $.ajax({
		    url: url,
		    datatype: 'html',
		    success: function(data, status){
		      element.hide();
		      element.after(data);
		    }
		  });
		});
  });
}


$(function(){
  
  $('a#new_history_link').click(function(){
    var link = $(this);
    $.ajax({
      url: this.href,
      dataType: 'html',
      success: function(data, status){
        link.hide();
        link.parent().append($(data));
      }
    });
    return false;
  });
  
  $('form#new_history').live('submit', function(){
    var form = $(this).eq(0);
    $.ajax({
      url: this.action,
      datatype: 'html',
      type: 'post',
      data: form.serialize(),
      success: function(data, status){
        data = $(data);
        $('a#new_history_link').show();
        $('ul#history_list').replaceWith(data);
        form.remove();
        makeEditableReplace();
      }
    });
    return false;
  });
  
  $('form.edit_history').live('submit', function(){
    var form = $(this).eq(0);
    $.ajax({
      url: this.action,
      datatype: 'html',
      type: 'post',
      data: form.serialize(),
      success: function(data, status){
        form.parent().replaceWith($(data));
        makeEditableReplace();
      }
    });
    return false;
  });
  
  $('form.edit_history').live('reset', function(){

    var form = $(this).eq(0);
    form.prev().show();
    form.remove();
    return false;
  });
  
  $('form.edit_story_projects').live('submit', function(){
    var form = $(this).eq(0);
    $.ajax({
      url: this.action,
      datatype: 'html',
      type: 'post',
      data: form.serialize(),
      success: function(data, status){
        form.prev().replaceWith($(data));
        form.remove();
        makeEditableReplace();
      }
    });
    return false;
  });
  
  $('form.edit_story_projects').live('reset', function(){
    var form = $(this).eq(0);
    form.prev().show();
    form.remove();
    return false;
  });
  
  $('a#new_partner').live('click', function(){
    var link = $(this);
    $.ajax({
      url: this.href,
      dataType: 'html',
      success: function(data, status){
        link.hide();
        link.parent().append($(data));
      }
    });
    return false;
  });
  
  $('a.edit_partner').live('click', function(){
    var link = $(this);
    $.ajax({
      url: this.href,
      dataType: 'html',
      success: function(data, status){
        link.parent().html(data);
      }
    });
    return false;
  });
  
  $('a.edit_photo').live('click', function(){
    var link = $(this);
    $.ajax({
      url: this.href,
      dataType: 'html',
      success: function(data, status){
        link.parent().parent().html(data);
      }
    });
    return false;
  });
  
  $('select.stateselect').live('change', function(){
    var select = $(this);
    var val = select.val();
    $.ajax({
      url: document.location.href,
      type: 'put',
      data: select.serialize(),
      success: function(data, status){
        if(val == "others"){
          $('#map_container, #map_menu').hide();
        }
        else {
          $('#map_container, #map_menu').show();
        }
      }
    })
  });
  
  $('a.delete_image').live('click', function(){
    confirm("Are you sure you wish to remove this project image?");
  });
	
	$('input.color_picker').live('keydown', function(){
    var valid = /^#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})$/.test(this.value);
    this.style.backgroundColor = valid ? this.value : '#ffffff';
  });

  $('.thumb_upload_link').click(function(){
    var link = $(this).eq(0);
    var form = link.next();
    form.show();
    link.hide();
    return false;
  });
	
	makeEditable();
	makeEditableReplace();

});