function YouDrawIt() {
this.replace = false;
this.outputType = 'BBCode';
this.IE = document.all?true:false;
this.imagePath = '/images';
this.postURL = 'http://wiki-art.fokdat.nl/Public/draw.php';
this.output = null;
this.filename = null;
this.colors = null;
this.touch = false;
this.windowType = 'overlay';
this.color = new Array();
this.colorHex = new Array();
this.selectedColor = 0;
this.height = 500;
this.width = 500;
this.inputWidth = 50;
this.inputHeight = 50;
// this.pixel = 10;
}
YouDrawIt.prototype.setBackgroundImage = function( image ){
this.backgroundImage = image;
}
YouDrawIt.prototype.setFilename = function( filename ){
this.filename = filename;
}
YouDrawIt.prototype.getFilename = function(){
if( this.filename ) {
return this.filename;
}
var d = new Date();
return d.getUTCFullYear()+'-'+(d.getUTCMonth()+1)+'-'+d.getUTCDate()+'_'+
d.getUTCHours()+'-'+d.getUTCMinutes()+'-'+d.getUTCSeconds()+'-'+d.getUTCMilliseconds()+'.png';
}
YouDrawIt.prototype.setBackgroundColor = function( color ) {
this.backgroundColor = color;
}
YouDrawIt.prototype.setOutputReplace = function( replace ) {
this.replace = replace;
}
YouDrawIt.prototype.setOutputElement = function( outputElement ) {
if( typeof outputElement == 'string' )
this.output = document.getElementById( outputElement );
else
this.output = outputElement;
if( !this.output )
alert('YouDrawIt: unable to find output element');
}
YouDrawIt.prototype.setOutputGeometry = function( outputGeometry ) {
outputGeometry = outputGeometry.split(/x/);
this.outputWidth = outputGeometry[0];
this.outputHeight = outputGeometry[1];
}
YouDrawIt.prototype.setInputGeometry = function( inputGeometry ) {
inputGeometry = inputGeometry.split(/x/);
this.inputWidth = inputGeometry[0];
this.inputHeight = inputGeometry[1];
}
YouDrawIt.prototype.setImagePath = function( url ) {
this.imagePath = url;
}
YouDrawIt.prototype.setPostURL = function( url ) {
this.postURL = url;
}
YouDrawIt.prototype.setOutputType = function( type ) {
this.outputType = type;
}
YouDrawIt.prototype.setPixelSize = function( pixel ) {
this.pixel = pixel;
}
YouDrawIt.prototype.setWindowType = function( windowType ) {
this.windowType = windowType;
}
YouDrawIt.prototype.createElement = function( element )
{
if( this.windowType == 'window' )
return this.windowFrame.document.createElement( element );
return document.createElement( element );
}
YouDrawIt.prototype.openWindow = function() {
// The width of a single pixel
this.pixelWidth = Math.floor( this.width / this.inputWidth );
// recalculate width
this.width = this.pixelWidth * this.inputWidth;
// keep the pixel height the same as width;
this.pixelHeight = this.pixelWidth;
this.height = this.pixelHeight * this.inputHeight;
// the number of pixels on the y and x axis;
this.yPixels = this.inputHeight;
this.xPixels = this.inputWidth;
if( this.windowType == 'window')
{
var windowFrame = window.open('', '', "height=524,width=626,scrolling=no");
windowFrame.document.title = 'YouDrawIt!';
//windowFrame.document.open('text/html','replace');
//windowFrame.document.write('');
// Looks like this is only needed for epiphany. FireFox can handle it as well. IE probably not.
if( !this.IE )
{
windowFrame.document.write('YouDrawIt');
windowFrame.document.close();
}
// epiphany end //
// windowFrame.document.body.appendChild(this.createElement('hr'));
// windowFrame.document.body.appendChild(windowDiv);
this.windowFrame = windowFrame;
}
// window div
var windowDiv = this.createElement('div');
windowDiv.style.cursor = 'default';
windowDiv.style.position = 'absolute';
windowDiv.style.backgroundColor = 'white';
//windowDiv.style.left = '200px';
windowDiv.style.top = '10px';
windowDiv.style.zIndex = '100';
if( this.touch ){
windowDiv.style.width = '280px';
windowDiv.style.height = '400px';
} else {
windowDiv.style.width = '624px';
windowDiv.style.height = '522px';
}
windowDiv.style.border = '1px solid black';
if( this.windowType == 'window' ) {
windowDiv.style.left = '0px';
windowDiv.style.top = '0px';
this.windowFrame.document.body.appendChild(windowDiv);
this.windowFrame.document.onselectstart = function() {return false;} // ie
this.windowFrame.document.onmousedown = function() {return false;} // mozilla
} else {
document.body.appendChild(windowDiv);
}
// toolbox div
var toolDiv = this.createElement('div');
if( this.touch ){
toolDiv.style.height = '90px';
toolDiv.style.width = '300px';
} else {
toolDiv.style.height = '500px';
toolDiv.style.width = '90px';
}
toolDiv.style.border = '1px solid';
toolDiv.style.margin = '10px';
toolDiv.style.marginRight = '0px';
toolDiv.style.cssFloat = 'left';
toolDiv.style.styleFloat = 'left'; // IE SUCKS
toolDiv.appendChild(this.getToolImage( 'paint', 'pencil.png' ));
//toolDiv.appendChild(this.getToolImage( 'eyedropper', 'picker.png' ));
// toolDiv.appendChild(this.getToolImage( 'erase', 'eraser.png' ));
toolDiv.appendChild(this.getToolImage( 'fill', 'fill.png' ));
toolDiv.appendChild(this.createElement('hr'));
toolDiv.lastChild.style.clear = 'both';
toolDiv.lastChild.style.border = 'none';
toolDiv.lastChild.style.borderTop = '1px solid';
toolDiv.lastChild.style.width = '80px';
toolDiv.lastChild.style.margin = '0px auto';
toolDiv.lastChild.style.marginTop = '5px';
toolDiv.lastChild.style.marginBottom = '5px';
if( !this.colors ){
toolDiv.appendChild(this.getColorSelector(0));
toolDiv.appendChild(this.getColorSelector(1));
if( this.backgroundColor ) {
if( this.backgroundColor == 'transparent' ) {
this.setColor( 1, '#ffffff');
} else {
this.setColor( 1, this.backgroundColor );
}
} else {
this.setColor( 1, this.rgb2hex( 'rgb('+Math.floor(Math.random() * 254) + ',' + Math.floor(Math.random() * 254) + ',' + Math.floor(Math.random() * 254 )+')' ) );
}
this.setColor( 0, this.rgb2hex( 'rgb('+Math.floor(Math.random() * 254) + ',' + Math.floor(Math.random() * 254) + ',' + Math.floor(Math.random() * 254 )+')' ) );
}
toolDiv.appendChild(this.createElement('hr'));
toolDiv.lastChild.style.clear = 'both';
toolDiv.lastChild.style.border = 'none';
toolDiv.lastChild.style.borderTop = '1px solid';
toolDiv.lastChild.style.width = '80px';
toolDiv.lastChild.style.margin = '0px auto';
toolDiv.lastChild.style.marginTop = '5px';
toolDiv.lastChild.style.marginBottom = '5px';
if( this.colors != null ){
for( var i=0; i < this.colors.length; i++ ){
var colorDiv = this.createElement('div');
colorDiv.style.width = '40px';
colorDiv.style.marginLeft = '2px';
colorDiv.style.marginBottom = '2px';
colorDiv.style.height = '30px';
colorDiv.style.cssFloat = 'left';
colorDiv.style.styleFloat = 'left';
colorDiv.style.backgroundColor = this.colors[i];
colorDiv.style.border = '1px solid black';
if( i == 0 ){
//colorDiv.style.borderWidth = '2px';
}
colorDiv.onclick = function(event){
var target = this.getTarget(event);
this.selectedColor = target.style.backgroundColor;
}.bind(this);
toolDiv.appendChild( colorDiv );
}
} else {
var red = this.getColorSlider( 'red' );
toolDiv.appendChild( red );
var green = this.getColorSlider( 'green' );
toolDiv.appendChild( green );
var blue = this.getColorSlider( 'blue' );
toolDiv.appendChild( blue );
this.red = red.firstChild;
this.green = green.firstChild;
this.blue = blue.firstChild;
this.updateScrollbars( this.color[0].style.backgroundColor );
}
var iFrameID = 'YouDrawItFrame';
if( !this.IE )
{
var iframe = this.createElement('iframe');
iframe.name = iFrameID;
iframe.setAttribute('id', iFrameID);
iframe.scrolling = 'no';
iframe.style.width = '70px';
iframe.style.height = '70px';
iframe.style.padding = '0px';
iframe.style.marginLeft = '5px';
iframe.setAttribute('frameborder', '0');
iframe.src = 'start.html';
toolDiv.appendChild(iframe);
}
else // IE CRAPPY COLUTION
{
var tempDiv = this.createElement('div');
tempDiv.innerHTML = tempDiv.innerHTML + '';
toolDiv.appendChild( tempDiv );
}
var form = this.createElement('form');
form.target = 'YouDrawItFrame';
form.setAttribute('method', 'POST');
form.setAttribute('action', this.postURL);
var imageString = this.createElement('input');
imageString.setAttribute('name', 'ImageString');
imageString.value = 'empty';
imageString.setAttribute('type', 'hidden');
form.appendChild( imageString );
var filenameString = this.createElement('input');
filenameString.setAttribute('name', 'filename');
filenameString.setAttribute('type', 'hidden');
filenameString.value = 'empty';
form.appendChild( filenameString );
var inputGeometryString = this.createElement('input');
inputGeometryString.setAttribute('type', 'hidden');
inputGeometryString.setAttribute('name', 'InputGeometry');
inputGeometryString.setAttribute('value', this.inputWidth + 'x' + this.inputHeight)
form.appendChild(inputGeometryString);
if( this.outputWidth && this.inputWidth )
{
var outputGeometryString = this.createElement('input');
outputGeometryString.setAttribute('type', 'hidden');
outputGeometryString.setAttribute('name', 'OutputGeometry');
outputGeometryString.setAttribute('value', this.outputWidth + 'x' + this.outputHeight)
form.appendChild(outputGeometryString);
}
this.filenameString = filenameString;
this.imageString = imageString;
var previewButton = this.createElement('input');
previewButton.setAttribute('name', 'ViewImage');
previewButton.setAttribute('type', 'submit');
previewButton.value = 'View';
previewButton.title = 'Preview image in real size';
previewButton.style.font = '7pt Verdana';
previewButton.style.width = '39px';
previewButton.style.cssFloat = 'left';
previewButton.style.styleFloat = 'left'; // IE SUCKS
previewButton.style.marginLeft = '6px';
previewButton.style.padding = '2px';
var saveButton = this.createElement('input');
saveButton.setAttribute('name', 'SaveImage');
saveButton.setAttribute('type', 'submit');
saveButton.value = 'Save';
saveButton.title = 'Save image to server and add to the page';
saveButton.style.font = '7pt Verdana';
saveButton.style.width = '39px';
saveButton.style.cssFloat = 'left';
saveButton.style.styleFloat = 'left';
saveButton.style.padding = '2px';
form.appendChild( previewButton );
form.appendChild( saveButton );
previewButton.onclick = function( e )
{
this.filenameString.value = this.getFilename();
this.imageString.value = this.getImageString();
return true;
}.bind(this);
saveButton.onclick = function( e )
{
saveButton.disabled = true;
this.imageString.value = this.getImageString();
this.filenameString.value = this.getFilename();
setTimeout( function() {
this.callback();
}.bind(this),
500
);
form.submit(); // submit form by hand, IE and Safari do not submit form while submit button is disabled
return false;
}.bind(this);
form.onsubmit = function( e )
{
//alert('form submitted');
}
toolDiv.appendChild( form );
if( this.IE && this.windowType == 'overlay' && document.compatMode == "BackCompat") // IE sucks, doctype crap
{
//toolDiv.style.width = '85px';
this.height = this.height + 2;
this.width = this.width + 2;
}
if( this.IE && this.windowType == 'window' )
this.width = this.width + 2;
// background div ( draw canvas )
var bgDiv = this.createElement('div');
bgDiv.style.cursor = 'default';
bgDiv.style.border = '1px solid black';
bgDiv.style.height = this.height + 'px';
bgDiv.style.width = this.width + 'px';
bgDiv.style.margin = '10px';
bgDiv.style.cssFloat = 'left';
bgDiv.style.styleFloat = 'left'; // IE SUCKS
if ( this.backgroundColor == 'transparent' ) {
bgDiv.style.backgroundImage = 'url(http://wiki-art.fokdat.nl/Public/transparant.gif)';
}
if( this.backgroundImage ){
bgDiv.style.backgroundImage = 'url('+this.backgroundImage+')';
}
var i = 0;
// all pixels
for (var y = 0; y < this.yPixels; y++) {
for (var x = 0; x < this.xPixels; x++) {
pixDiv = this.createElement('div');
//bgDiv.lastChild.style.backgroundColor = pix[i];
if( this.colors ){
} else {
if( this.backgroundColor != 'transparent' && !this.backgroundImage) {
pixDiv.style.backgroundColor = this.color[1].style.backgroundColor;
}
}
pixDiv.style.cursor = 'default';
pixDiv.style.width = this.pixelWidth+'px';
pixDiv.style.height = this.pixelHeight+'px';
pixDiv.style.font = '0px Verdana'; // needed for IE
pixDiv.style.cssFloat = 'left';
pixDiv.style.styleFloat = 'left'; // IE SUCKS
/*pixDiv.onmouseover = function( e ) {
var target = this.getTarget( e );
//target.style.opacity = '.8';
}.bind(this);
pixDiv.onmouseout = function( e ) {
var target = this.getTarget( e );
//target.style.opacity = '1';
}.bind(this);*/
bgDiv.appendChild(pixDiv);
i++;
}
}
if( this.touch ){
bgDiv.ontouchstart = function( e ) {
this.startP( e );
return false;
}.bind(this);
bgDiv.ontouchmove = function( e ) {
this.p( e );
return false;
}.bind(this);
windowDiv.ontouchend = function( e ) {
this.stopP();
return false;
}.bind(this);
} else {
bgDiv.onmousedown = function( e ) {
this.startP( e );
return false;
}.bind(this);
bgDiv.onmousemove = function( e ) {
this.p( e );
return false;
}.bind(this);
windowDiv.onmouseup = function( e ) {
this.stopP();
return false;
}.bind(this);
}
this.bgDiv = bgDiv;
windowDiv.appendChild(toolDiv);
this.toolDiv = toolDiv;
windowDiv.appendChild(bgDiv);
if( !this.colors ){
this.scrollTopLoc = this.findPos( red )[1];
}
/* if( this.windowType == 'window' )
{
if( this.IE )
{
//this.windowFrame.document.write('YouDrawIt' + windowDiv.outerHTML + '');
}
this.windowFrame.document.close();
}*/
this.windowDiv = windowDiv;
return false;
}
YouDrawIt.prototype.updateScrollbars = function( rgb )
{
if( rgb.substring( 0, 1 ) == '#' ) // IE sends as hex
{
rgb = this.hex2rgb( rgb );
}
var c = rgb.split('rgb(');
var c2 = c[1].split(')');
num = c2[0].split(',');
this.red.style.height=num[0]+'px';
this.red.style.marginTop=255-num[0]+'px';
this.green.style.height=num[1]+'px';
this.green.style.marginTop=255-num[1]+'px';
this.blue.style.height=num[2]+'px';
this.blue.style.marginTop=255-num[2]+'px';
}
YouDrawIt.prototype.getColorSelector = function( num )
{
var color = new Array();
var colorHex = new Array();
colorHex[num] = this.createElement('input');
colorHex[num].setAttribute('type', 'text');
colorHex[num].setAttribute('name', 'colorhex1');
colorHex[num].style.font = '10px Verdana';
colorHex[num].style.padding = '0px';
colorHex[num].style.border = '1px solid white';
colorHex[num].style.width = '52px';
colorHex[num].style.height = '15px';
colorHex[num].style.margin = '3px';
colorHex[num].style.marginTop = '0px';
colorHex[num].style.cssFloat = 'left';
colorHex[num].style.styleFloat = 'left'; // IE SUCKS
color[num] = this.createElement('div');
color[num].style.width = '15px';
color[num].style.height = '15px';
color[num].style.cssFloat = 'left';
color[num].style.styleFloat = 'left'; // IE SUCKS
color[num].style.border = '1px solid white';
color[num].style.cursor = 'pointer';
if( num == 0)
{
color[num].style.borderColor = 'black';
colorHex[num].style.borderColor = 'black';
}
color[num].onclick = function( e )
{
this.color[num].style.borderColor = 'black';
this.colorHex[num].style.borderColor = 'black';
var otherNum = 0;
if( num == 0 )
otherNum = 1;
this.selectedColor = num;
this.otherColor = otherNum;
this.color[otherNum].style.borderColor = 'white';
this.colorHex[otherNum].style.borderColor = 'white';
this.updateScrollbars( this.color[num].style.backgroundColor );
}.bind(this);
this.color[num] = color[num];
this.colorHex[num] = colorHex[num];
var div = this.createElement('div');
div.style.margin = '0px auto';
div.appendChild( colorHex[num] );
div.appendChild( color[num] );
return div;
}
YouDrawIt.prototype.startP = function( e ) {
this.doPaint = true;
this.p( e );
}
YouDrawIt.prototype.stopP = function( e ) {
this.doPaint = false;
this.dragTarget = null;
}
YouDrawIt.prototype.fill = function( origColor, color, node ){
var node;
var upNode = node;
var downNode = node;
var i = 0;
while( i < this.inputHeight )
{
if( upNode == undefined || downNode == undefined)
return true;
upNode = upNode.previousSibling;
downNode = downNode.nextSibling;
i++;
}
if ( origColor != node.style.backgroundColor ){
return true;
} else {
node.style.backgroundColor = color;
if( node.nextSibling != undefined )
this.fill( origColor, color, node.nextSibling ); // right
if( upNode != undefined )
this.fill( origColor, color, upNode ); // up
if( node.previousSibling != undefined )
this.fill( origColor, color, node.previousSibling ); // left
if( downNode != undefined )
this.fill( origColor, color, downNode ); // down
return true;
}
}
YouDrawIt.prototype.getSelectedColor = function()
{
if( this.colors ){
return this.selectedColor;
}
return this.color[this.selectedColor].style.backgroundColor;
}
YouDrawIt.prototype.p = function(e){
if( this.doPaint ){
var target = this.getTarget(e);
var selColor = this.getSelectedColor();
// this.toolDiv.innerHTML += '.' + e.targetTouches;//[0].pageX;//.target.getAttribute('oi');
if( this.tool == "fill" ){
var origColor = target.style.backgroundColor;
this.doPaint = false;
this.fill( origColor, selColor, target );
} else if( this.tool == "eyedropper" ){
var color = target.style.backgroundColor;
if(!color) {
color = backgroundTarget.style.backgroundColor;
}
doPaint = false;
this.setColor( this.selectedColor, color );
} else if( this.tool == "toggle" && target.style.backgroundColor ) {
if (target.style.backgroundColor == selColor) {
target.style.backgroundColor = othColor;
} else {
target.style.backgroundColor = selColor;
}
} else if( this.tool == "erase" ){ //TODO make this a first color, second color toggle
target.style.backgroundColor = document.getElementById('color2').style.backgroundColor;
} else {
target.style.backgroundColor = selColor;
}
/* if(document.getElementById('size').checked == 1){
//TODO fix size
var color=document.getElementById('color').value;
var array =id.split(',');
var x=array[0];
var y=array[1];
for(var i=-1; i<=1; i++){
x=i+x;
document.getElementById(x+','+y).style.backgroundColor=color;
for(var a=-1; a<=1; a++){
y=a+y;
document.getElementById(x+','+y).style.backgroundColor=color;
}
}
}*/
}
}
YouDrawIt.prototype.setColors = function( colors ){
this.colors = colors;
}
YouDrawIt.prototype.setColor = function( num, color )
{
this.color[num].style.backgroundColor = color;
this.colorHex[num].value = this.rgb2hex( color );
}
YouDrawIt.prototype.callback = function()
{
if( !this.output )
{
alert('no outputElement defined.');
return;
}
var img = this.filenameString.value;
var target = this.output;
if( this.outputType == 'HTML' )
{
var str = '
'
if( !this.replace )
if( target.tagName == 'TEXTAREA' )
target.value = target.value + str;
else
target.innerHTML = target.innerHTML + str;
else
if( target.tagName == 'TEXTAREA' )
target.value = str;
else
target.innerHTML = str;
}
else if( this.outputType == 'BBCode' )
{
var str = '[img]' + this.imagePath + '/' + img+'[/img]';
if( !this.replace )
if( target.tagName == 'TEXTAREA' )
target.value = target.value + str;
else
target.innerHTML = target.innerHTML + str;
else
if( target.tagName == 'TEXTAREA' )
target.value = str;
else
target.innerHTML = str;
}
else if( this.outputType == 'text' )
{
target.value = this.imagePath + '/' + img;
}
this.onSave( img );
if( this.windowType == 'window' )
this.windowFrame.close();
else
this.windowDiv.parentNode.removeChild( this.windowDiv );
}
YouDrawIt.prototype.onSave = function( img ){
// can be overridden
}
YouDrawIt.prototype.setTool = function( name ){
this.tool = name;
}
YouDrawIt.prototype.getToolImage = function( name, image ){
var img = this.createElement('img');
img.setAttribute('src', 'http://wiki-art.fokdat.nl/gfx/' + image);
// img.style.margin = '2px';
img.style.border = '1px solid white';
img.style.margin = '2px';
img.style.marginBottom = '0px';
img.onclick = function( e ) {
for( var i=0; i<4; i++ )
img.parentNode.childNodes[i].style.borderColor = 'white';
img.style.borderColor = 'black';
this.setTool( name );
}.bind(this);
return img;
}
YouDrawIt.prototype.getColorSlider = function( color )
{
var div = this.createElement('div');
div.className = 'parent';
div.style.cssFloat = 'left';
div.style.styleFloat = 'left'; // IE SUCKS
div.style.height = '255px';
div.style.width = '20px';
div.style.margin = '2px';
div.style.border = '1px solid';
div.onmousedown = function( e ){
this.dragTarget = this.getTarget( e );
if( this.dragTarget.className == 'parent' )
this.dragTarget = this.dragTarget.firstChild;
this.drag( e );
}.bind(this);
div.onmousemove = function( e ){
this.drag( e );
}.bind(this);
var handleDiv = this.createElement('div');
handleDiv.style.marginTop = '127px';
handleDiv.style.backgroundColor = color;
handleDiv.style.height = '128px';
handleDiv.style.width = '20px';
/*handleDiv.onmousedown = function( e ){
YouDrawIt.prototype.dragTarget = YouDrawIt.prototype.getTarget( e ).firstChild;
YouDrawIt.prototype.drag( e );
};
div.onmousemove = function( e ){
YouDrawIt.prototype.drag( e );
};*/
div.appendChild( handleDiv );
return div;
}
YouDrawIt.prototype.drag = function( e ){
if( this.dragTarget ) {
if ( this.IE ) {
var useEvent = event;
if( !useEvent )
useEvent = this.windowFrame.event;
tempX = useEvent.clientX;
tempY = useEvent.clientY;
} else {
tempX = e.pageX;
tempY = e.pageY;
}
var height = tempY - this.scrollTopLoc;
this.dragTarget.style.height = 255 - height + 'px';
this.dragTarget.style.marginTop = height + 'px';
var r = this.red.style.height;
var g = this.green.style.height;
var b = this.blue.style.height;
var rgbpix = r+g+b;
rgba = rgbpix.split('px');
var rgb = 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';
this.setColor( this.selectedColor, rgb );
}
}
YouDrawIt.prototype.findPos = function( obj )
{
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}
YouDrawIt.prototype.rgb2hex = function( rgb )
{
if(rgb.substring(0,1) == '#')
{
return rgb;
}
var c = rgb.split('rgb(');
var c2 = c[1].split(')');
var num = c2[0].split(',');
var r = this.calc10to16(num[0]);
var g = this.calc10to16(num[1]);
var b = this.calc10to16(num[2]);
if( r.length < 2 )
r = '0'+r;
if( g.length < 2 )
g = '0'+g;
if( b.length < 2 )
b = '0'+b;
return "#"+r+g+b;
}
YouDrawIt.prototype.calc10to16 = function( num )
{
if (num < 16)
{
var thenum = this.replacevalsreverse(num);
return thenum;
}
else
{
var themod=num % 16;
var thenum=((num-themod) / 16);
thenum = this.replacevalsreverse(thenum);
themod = this.replacevalsreverse(themod);
return ""+thenum+themod;
}
}
YouDrawIt.prototype.replacevalsreverse = function( thenum )
{
if (thenum == 10) { thenum = "a"; }
if (thenum == 11) { thenum = "b"; }
if (thenum == 12) { thenum = "c"; }
if (thenum == 13) { thenum = "d"; }
if (thenum == 14) { thenum = "e"; }
if (thenum == 15) { thenum = "f"; }
return thenum;
}
YouDrawIt.prototype.getTarget = function(event) {
if (!event) {
if( this.windowType == 'window' )
if( this.windowFrame.event )
event = this.windowFrame.event;
else
if (window.event)
event = window.event;
}
var target;
if (event.target != null) {
target = event.target;
} else if (event.srcElement) {
target = event.srcElement;
}
if (target.nodeType == 3) {// Safari bug
target = target.parentNode;
}
return target;
}
YouDrawIt.prototype.getImageString = function()
{
var allPixels = this.bgDiv.childNodes;
var imageString = '';
if( this.IE ) { // Because IE SUCKS
for( var i = 0; i < allPixels.length; i++ )
{
imageString = imageString + this.hex2rgbClean( allPixels[i].style.backgroundColor ) + '|';
}
} else {
for( var i = 0; i < allPixels.length; i++ )
{
if( !allPixels[i].style.backgroundColor )
imageString = imageString + 'T|'; // transparent
else
imageString = imageString + allPixels[i].style.backgroundColor.replace(/ /g,'').replace('rgb(','').replace(')','|');
}
}
return imageString;
}
YouDrawIt.prototype.hex2rgbClean = function( hex ){
if (hex.substring(0,1) == '#') {
hex=hex.substring(1,7);
rgb=parseInt(hex.substring(0,2),16)+','+
parseInt(hex.substring(2,4),16)+','+
parseInt(hex.substring(4,6),16);
return rgb;
} else {
return hex;
}
}
YouDrawIt.prototype.hex2rgb = function( hex ){
return 'rgb('+this.hex2rgbClean( hex )+')';
}
//(function () {
function toArray(pseudoArray) {
var result = [];
for (var i = 0; i < pseudoArray.length; i++)
result.push(pseudoArray[i]);
return result;
}
Function.prototype.bind = function (object) {
var method = this;
var oldArguments = toArray(arguments).slice(1);
return function () {
var newArguments = toArray(arguments);
return method.apply(object, oldArguments.concat(newArguments));
};
}
Function.prototype.bindEventListener = function (object) {
var method = this;
var oldArguments = toArray(arguments).slice(1);
return function (event) {
return method.apply(object, event || window.event, oldArguments);
};
}
//})();