$(document).ready(function () {

  $('p.example_1').html(
    '<input type="color" />'
  );
  $('p.example_2').html(
    '<input type="color" value="#ff0667" />'
  );
  $('p.example_3').html(
    '<input type="color" value="#ff0667" hex="true" />'
  );
  $('p.example_4').html(
    '<input type="color" value="#ff0667" text="hidden" style="height:20px;width:20px;" />'
  );
  $('p.example_5').html(
    '<input id="color_5" type="color" value="#ff0667" text="hidden" style="height:20px;width:20px;" />'
  );
  $('input').filter(function(index) {

    return this.getAttribute("type") == 'color';
  }).mColorPicker();
  $('form#colorPicker').bind('submit', function () {

    alert($(this).serialize());
    return false;
  });
  $('#color_5').bind('colorpicked', function () {

    alert($(this).val());
  });
});