color.js

var Color = {};
Color.fromRGB = function (color) {
  var ary = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  
  return [ary[1]/255, ary[2]/255, ary[3]/255];
};

Color.fromHex = function (color) {
  if (color.length == 7) {
    return [parseInt('0x' + color.substring(1, 3)) / 255,
      parseInt('0x' + color.substring(3, 5)) / 255,
      parseInt('0x' + color.substring(5, 7)) / 255];
  }
  else if (color.length == 4) {
    return [parseInt('0x' + color.substring(1, 2)) / 15,
      parseInt('0x' + color.substring(2, 3)) / 15,
      parseInt('0x' + color.substring(3, 4)) / 15];
  }
}
Color.aryFromHex = function(color) {
  if (color.length == 7) {
    return [parseInt('0x' + color.substring(1, 3)),
      parseInt('0x' + color.substring(3, 5)),
      parseInt('0x' + color.substring(5, 7))];
  }
  else if (color.length == 4) {
    return [parseInt('0x' + color.substring(1, 2)),
      parseInt('0x' + color.substring(2, 3)),
      parseInt('0x' + color.substring(3, 4))];
  }
}

Color.RGBToHSL = function (rgb) {
  var min, max, delta, h, s, l;
  var r = rgb[0], g = rgb[1], b = rgb[2];
  min = Math.min(r, Math.min(g, b));
  max = Math.max(r, Math.max(g, b));
  delta = max - min;
  l = (min + max) / 2;
  s = 0;
  if (l > 0 && l < 1) {
    s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
  }
  h = 0;
  if (delta > 0) {
    if (max == r && max != g) h += (g - b) / delta;
    if (max == g && max != b) h += (2 + (b - r) / delta);
    if (max == b && max != r) h += (4 + (r - g) / delta);
    h /= 6;
  }
  return [h, s, l];
}

editor.js

var ImagesController = new Controller('ImagesController', {
  // attrs
  backgroundImageUrl: null,
  // backgroundImageRepeat : false,
  currentPage: 1,
  imagePickerShowing: false,
  newImageShowing: true,
  existingImageShowing: false,
  image  : {id: '', height: '', width:'', public_filename: ''},
  images : [],
  
  // actions
  goForward: function(el){
    this.attr('currentPage', this.currentPage + 1);
    this.loadImages();
  },
  goBackward: function(el){
     this.attr('currentPage', Math.max(1, this.currentPage - 1));
     this.loadImages();
  },
  showImagePicker: function(el){
    this.imagePicker.css({
      'left' : this.imageInput.offset().left,
      'top'  : this.imageInput.offset().top + 30
    });
    ColorsController.attr('colorPickerShowing', false);
    this.attr('imagePickerShowing', true);
  },
  hideImagePicker: function(el){
    this.attr('imagePickerShowing', false);
  },
  setCurrentImage: function(el){
    this.attr('backgroundImageUrl', el.attr('src'));
    this.attr('backgroundImageRepeat', true);
  },
  removeImage: function(el){
    ImagesController.attr('newImageShowing', true);
    ImagesController.attr('existingImageShowing', false);
    ImagesController.attr('image', null)
    ImagesController.attr('backgroundImageUrl', null);
  },
  toggleImageRepeat : function(el){
    this.attr('backgroundImageRepeat', !this.backgroundImageRepeat);
  },
  loadImages: function(){
    var controller = this;
    $.getJSON('http://www.colourlovers.com/api/patterns/top?format=json&numResults=12&jsonCallback=?', {
      resultOffset : this.currentPage * 12
    }, function(data){
      controller.attr('images',data)
    });
  },
  
  // value transformers
  Transforms : {
    imageGrid : function(data){
      var container = $('<div>');
      $.each(data, function(){
        $('<img>').attr({
         'src' : this.imageUrl
        }).css('cursor','pointer').actions({
          'click' : 'ImagesController.setCurrentImage'
        }).appendTo(container);
      });
      return container.contents();
    },
    imageCSS : function(url){
      return { 'background' : 'url(' + url + ')'};
    },
    imageRepeat : function(doesRepeat){
      return doesRepeat ? {'background-repeat':'repeat'} : {'background-repeat':'no-repeat'};
    }
  }
});

var ColorsController = new Controller('ColorsController',{
  wells : [],
  colorsHaveChanged : false,
  colorPickerShowing : false,
  colorPickerLocation: {'left' : 0, 'top' : 0},
  
  // actions
  wellFocused : function(el){
    ImagesController.attr('imagePickerShowing', false);
    this.currentWell = el;
    this.attr('colorPickerLocation', {
      'left' : el.offset().left,
      'top'  : el.offset().top + 30
    });
    this.attr('colorPickerShowing', true);
    var controller = this; // need access to this controller inside farbtastic callback.
    this.colorWheel.linkTo(function(color){
      controller.currentWell.val(color);
      controller.currentWell.css({
        backgroundColor: color,
        color: controller.colorWheel.hsl[2]  > 0.5 ? "#000": "#fff"
      });
      var dataSlotName = 'update_items_linked_to_' + controller.currentWell.attr('id')
      // ideal, but messy:
      // controller.attr(dataSlotName, color);
      // less ideal, but easy:
      controller[dataSlotName](color);      
    });
    this.colorWheel.setColor(el.val());
  },
  hideColorPicker : function(el){
    this.attr('colorPickerShowing', false);
  },
  update_items_linked_to_profile_text_color : function(color){
    $('#home').css('color',color);
    // links that need to look like text
    $("#home #me_name, #home .stats_count, #home li.active a, #home a.definition").css('color', color);
  },
  update_items_linked_to_profile_link_color  : function(color){
    $("#home a, #home a strong").css('color', color);
    // reset the :nots back to text color. LAME.
    $("#home #me_name, #home .stats_count, #home li.active a, #home a.definition").css('color', this.profile_text_color.val());
  },
  update_items_linked_to_profile_sidebar_fill_color  : function(color){
    $("#side_base").css("background-color", color);
    var highlight = function(dark){
      var colors = Color.aryFromHex(dark)
      var color  = '#'
      for (var i=0; i < colors.length; i++) {
        color = color + (Math.min(255, parseInt(colors[i], 16) + 24)).toString(16)
      };      
      return color;
    }(color);
    $('p.promotion, li.active a').css("background-color", highlight);
  },
  update_items_linked_to_profile_sidebar_border_color : function(color){
    $("#side_base").css("border-color", color);
    $(".stats td+td, #tabMenu li, #side div.section-header h3.faq-header").css("border-color", color);
  },
  update_items_linked_to_profile_background_color : function(color){
    $('#home').css('background-color', color);
  }
});

$(document).ready(function() {    
  // attatchment
  new AjaxUpload($('#add'), {
    action : '/images',
    name   : 'image[uploaded_data]',
    responseType: 'json',
    onComplete : function(file, response){
      ImagesController.attr('newImageShowing', false);
      ImagesController.attr('existingImageShowing', true);
      ImagesController.attr('image', response.image)
      ImagesController.attr('backgroundImageUrl', response.image.public_filename);
      ImagesController.attr('backgroundImageRepeat', ImagesController.attr('backgroundImageRepeat'));
    }
  });
    
  // page-level control view
  $('#home').outlet(ImagesController, 'canvas')
    .connect('css', 'ImagesController.backgroundImageUrl', ImagesController.Transforms.imageCSS)
    .connect('css', 'ImagesController.backgroundImageRepeat', ImagesController.Transforms.imageRepeat);
  
  // colors control views
  $("#picker").outlet(ColorsController, 'colorPicker').connect('toggle', 'ColorsController.colorPickerShowing').connect('css','ColorsController.colorPickerLocation');
  $("#picker .close").actions({
    'click' : 'ColorsController.hideColorPicker'
  });
  
  ColorsController.colorWheel = $.farbtastic('#wheel');
  
  // color well views
  $('.color.well input').outlet(ColorsController, 'wells').each(function(){
    $(this).outlet(ColorsController, $(this).attr('id')).actions({
      'focus' : 'ColorsController.wellFocused'
    }).blur(function(){
      var val =  $(this).val();
      if(val.charAt(0) !== '#' ) { val = '#' + val;}
      $(this).val(val.toUpperCase());
    });
    
    // initializes wells with correct coloring and hide the color wheel afterwards    
    $(this).focus();
    ColorsController.colorWheel.setColor($(this).val());
    ColorsController.attr('colorPickerShowing', false);
  });
    
  // image preview control views
  $('#image-picker').outlet(ImagesController, 'imagePicker').connect('toggle', 'ImagesController.imagePickerShowing');
  $('#image-picker .close').actions({
    'click' : 'ImagesController.hideImagePicker'
  });
  
  $("#image-picker #clear-image").actions({
    'click' : 'ImagesController.removeImage'
  });
  
  $("#image-picker #repeat-image").actions({
    'click' : 'ImagesController.toggleImageRepeat'
  });
  
  $('#theme_tile_background').connect('checked', 'ImagesController.backgroundImageRepeat');
  $('#theme_image_url').connect('val', 'ImagesController.backgroundImageUrl');
  
  $("#image-picker #new").connect('toggle', 'ImagesController.newImageShowing');
  $("#image-picker #existing")
    .connect('toggle', 'ImagesController.newImageShowing', ValueTransformers.Booleans.Reverse)
    .connect('css','ImagesController.backgroundImageUrl', ImagesController.Transforms.imageCSS);
  
  $("#image-picker #new .remote").outlet(ImagesController, 'remoteImages').connect('html', 'ImagesController.images', ImagesController.Transforms.imageGrid);
  
  $('#profile_image').outlet(ImagesController, 'imageInput').blur(function(){
    $(this).val('');
  }).keyup(function(){
    $(this).val('');
  }).actions({
    'focus' : 'ImagesController.showImagePicker'
  }).connect('css', 'ImagesController.backgroundImageUrl', ImagesController.Transforms.imageCSS);
  
  $('.navigation img.forward').outlet(ImagesController, 'forwardButton').actions({
    'click' : 'ImagesController.goForward'
  });
  
  $('.navigation img.back').outlet(ImagesController, 'backButton').actions({
    'click' : 'ImagesController.goBackward'
  });
  
  // render statues
  $('#timeline').hide();
  $.ajax({
    dataType: 'json',
    url: '/preview',
    
    success: function(data){
      // replace default data with actual timeline json
      if(data){
         window.timeline = data
       }
       // render from json
       $('#timeline').autoRender(window.timeline).show();

       // pretty dates
       var dates = $('.published').each(function(){
         $(this).html(new Date($(this).html()).time_ago_in_words());
       });

       // turn plain text urls into <a>
       $('.text.entry-content').each(function(){
         $(this).html($(this).html().replace(/(https?:\/\/[\w\d\.\/]+\b)/g, "<a href='$1'>$1</a>"));
         $(this).html($(this).html().replace(/@(\b[\w\d]+\b)/g, "<a href='http://www.twitter.com/$1'>@$1</a>"));
       })
    }
  });
  
  // remote images
  ImagesController.loadImages();
  
  // background image data initalized  
  ImagesController.attr('backgroundImageUrl', $('#theme_image_url').val());
  ImagesController.attr('newImageShowing', !$('#theme_image_url').val());
  ImagesController.attr('existingImageShowing', !!$('#theme_image_url').val());
  ImagesController.attr('backgroundImageRepeat', $('#theme_tile_background').checked());  
});