// ==========
// = jquery =
// ==========

var $j = jQuery;

function toggle_layout_edit_mode(){
  draggable = $j('.draggable');
  if (draggable.css("display") == "none") {
    $j('.drag_background').css("opacity", 0.2);
    draggable.css("opacity", 0.95);
    draggable.fadeIn("normal");
    // $j('.drag_background').fadeOut();
  } else{
    draggable.fadeOut("normal");
  }

  // $j('.section').toggleClass('draggable');
  $j('#unclassified').toggle();
  $j('.drop_zone').toggleClass('active_drop_zone');
  $j('.section').toggleClass('section_during_drag');
  // $j('.fake').toggle();
}

function toggle_element(area, link, original, replacement) {
  $j('#'+area).slideToggle("slow");

  if ($j(link).text() == original) {
    $j(link).text(replacement);
  } else{
    $j(link).text(original);
  }
}

function reload_blog_post_form() {
  order_blog_post_sections();
  // observe delete buttons
  $j("label.remove_section").click(function() {
    $j(this).closest('.picture, .body, .code').hide();
  });

  // create growfields
  $j('textarea.expanding').growfield({
    min: 76
  });

  // create sortable
  $j('#sections').sortable({
    handle: '.dragger',
    items: '.body, .code, .picture',
    axis: 'y',
    tolerance: 'pointer',
    forcePlaceholderSize: true,
    placeholder: 'drop_placeholder',
    // // connectWith: '.drop_zone',
    update: function() { order_blog_post_sections(); }
  });
}

function order_blog_post_sections() {
  var position = 1;
  $j('.section_order').each(function(){
    $j(this).val(position++);
  });
}

function new_field_from_template(template){
  new_id = new Date().getTime();
  return template.replace(/NEW_RECORD/g, new_id);
}

$j(document).ajaxSend(function(event, request, settings) {
  settings.data = (settings.data ? settings.data + "&" : "") + "authenticity_token=" + encodeURIComponent( AUTH_TOKEN );
});



// =============
// = prototype =
// =============

// ======================
// = Login slider logic =
// ======================

// the ID of the field must be what you want it to say
function handle_field_naming(object) {
  // if the value has not been changed...
  if (object.value == object.id) { // might want to make this more dynamic
    if (object.id.match('password')) {
      replace_password_field(object);
    }
    toggle_field_style(object, 'replaced');
  }
}

function toggle_field_style(object, desired_state) {
	if (desired_state == 'replaced') {
		// replaced style
		object.addClassName( 'selected');
		object.value = '';

		// now observe the field for exit, if the value is empty, return it to normal
//		alert($(object).id);
		$(object).observe('blur', function(){
			if (object.value == '') {
				if (object.type == 'password') {
					replace_password_field(object);
				}
				toggle_field_style(object, 'default');
			}
		});

	} else{
		// default style
		object.removeClassName( 'selected');
		object.value = object.id;
		// since in a password field the field is replaced entirely, we need to observe it again
		$(object).observe('focus', function(){handle_field_naming(this);});
	}
}

// internet explorer is retarded, so I have to actually replace the entire field with a new one
// in order to change the input type between "text" and "password"
// then give the focus to that field
function replace_password_field(object) {
	desired_state = object.type == 'password' ? 'default' : 'replaced';

	if (desired_state == 'default') {
		new_type = 'text';
		new_value = 'password';
	} else {
		new_type = 'password';
		new_value = '';
	}

	parent_div = object.up();

	new_field = '<input class="field" id="' + object.id + '" name="' + object.name + '" type="' + new_type + '" value="' + new_value + '">';

	parent_div.update(new_field);

	if (desired_state == 'replaced') {
		// timeout is needed for IE
		setTimeout(function() {parent_div.down().focus();}, 10);
	}

	toggle_field_style(parent_div.down(), desired_state);
}
//////////////////////////////////////

// ==============================
// = add growfield to jeditable =
// ==============================

// found here: http://stackoverflow.com/questions/152104/problems-using-jeditable-and-autogrow
$j.editable.addInputType('growfield', {
    element : function(settings, original) {
        var textarea = $j('<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);
        }
        $j(this).append(textarea);
        return(textarea);
    },
    plugin : function(settings, original) {
        $j('textarea', this).growfield(settings.growfield);
    }
});

$j.editable.addInputType('rte', {
    element : function(settings, original) {
        var textarea = $j('<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);
        }
        $j(this).append(textarea);
        return(textarea);
    },
    plugin : function(settings, original) {
        $j('textarea', this).rte(settings.rte);
    }
});