function save(link) {
  var name = prompt("Please name your plaid:");
  if (name != null) {
    name = name.replace(/^\s+/,'');
    name = name.replace(/\s+$/,'');
    name = name.replace(/[\n\r\t]/g,'');
    name = name.replace(/\ +/g,' ');
    if (name != '') {
      $.get(
        link,
        {'name': name },
        save_complete,
        'json'
      )
    }
  }
}

function save_complete(req) {
  var newLink = document.createElement('b');
  var a = document.createElement('a');
  a.href = "plaid/" + id;
  a.innerHTML = "View it »";
  newLink.appendChild(document.createTextNode("Saved!"));
  var link = document.getElementById('save');
  var par = link.parentNode;
  par.removeChild(link);
  par.appendChild(newLink);
  par.appendChild(document.createTextNode(' '));
  par.appendChild(a);
}

function background(link) {
  var img = document.getElementById('plaid');
  if (!img) return;
  if (link.innerHTML.indexOf('Set') >= 0 ) {
    document.getElementsByTagName('body')[0].style.background = "#FFFFFF url("+img.src+") top center repeat";
    link.innerHTML = 'Clear background';
  } else {
    document.getElementsByTagName('body')[0].style.background = "";
    link.innerHTML = 'Set as background';
  }
}
function colorAdd(id, color) {
  // add color to the color drop down
  $('#color-select').append("<li style='background-color:#"+color+";color:#"+color+";'>"+color+"<span class='value'>"+id+"</span></li>");
  $('#color-select li:last').click(colorSelectClick);

  // add a new blank row
  colorRowAdd();
}

function colorRowAdd() {
  var last_row = $('#pallet > div:last')[0];
  var id = $(last_row).children('span')[0].innerHTML;
  var new_row = $(last_row).clone();
  id = 1 * id;
  $(new_row).children('span')[0].innerHTML = id + 1;
  var inpt = $(new_row).children('input')[0];
  inpt.value = '';
  var img  = $(new_row).children('img')[0];
  $(img).css({'background-color':'#FFFFFF'});
  addColorPicker(inpt);
  $('#pallet').append(new_row);
}

function rowAdd(elem) {
  var axis = elem.parentNode.parentNode;
  var rows = $(axis).children('div');
  var cur_row = rows.length-1;
  for (var i=0; i<rows.length; i++) {
     if (rows[i] == elem.parentNode) cur_row = i;
  }
  var nrow = $(elem.parentNode).clone(false);
  var inpt = $(nrow).children('input')[0];
  inpt.value = '';
  // add the dropdown click event
  $(nrow).select('.dropdown div').click(function(e) {onDropDownClick(e)});
  $(nrow).insertAfter(rows[cur_row]);
}

function rowDelete(r) {
  r.parentNode.parentNode.removeChild(r.parentNode);
}

function prepareSubmit() {
  var colors = '';
  var x_str = '';
  var y_str = '';
  $.each($('#pallet > div.color'),function(i,v){
   if ($(v).find('input').val()) {
     if (colors != '') colors += ',';
       colors += $(v).find('input').val();
     }
  });

  $.each($('#x-axis > div'),function(i,v){
    if (x_str != '') x_str += ',';
    x_str += $(v).find('span.value').text();
    x_str += 'x';
    x_str += $(v).find('input').val();
  });

  $.each($('#y-axis > div'),function(i,v){
    if (y_str != '') y_str += ',';
    y_str += $(v).find('span.value').text();
    y_str += 'x';
    y_str += $(v).find('input').val();
  });

  $('#colors').val(colors);
  $('#x_str').val(x_str);
  $('#y_str').val(y_str);
  return false;
}

function validate(input) {
  var how = input.className.match(/validate-[a-z]+/i);
  input.value = input.value.toUpperCase();
  if (how == 'validate-hex')
     input.value = input.value.replace(/[^0-9a-f]/gi, '');
  if (how == 'validate-num')
     input.value = input.value.replace(/[^0-9]/g, '');
}

function colorChanged(c) {
  var color = c.value;
  if (color.match(/^[0-9A-F]{6}$/i)) {
    var id = $(c).prev('span').text();
    updateSelects(id, color);
    if (c.parentNode.parentNode.getElementsByTagName('div').length == id) {
      colorAdd(id, color);
    }
  }
}

function colorKeyUp(c) {
  var color = c.value;
  if (color.match(/^[0-9A-F]{6}$/i)) {
    $(c).ColorPickerSetColor(color);
    $(c).next('img').css( {'background-color':'#' + color} );
  }
}

function updateSelects(id, color) {
  $('#color-select li:eq('+(id-1)+')').css({'background-color':'#'+color,'color':'#'+color});
  $('#color-select li:eq('+(id-1)+')').html(color+'<span class="value">'+id+'</span>');
  $.each( $('.dt span'), function(i,val) {
    if ($(val).text() == id) {
      $(val).parent('.dt').css({'background-color':'#'+color,'color':'#'+color});
      $(val).parent('.dt').html(color+'<span class="value">'+id+'</span>');
    }
  });
}

function addColorPicker(e) {
  var swatch = $(e).next('img');
  $(swatch).click(function() {
    $(this).prev('input').trigger('click');
  });
  $(e).ColorPicker({
    color: $(e).attr('value'),
    onChange: function (hsb, hex, rgb) {
      $(e).val(hex);
      $(swatch).css('background-color', '#' + hex);
    },
    onHide: function (hsb, hex, rgb) {
      colorChanged(e);
    },
    onSubmit: function(hsb, hex, rgb, inpt) {
      $('.colorpicker').hide();
    }
  });
}
var selectedSelect;

function onDropDownClick(e) {
  dd = e.target;
  selectedSelect = dd;
  $('#color-select').show();
  var pos = $(dd).position();
  $('#color-select').css({'top':(1+pos.top+$(dd).height())+'px','left':12+pos.left+'px'});
}

function colorSelectClick(e) {
  var text = $(e.target).html();
  var color = $(e.target).css('background-color');
  $(selectedSelect).html(text);
  $(selectedSelect).css({'background-color': color,'color': color});
  $('#color-select').hide();
}

$(document).ready( function() {
  // color picker
  $('div.color input').each( function(i,e) {
    addColorPicker(e);
  });

  $(".dropdown div").click(function(e) {
    onDropDownClick(e);
  });

  $("#color-select li").click(colorSelectClick);

  $(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown"))
      $("#color-select").hide();
  });

  // pre-loader for plaid on edit page
  if (document.getElementById('plaid')) {
    var src = $('#plaid').attr('src');
    src = src.slice(src.indexOf('?'), src.length);
    var generated = new Image();
    generated.onload = function() {$('#plaid').attr('src', generated.src);}
    generated.src = '/plaid_img.php' + src;
  }
});