$(function(){
var maxSchemes = 20;
var canEdit = false;
var canvas;
var img;
var colorArray;
var activeXa;
var activeXb;
var activeYa;
var activeYb;
var dohover = false;
var whichImage = "/projects/colorschemer/images/pier.jpg";
loadWait(whichImage);
function loadWait(imgToSet){
$('#image-wrapper').append('');
$('#image-wrapper img').load(function(){
setImage();
$('#scheme-form').fadeIn(function(){
createScheme(2);
});
});
}
function setImage(){
/* GET SWATCHES */
$('#image-wrapper').append('');
canvas = document.getElementById('super-color-canvas').getContext('2d');
// create an image object and get it’s source
img = new Image();
img.src = $('#image-wrapper img').attr('src');
// copy the image to the canvas
$(img).load(function() {
colorArray = [];
canvas.drawImage(img, 0, 0);
$('#scheme-wrapper').empty();
dohover = true;
});
activeXa = $('#image-wrapper canvas').offset().left;
activeXb = $('#image-wrapper canvas').offset().left + $('#image-wrapper canvas').width();
activeYa = $('#image-wrapper canvas').offset().top;
activeYb = $('#image-wrapper canvas').offset().top + $('#image-wrapper canvas').height();
}
$('#generate-btn').click(function(){
createScheme($('#num-to-generate').val());
});
/***********************/
// CREATE COLOR SCHEME //
/***********************/
function createScheme(numToCreate){
var numSchemes = $('.colorscheme').length;
var totalToCreate = parseInt(numSchemes) + parseInt(numToCreate);
var actualToCreate = totalToCreate > maxSchemes ? numToCreate - (totalToCreate - maxSchemes) : numToCreate;
if(actualToCreate > 0){
for (var i = 0; i < actualToCreate; i++) {
$('#scheme-wrapper').append('
');
numSchemes = $('.colorscheme').length;
for (var j = 0; j < 5; j++) {
// getting user coordinates
var x = Math.floor(Math.random() * (img.offsetLeft + img.width)) + img.offsetLeft;
var y = Math.floor(Math.random() * (img.offsetTop + img.height)) + img.offsetTop;
// getting image data and RGB values
var img_data = canvas.getImageData(x, y, 1, 1).data;
var R = img_data[0];
var G = img_data[1];
var B = img_data[2];
var rgb = R + ',' + G + ',' + B;
// convert RGB to HEX
var hex = rgbToHex(R, G, B);
// making the color the value of the input
colorArray.push("#" + hex);
$('.colorscheme').eq(numSchemes - 1).append('');
}
colorArray = [];
}
if(actualToCreate == 1){
$('#error-message').css("opacity", 1).html('1 color scheme created — Total color schemes: '+numSchemes+'/20').delay(2000).animate({
opacity: 0
});
}else{
$('#error-message').css("opacity", 1).html(actualToCreate+' color schemes created — Total color schemes: '+numSchemes+'/20').delay(2000).animate({
opacity: 0
});
}
}else{
$('#error-message').css("opacity", 1).html('0 color schemes created — Max of 20 color schemes allowed').delay(2000).animate({
opacity: 0
});
}
};
// ALLOWING COLOR EDITING FROM IMAGE
$('#image-wrapper').hover(function(){
$('#image-wrapper').mousemove(function(e){
var mouseX = e.pageX;
var mouseY = e.pageY;
if(mouseX > activeXa && mouseX < activeXb && mouseY > activeYa && mouseY < activeYb){
canEdit = true;
}else{
canEdit = false;
}
});
}, function(){
canEdit = false;
});
/***********************/
// REMOVE COLOR SCHEME //
/***********************/
$('#scheme-wrapper').on('click', '.remove-scheme', function(){
$(this).parent().remove();
});
/**********************/
// TOGGLE STARRED/NOT //
/**********************/
$('#scheme-wrapper').on('click', '.star-scheme', function(){
$(this).toggleClass('starred');
});
/*********************/
// EDIT SWATCH COLOR //
/*********************/
//focus on input - add "edit" class
$('#scheme-wrapper').on('click', '.colorscheme input', function(){
$('#scheme-wrapper .colorscheme span.edit').removeClass('edit');
$(this).parent().addClass('edit');
});
// lose focus on input - remove "edit" class
$('#scheme-wrapper').on('focusout', '.colorscheme span.edit input', function(){
if(canEdit == false){
$('#scheme-wrapper .colorscheme span.edit').removeClass('edit');
}
});
// changing value manually
$('#scheme-wrapper').on('keyup', '.colorscheme input', function(){
var newColor = $(this).val();
$(this).parent().css('background', newColor);
});
// changing value by click
/********************/
// HOVER OVER IMAGE //
/********************/
var hoverHex
$(window).mousemove(function(e){
if(dohover){
var mouseX = e.pageX;
var mouseY = e.pageY;
var x = mouseX - activeXa;
var y = mouseY - activeYa;
if(mouseX > activeXa && mouseX < activeXb && mouseY > activeYa && mouseY < activeYb){
var img_data = canvas.getImageData(x, y, 1, 1).data;
var R = img_data[0];
var G = img_data[1];
var B = img_data[2];
var rgb = R + ',' + G + ',' + B;
// convert RGB to HEX
hoverHex = rgbToHex(R, G, B);
$('#hover-wrapper').show().css({
top: mouseY,
left: mouseX,
background: "#"+hoverHex
});
}else{
$('#hover-wrapper').hide();
}
}
});
$('#image-wrapper').on('click', 'canvas', function(){
$('#scheme-wrapper .edit input').val('#'+hoverHex).focus();
$('#scheme-wrapper .edit').css('background', '#'+hoverHex);
});
// http://www.javascripter.net/faq/rgbtohex.htm
function rgbToHex(R, G, B) {
return toHex(R) + toHex(G) + toHex(B)
}
function toHex(n) {
n = parseInt(n, 10);
if (isNaN(n)) return "00";
n = Math.max(0, Math.min(n, 255));
return "0123456789ABCDEF".charAt((n - n % 16) / 16) + "0123456789ABCDEF".charAt(n % 16);
}
})