/*
* @title カラーピッカーを作ってみる
* @description ほげぇ
* @include http://*
* @license MIT License
* @private
* @require
*/
(function(){
var TEST_MODE = true;
var NS = 'sa-ka-na.info,2010/js/ColorPicker';
var HTML_Container =
"<div class='tabs' " +
" ><span class='tabHsv tab'>HSV</span " +
"></div " +
"><div class='panes' " +
" ><div class='paneHsv pane' " +
" ><canvas class='canvasHSV_H' " +
" width='256' " +
" height='16' " +
" ></canvas " +
" ><canvas class='canvasHsv_SV' " +
" width='256' " +
" height='256'></canvas></div " +
" ></div" +
">";
var walkNode = function(node, cb){
switch(cb(node)){
case 'BREAK':
return 'BREAK';
case 'STOP':
return undefined;
}
var cn = node.childNodes;
for(var i=0, l = cn ? cn.length : 0; i < l; i++){
switch(walkNode(cn[i],cb)){
case 'BREAK':
return 'BREAK';
case 'STOP':
return 'STOP';
}
}
return undefined;
};
var walkElem = function(elem, cb){
walkNode(
elem, function(node){
if(node.nodeType !== document.ELEMENT_NODE) return undefined;
return cb(node);
}
);
};
var makeClassNameDic = function(elem){
var dic = {};
walkElem(
function(elem){
if(elem.className){
var cns = className.split(/\s+/);
cns.forEach(
function(cn){
if(cn.length){
if(dic[cn]){
dic[cn].push(elem);
} else {
dic[cn] = [elem];
}
}
}
);
}
}
);
return dic;
};
var makeContainer = function(){
var container = document.createElement('div');
container.innerHTML = HTML_Container;
return {
root: container,
elements: makeClassNameDic(container),
element: function(name){ return this.elements[name][0]; }
};
};
var initHsvTab = function(container, cb){
var canvasSV = container.element('canvasHsv_SV');
var contextSV = canvasSV.getContext('2d');
var SVs = [];
var H = 0;
var S = 0;
var V = 0;
var makeSV = function(data, h){
for(var y = 0; y < 256; y ++){
for(var x = 0; x < 256; x ++){
}
}
};
var updateSv = function(h){
if(!SVs[h]){
var imageData = contextSV.createImageData();
makeSV(imageData.data, h);
SVs[h] = imageData;
}
canvasSV.setImageData(SVs[h]);
};
updateSv(h);
};
var createColorPicker = function(cb){
var container = makeContaienr();
initHsvTab(container, cb);
return container.root;
};
var showColorPicker = function(cb){
var picker = createColorPicker(cb);
document.body.appendChild(picker);
picker.style.cssText =
"position: fixed;" +
" z-index: 65536;" +
" top: " + ((window.innerHeight - picker.clientHeight) / 2)+ "px;" +
" left: " + ((window.innerWidth - picker.clientWidth) / 2)+ "px;" +
"";
};
if(TEST_MODE){
}
window[NS] = {
create: createColorPicker,
show: showColorPicker
};
})();
