// addComments.js
// version: 0.1.4
// 2006/04/29 20:47
// made by Higeorange
// ArrayCookie2.js ( http://far.usopion.com/xlog.cgi/2117 ) が必要です
// dom-drag.js( http://www.youngpup.net/2001/domdrag/project ) が必要です

// 今後の課題
// スタイルの見直し。サイトによってはスタイルが崩れる。
// リサイズがうまくいかないときがある。

// 新しくコメントをつけるには
// javascript:textbox('hoge','0','0'); をブックマークレットから呼び出す。

document.addEventListener('load',addComment,false);

function addComment() {
	var arrayData = new ArrayCookie2(document.location.pathname);
	var comments = arrayData.getData('comments');
	if(comments) {
		var comment = arrayData.getArrayData('comments',0);
		var top     = arrayData.getArrayData('comments',1);
		var left    = arrayData.getArrayData('comments',2);
		var width   = arrayData.getArrayData('comments',3);
		var height  = arrayData.getArrayData('comments',4);
		textbox(comment,top,left,width,height);
	}
}

function textbox(c,t,l,w,h) {
	if(!$('cmmntsdiv')) {
		var downed = false;
	
		var div           = cElement('div');
		div.id            = 'cmmntsdiv';
		var dStyle        = div.style;
		dStyle.width      = w;
		dStyle.height     = h;
		dStyle.position   = 'absolute';
		dStyle.margin     = '0';
		dStyle.padding    = '0 0 5px 0';
		dStyle.zIndex     = '100';
		dStyle.top        = t;
		dStyle.left       = l;
		dStyle.background = '#fff';
		dStyle.border     = '1px #000 solid';
		dStyle.textAlign  = 'left';

		var titlebar      = cElement('p');
		titlebar.id       = 'handle';
		var bStyle        = titlebar.style;
		bStyle.margin     = '0';
		bStyle.width      = '100%';
		bStyle.height     = '20px';
		bStyle.background = '#333';
		bStyle.textAlign  = 'center';
		bStyle.color      = '#fff';
		bStyle.fontWeight = 'bold';
		titlebar.appendChild(document.createTextNode('Comments'));
		div.appendChild(titlebar);

		var ta   = cElement('textarea');
		ta.id    = 'cmmnts';
		ta.value = c;
	
		var tStyle          = ta.style;
		tStyle.background   = '#fff';
		tStyle.borderWidth  = '0';
		tStyle.width        = '100%';
		tStyle.height       = '90%';
		//		tStyle.overflow = 'hidden';
		div.appendChild(ta);

		var br = cElement('br');
		div.appendChild(br);
	
		var savebtn          = cElement('input');
		savebtn.type         = 'button';
		savebtn.onclick      = save;
		savebtn.value        = 'save';
		savebtn.style.margin = '0 5px';
		div.appendChild(savebtn);

		var removebtn          = cElement('input');
		removebtn.type         = 'button';
		removebtn.onclick      = remove;
		removebtn.style.margin = '0 5px'
		removebtn.value        = 'remove';
		div.appendChild(removebtn);
	
		var msdwn         = false;
		var resizeX       = x3 = 200;
		var resizeY       = y3 = 150;
		var resizer       = cElement('div');
		var rStyle        = resizer.style;
		rStyle.position   = 'absolute';
		rStyle.bottom     = '0';
		rStyle.right      = '0';
		rStyle.width      = '19px';
		rStyle.height     = '19px';
		rStyle.background = 'transparent url(\'data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%13%00%00%00%13%08%02%00%00%00%FD2%A1%9B%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%D6%04%1E%0F%261%D4%A9%17%DD%00%00%00%1DtEXtComment%00Created%20with%20The%20GIMP%EFd%25n%00%00%00XIDAT8%CB%9D%D11%0E%C00%08CQ%E0%FEwv%87Vi%1B%11%C0%F6%FE%F4%07%3B%00%93%16%1As%F7%D0%98%D2%BC%19-%17%E3%E4%97%11rc%00Bc%A3f%CAzyb%CD%9F%05%AB%9A5%3B%CA%96%E5r%C2%129d%FB%9Fs%F6kR%EC%95%2C%7B%A4%C0%CC%EC%02%D4%869A%A8%8AE%5B%00%00%00%00IEND%AEB%60%82\')';
		resizer.onmousedown = function (e) {
			x1    = e.clientX;
			y1    = e.clientY
			msdwn = true;
			return false;
		}
		document.body.onmouseup = function () {
			x3    = resizeX;
			y3    = resizeY;
			msdwn = false;
			return false;
		}
		document.body.onmousemove = function (e) {
			x2 = e.clientX;
			y2 = e.clientY;
			
			if(msdwn){
				resizeX                     = x3 + x2 - x1;
				resizeY                     = y3 + y2 - y1;
				$('cmmntsdiv').style.width  = resizeX;
				$('cmmntsdiv').style.height = resizeY;
			}
			return false;
		}
		div.appendChild(resizer);
		
		document.body.appendChild(div);
		Drag.init($('handle'),$('cmmntsdiv'));
	}
}

function save() {
	var comments  = $('cmmnts').value;
	var top       = $('cmmntsdiv').style.top;
	var left      = $('cmmntsdiv').style.left;
	var width     = $('cmmntsdiv').style.width;
	var height    = $('cmmntsdiv').style.height;
	var arrayData = new ArrayCookie2(document.location.pathname);
	arrayData.setData('comments',comments,30);
	arrayData.addData('comments',top,30);
	arrayData.addData('comments',left,30);
	arrayData.addData('comments',width,30);
	arrayData.addData('comments',height,30);	
}

function remove() {
	document.body.removeChild($('cmmntsdiv'));
	var arrayData = new ArrayCookie2(document.location.pathname);
	arrayData.setData('comments','',0);
}

function $(id) {
	return document.getElementById(id);
}

function cElement(element) {
	return document.createElement(element);
}