jQuery(document).ready(function(){
  pickerInit();
});

function pickerInit(){
  jQuery('.colour')
    .click( function() { select_colour(this); } )
    .mouseover( function() { show_colour(this); } );
  jQuery('#clear_colour')
    .click( function() { clear_colour(this); } );
}

function clear_colour(obj){
 set_colour('#fff', 'No Colour', 'none');
}

function select_colour(obj){
  id = obj.id.split('_')[2]
  hex = obj.id.split('_')[1]
  set_colour('#'+hex, obj.title, id);
}

function set_colour(hex, title, id){
  jQuery('#colour_field')
    .css( { color: hex } )
    .val(id);
  jQuery('#mini_viewer')
    .css( { background: hex });
  jQuery('#colour_label')
    .text(title);
}

function show_colour(obj){
  id = obj.id.split('_')[2]
  hex = obj.id.split('_')[1] 
  jQuery('#viewer')
    .css( { background: '#' + hex });
  jQuery('#viewer_label')
    .text(obj.title);
}