/**
 * DrowPNG Sample Script
 *
 * @copyright 2008 www.xlune.com.
 * @author xlune 
 * @version 20080222
 */

/* DrowPNG Object */
var DrowPNG = DrowPNG || {};

/* config */
DrowPNG.config = {
	cid: 0,
	libPath: 'http://blog.xlune.com/2008/04/16/up_items/js',
	libs: [
		'swfobject',
		'http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/js/COLOURloversColorPicker.js',
		'http://developer.yahoo.com/yui/build/utilities/utilities.js?_yuiversion=2.5.0',
		'http://developer.yahoo.com/yui/build/slider/slider.js?_yuiversion=2.5.0'
	],
	cssPath: 'http://blog.xlune.com/2008/04/16/up_items/css',
	css: [
		'http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/COLOURloversColorPicker.css',
		'http://developer.yahoo.com/yui/build/fonts/fonts-min.css?_yuiversion=2.5.0'
	],
	initFuncs: [
		'DrowPNG.writeSWF',
		'DrowPNG.colorPickerInit',
		'DrowPNG.YSHOO_Slider'
	],
	phpPath: "http://blog.xlune.com/2008/04/16/up_items/image.php",
	imgPath: "http://blog.xlune.com/2008/04/16/up_items/up_images",
	swfBoxId: 'drow_box',
	swfBox: null,
	swfObj: null,
	swfPath: 'http://blog.xlune.com/2008/04/16/up_items/swf',
	swfName: 'mousegraphy',
	swfInstall: 'expressInstall',
	loaded: false
};


/* init Event */
DrowPNG.init = function(){
	if(!DrowPNG.config.loaded){
		DrowPNG.config.loaded = true;
		var funcs = DrowPNG.config.initFuncs;
		for(var i=0,max=funcs.length; i<max; i++){
			eval(funcs[i]+'();');
		}
	}
};

/* get element */
DrowPNG.getEl = function(_name){
	return document.getElementById(_name);
};

/* get targetBox */
DrowPNG.getBox = function(){
	return this.config.swfBox || document.getElementById(this.config.swfBoxId);
};

/* get swfObj */
DrowPNG.getSwf = function(){
	return this.config.swfObj || document.getElementById(this.config.swfName);
};

/* set boxHeight */
DrowPNG.setHeight = function(h){
	this.getBox().style.height = h + 'px';
};

/* write SWF */
DrowPNG.writeSWF = function(){
	var box = this.getBox();
	if(box){
		var so = new SWFObject(
			this.config.swfPath + '/' + this.config.swfName + ".swf",
			this.config.swfName,
			"350",
			"350",
			"9",
			"#FFFFFF"
		);
		so.addParam("loop", "false");
		so.addParam("menu", "false");
		so.addParam("quality", "high");
		so.addParam("salign", "lt");
		so.addParam("allowScriptAccess", "always");
		so.addParam("wmode", "transparent");
		//so.addVariable("cid", this.config.cid);
		so.useExpressInstall(this.config.swfPath + '/' + this.config.swfInstall + '.swf');
		so.write(box);
	}
};


/* set Size */
DrowPNG.setLineSize = function(_num){
	var obj = this.getSwf();
	if(obj && typeof(obj.setLineSize) != 'undefined') obj.setLineSize(_num);
};
DrowPNG.setLineColor = function(_num){
	var obj = this.getSwf();
	if(obj && typeof(obj.setLineColor) != 'undefined') obj.setLineColor(_num);
};
DrowPNG.setLineAlpha = function(_num){
	var obj = this.getSwf();
	if(obj && typeof(obj.setLineAlpha) != 'undefined') obj.setLineAlpha(_num);
};


/* write PNG */
DrowPNG.base64 = "";
DrowPNG.saveFlg = false;
DrowPNG.writePNG = function(base64){
	this.base64 = base64;
	var cloneBox = DrowPNG.getEl('drow_clone_box');
	var src = 'data:image/png;base64,' + this.base64;
	cloneBox.innerHTML = ([
		'<img src="',
		src,
		'" alt="" />'
	]).join('');
	if(!DrowPNG.saveFlg) DrowPNG.savePNG();
};
DrowPNG.savePNG = function(){
	DrowPNG.saveFlg = true;
	var path = this.config.phpPath;
	var ajax = new DrowPNG.ajax(path,
		function(res, status){
			if(status == "200"){
				var serverBox = DrowPNG.getEl('drow_server_box');
				serverBox.innerHTML = ([
					'<img src="',
					DrowPNG.config.imgPath + "/" + res,
					'" alt="" />'
				]).join('');
			}
			DrowPNG.saveFlg = false;
		}
	);
	ajax.update("png=" + encodeURI(this.base64), "post");
};

/* color picker */
DrowPNG.colorPickerInit = function(){
	_whichField = 'color-picker';
	
	var pickerBox = document.createElement('div');
	pickerBox.setAttribute('id', 'CLCP');
	pickerBox.setAttribute('className', 'CLCP');
	pickerBox.setAttribute('class', 'CLCP');
	document.getElementsByTagName('body').item(0).appendChild(pickerBox);
	
	CLCPHandler = function(_hex){
		DrowPNG.getEl(_whichField).style.backgroundColor = '#'+_hex;
		DrowPNG.setLineColor('0x'+_hex);
		DrowPNG.getEl('color-value').innerHTML = _hex;
	};
	
	_CLCPdisplay = "none"; // Values: "none", "block". Default "none"
	_CLCPisDraggable = true; // Values: true, false. Default true
	_CLCPposition = "absolute"; // Values: "absolute", "relative". Default "absolute"
	_CLCPinitHex = "000000"; // Values: Any valid hex value. Default "ffffff"
	CLCPinitPicker();
	
	var CP = DrowPNG.getEl(_whichField);
	if(window.addEventListener) {
		CP.addEventListener('click', CLCPshowPicker, false);
	} else if (window.attachEvent) {
		CP.attachEvent('onclick', CLCPshowPicker);
	} else {
		CP.onclick = CLCPshowPicker;
	};
};


/* YUI */
DrowPNG.YSHOO_Slider = function(){
	(function() {
		var Event = YAHOO.util.Event,
			Dom   = YAHOO.util.Dom,
			lang  = YAHOO.lang,
			slider, 
			bg="slider-bg", thumb="slider-thumb",
			valuearea="slider-value";

		// The slider can move 0 pixels up
		var topConstraint = 0;

		// The slider can move 200 pixels down
		var bottomConstraint = 200;

		// Custom scale factor for converting the pixel offset into a real value
		var scaleFactor = 0.5;

		var tickSize = 10;

		slider = YAHOO.widget.Slider.getHorizSlider(bg, 
						 thumb, topConstraint, bottomConstraint, tickSize);

		slider.getRealValue = function() {
			var _num = Math.round(this.getValue() * scaleFactor);
			return _num ? _num : 1 ;
		}

		slider.subscribe("change", function(offsetFromStart) {
			if(DrowPNG && typeof(DrowPNG.setLineSize) != 'undefined') DrowPNG.setLineSize(slider.getRealValue());
			Dom.get(valuearea).innerHTML = slider.getRealValue();
		});
		slider.setValue(30, true);
	})();
	(function() {
		var Event = YAHOO.util.Event,
			Dom   = YAHOO.util.Dom,
			lang  = YAHOO.lang,
			slider, 
			bg="slider2-bg", thumb="slider2-thumb",
			valuearea="slider2-value";

		// The slider can move 0 pixels up
		var topConstraint = 0;

		// The slider can move 200 pixels down
		var bottomConstraint = 200;

		// Custom scale factor for converting the pixel offset into a real value
		var scaleFactor = 0.5;

		var tickSize = 20;
		
		slider = YAHOO.widget.Slider.getHorizSlider(bg, 
						 thumb, topConstraint, bottomConstraint, tickSize);

		slider.getRealValue = function() {
			return this.getValue() * scaleFactor / 100;
		}

		slider.subscribe("change", function(offsetFromStart) {
			if(DrowPNG && typeof(DrowPNG.setLineAlpha) != 'undefined') DrowPNG.setLineAlpha(slider.getRealValue());
			Dom.get(valuearea).innerHTML = slider.getRealValue();
		});
		slider.setValue(200, true);
	})();
};


/**
 * Simple Ajax function
 * http://www.hunlock.com/blogs/Ten_Javascript_Tools_Everyone_Should_Have
 */
DrowPNG.ajax = function(url, callbackFunction) {
	var that=this;
	this.updating = false;
	this.abort = function() {
		if (that.updating) {
			that.updating=false;
			that.AJAX.abort();
			that.AJAX=null;
		}
	}
	this.update = function(passData,postMethod) {
		if (that.updating) { return false; }
		that.AJAX = null;
		if (window.XMLHttpRequest) {
			that.AJAX=new XMLHttpRequest();
		} else {
			that.AJAX=new ActiveXObject("Microsoft.XMLHTTP");
		}
		if (that.AJAX==null) {
			return false;
		} else {
			that.AJAX.onreadystatechange = function() {
				if (that.AJAX.readyState==4) {
					that.updating=false;
					that.callback(that.AJAX.responseText,that.AJAX.status,that.AJAX.responseXML);
					that.AJAX=null;
				}
			}
			that.updating = new Date();
			if (/post/i.test(postMethod)) {
				var uri=urlCall+'?'+that.updating.getTime();
				that.AJAX.open("POST", uri, true);
				that.AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				that.AJAX.send(passData);
			} else {
				var uri=urlCall+'?'+passData+'&timestamp='+(that.updating.getTime());
				that.AJAX.open("GET", uri, true);
				that.AJAX.send(null);
			}
			return true;
		}
	}
	var urlCall = url;
	this.callback = callbackFunction || function () { };
};




/* setup */
(function(){
	/* get arg */
	var scrips = document.getElementsByTagName('script');
	var s = scrips.item(scrips.length-1);
	if(s.src.match(/\?/)){
		var arg = s.src.split('?').pop();
		if(arg.match(/^[0-9]+$/)){
			DrowPNG.config.cid = arg;
		}
	}
	
	/* load js */
	for(var i=0,max=DrowPNG.config.libs.length; i<max; i++){
		if(DrowPNG.config.libs[i].match(/^https?:\/\//)){
			document.write('<script src="'+DrowPNG.config.libs[i]+'" type="text/javascript"></script>');
		}else{
			document.write('<script src="' + DrowPNG.config.libPath + '/' + DrowPNG.config.libs[i] + '.js" type="text/javascript"></script>');
		}
	};

	/* load css */
	for(var i=0,max=DrowPNG.config.css.length; i<max; i++){
		if(DrowPNG.config.css[i].match(/^https?:\/\//)){
			document.write('<link rel="stylesheet" href="' + DrowPNG.config.css[i] + '" type="text/css" media="all" />');
		}else{
			document.write('<link rel="stylesheet" href="' + DrowPNG.config.cssPath + '/' + DrowPNG.config.css[i] + '.css" type="text/css" media="all" />');
		}
	};
	
	/* onload event set */
	if(window.addEventListener) {
		//document.addEventListener("DOMContentLoaded", DrowPNG.init, false);
		window.addEventListener('load', DrowPNG.init, false);
	} else if (window.attachEvent) {
		window.attachEvent('onload', DrowPNG.init);
	} else {
		DrowPNG.init_origin = window.onload;
		window.onload = function() {
			DrowPNG.init();
			if (DrowPNG.init_origin) DrowPNG.init_origin();
		}
	};
	
}());