var grid = 15; var gcolor = '#ff0000'; var href = false; window.addEvent('domready', function() { $$('.pixel').makeDraggable({ 'grid': grid
}); $('hello').makeDraggable()
$('x').addEvent('click', function(e){ e.stop(); $('hello').destroy();}); $('loading').fade(0.7); $('hello').addEvent('click', function(e){ e.stop();}); $$('.pixel').pixelEvents(); var form = new Element('form', { 'action': 'save.php', 'method': 'post', 'send': { 'onSuccess': function(res){ alert(res); $('loading').fade(0);}, 'onRequest': function(){ $('loading').fade(0.7);}
}
}); $$('a').addEvent('click', function(e){ e.stop(); if(!this.hasClass('btn'))
window.location.href = this.get('href');}); var txt = new Element('textarea', { 'name': 'json'
}).inject(form); var ida = (/\#(\d+)/).exec(location.href); if(ida && ida[1])
releasePic(ida[1]); else{ var jsonRequest = new Request({url: "get.php", onComplete: function(res){ releasePic(res);}}).get();}
document.addEvent('click', function(e) { var bgcolor = gcolor; if(e.shift) bgcolor = "#ffffff"; else if(e.alt) bgcolor = "#000000"; if(getGridCord(e.page.y) < grid*2) return true; var pixel = new Element('div', { 'class': 'pixel', 'styles': { 'left': getGridCord(e.page.x), 'top': getGridCord(e.page.y), 'background-color': bgcolor
}
}).inject('pixels'); pixel.makeDraggable({ 'grid': grid
}); pixel.pixelEvents();}); $('save').addEvent('click', function(e) { e.stop(); var pixels = $$('.pixel'); var styles = new Array(); var jsn = '['; $$('.pixel').each(function(pixel){ jsn += JSON.encode({'l': pixel.getStyle('left'), 't': pixel.getStyle('top'), 'b': pixel.getStyle('background-color')}); jsn += ',';}); jsn = jsn.replace(/,$/, ''); jsn += ']'; txt.set('value', jsn); form.send();}); $('clear').addEvent('click', clearPic);}); function releasePic(id){ clearPic(); var jsonRequest = new Request.JSON({url: "saves/"+ id +'.json', onComplete: function(pixels){ $('loading').fade(0); $$('.cap').fade(0.9); pixels.each(function(params){ var styles = {'left': params.l, 'top': params.t, 'background-color': params.b}; var pixel = new Element('div', { 'class': 'pixel', 'styles': styles
}).inject('pixels'); pixel.makeDraggable({ 'grid': grid
}); pixel.pixelEvents();});}}).get();}
function clearPic(e){ if(e) e.stop(); $$('.pixel').destroy();}
function getGridCord(c){ if(c < grid) return 0; return Math.floor(c/grid) * grid;}
Native.implement([Element, Document], { pixelEvents: function(){ this.addEvents({ 'mousewheel': function(e){ e.stop(); var background = this.getStyle('background-color'); var color = new Color(background).hsb; var newcolor = color; var hue = color[0]; if(e.wheel < 0){ hue += 5; if (hue > 360)
hue = 0;}
else{ hue -= 5; if (hue < 0)
hue = 360;}
newcolor[0] = hue; gcolor = newcolor.hsbToRgb().rgbToHex(); this.setStyle('background-color', gcolor);}, 'click' : function(e){ e.stop();}, 'dblclick' : function(e){ e.stop(); this.destroy();}
}); return this;}
});