var DemoData = {"windows": [{"options": {"className": "bluelighting", "blurClassName": "bluelighting", "minWidth": 100, "minHeight": 20, "resizable": true, "closable": true, "minimizable": true, "maximizable": false, "draggable": true, "userData": null, "showEffectOptions": {"to": 1}, "hideEffectOptions": {"from": 1}, "effectOptions": null, "title": "", "url": null, "width": 250, "height": 150, "opacity": 1, "recenterAuto": true, "wiredDrag": false, "destroyOnClose": true, "gridX": 1, "gridY": 1, "top": 37, "left": 103, "focusClassName": "bluelighting", "contentHTML": "<p>Double Click Me!</p>", "location": {"top": "6px", "left": "22px"}, "size": {"width": 250, "height": 150}}, "useLeft": true, "useTop": true, "storedLocation": null, "heightN": 28, "heightS": 15, "widthE": 15, "widthW": 9, "width": 250, "height": 150, "visible": true, "constraint": false, "constraintPad": {"top": 0, "left": 0, "bottom": 0, "right": 0}, "orgWidth": 250, "orgHeight": 150, "overlayOpacity": 0.6}, {"options": {"className": "greenlighting", "blurClassName": "greenlighting", "minWidth": 100, "minHeight": 20, "resizable": true, "closable": true, "minimizable": true, "maximizable": false, "draggable": true, "userData": null, "showEffectOptions": {"to": 1}, "hideEffectOptions": {"from": 1}, "effectOptions": null, "title": "", "url": null, "width": 250, "height": 150, "opacity": 1, "recenterAuto": true, "wiredDrag": false, "destroyOnClose": true, "gridX": 1, "gridY": 1, "top": 119, "left": 363, "focusClassName": "greenlighting", "contentHTML": "<h3>Todo List</h3><ul><li>eat dinner</li></ul><ul><li>brush my teeth</li></ul><ul><li>go to bed</li></ul><ul><li><del>read a paper(DONE!)</del></li></ul>", "location": {"top": "39px", "left": "156px"}, "size": {"width": 250, "height": 150}, "rawText": "*Todo List\n- eat dinner\n- brush my teeth\n- go to bed\n+ read a paper(DONE!)"}, "useLeft": true, "useTop": true, "storedLocation": null, "heightN": 28, "heightS": 15, "widthE": 15, "widthW": 9, "width": 250, "height": 150, "visible": true, "constraint": false, "constraintPad": {"top": 0, "left": 0, "bottom": 0, "right": 0}, "orgWidth": 250, "orgHeight": 150, "overlayOpacity": 0.6, "pointer": [319, 54], "doResize": false, "textarea": null}, {"options": {"className": "bluelighting", "blurClassName": "bluelighting", "minWidth": 100, "minHeight": 20, "resizable": true, "closable": true, "minimizable": true, "maximizable": false, "draggable": true, "userData": null, "showEffectOptions": {"to": 1}, "hideEffectOptions": {"from": 1}, "effectOptions": null, "title": "", "url": null, "width": 250, "height": 150, "opacity": 1, "recenterAuto": true, "wiredDrag": false, "destroyOnClose": true, "gridX": 1, "gridY": 1, "top": 114, "left": 503, "focusClassName": "bluelighting", "contentHTML": "<p>You can shade it.</p>", "location": {"top": "403px", "left": "10px"}, "size": {"width": 250, "height": 150}, "minimized": true, "rawText": "You can shade it."}, "useLeft": true, "useTop": true, "storedLocation": null, "heightN": 28, "heightS": 15, "widthE": 15, "widthW": 9, "width": 250, "height": 0, "visible": true, "constraint": false, "constraintPad": {"top": 0, "left": 0, "bottom": 0, "right": 0}, "orgWidth": 250, "orgHeight": 150, "minimized": true, "r2Height": 150, "resizing": false, "overlayOpacity": 0.6}, {"options": {"className": "nuncio", "blurClassName": "nuncio", "minWidth": 100, "minHeight": 20, "resizable": true, "closable": true, "minimizable": true, "maximizable": false, "draggable": true, "userData": null, "showEffectOptions": {"to": 1}, "hideEffectOptions": {"from": 1}, "effectOptions": null, "title": "", "url": null, "width": 250, "height": 150, "opacity": 1, "recenterAuto": true, "wiredDrag": false, "destroyOnClose": true, "gridX": 1, "gridY": 1, "top": 221, "left": 598, "focusClassName": "nuncio", "contentHTML": "<h3>You can resize it</h3>", "location": {"top": "10px", "left": "521px"}, "size": {"width": 122, "height": 47}, "rawText": "*You can resize it"}, "useLeft": true, "useTop": true, "storedLocation": null, "heightN": 28, "heightS": 18, "widthE": 21, "widthW": 12, "width": 122, "height": 47, "visible": true, "constraint": false, "constraintPad": {"top": 0, "left": 0, "bottom": 0, "right": 0}, "orgWidth": 122, "orgHeight": 47, "overlayOpacity": 1}, {"options": {"className": "spread", "blurClassName": "spread", "minWidth": 100, "minHeight": 20, "resizable": true, "closable": true, "minimizable": true, "maximizable": false, "draggable": true, "userData": null, "showEffectOptions": {"to": 1}, "hideEffectOptions": {"from": 1}, "effectOptions": null, "title": "", "url": null, "width": 250, "height": 150, "opacity": 1, "recenterAuto": true, "wiredDrag": false, "destroyOnClose": true, "gridX": 1, "gridY": 1, "top": 254, "left": 636, "focusClassName": "spread", "contentHTML": "<p>You can choose <strong>theme</strong></p>", "location": {"top": "272px", "left": "704px"}, "size": {"width": 250, "height": 150}, "rawText": "You can choose '''theme'''"}, "useLeft": true, "useTop": true, "storedLocation": null, "heightN": 25, "heightS": 7, "widthE": 7, "widthW": 7, "width": 250, "height": 150, "visible": true, "constraint": false, "constraintPad": {"top": 0, "left": 0, "bottom": 0, "right": 0}, "orgWidth": 250, "orgHeight": 150, "overlayOpacity": 0.6}, {"options": {"className": "greylighting", "blurClassName": "greylighting", "minWidth": 100, "minHeight": 20, "resizable": true, "closable": true, "minimizable": true, "maximizable": false, "draggable": true, "userData": null, "showEffectOptions": {"to": 1}, "hideEffectOptions": {"from": 1}, "effectOptions": null, "title": "", "url": null, "width": 250, "height": 150, "opacity": 1, "recenterAuto": true, "wiredDrag": false, "destroyOnClose": true, "gridX": 1, "gridY": 1, "top": 156, "left": 662, "focusClassName": "greylighting", "contentHTML": "<h3>Clickable link is available!</h3><p><a href=\"http://www.maloninc.com/\" target=\"_blank\" title=\"open with new window\">http://www.maloninc.com/</a></p>", "location": {"top": "14px", "left": "679px"}, "size": {"width": 247, "height": 126}, "rawText": "*Clickable link is available!\n\nhttp://www.maloninc.com/"}, "useLeft": true, "useTop": true, "storedLocation": null, "heightN": 28, "heightS": 15, "widthE": 15, "widthW": 9, "width": 247, "height": 126, "visible": true, "constraint": false, "constraintPad": {"top": 0, "left": 0, "bottom": 0, "right": 0}, "orgWidth": 247, "orgHeight": 126, "overlayOpacity": 0.6}, {"options": {"className": "bluelighting", "blurClassName": "bluelighting", "minWidth": 100, "minHeight": 20, "resizable": true, "closable": true, "minimizable": true, "maximizable": false, "draggable": true, "userData": null, "showEffectOptions": {"to": 1}, "hideEffectOptions": {"from": 1}, "effectOptions": null, "title": "", "url": null, "width": 250, "height": 150, "opacity": 1, "recenterAuto": true, "wiredDrag": false, "destroyOnClose": true, "gridX": 1, "gridY": 1, "top": 225, "left": 572, "focusClassName": "bluelighting", "contentHTML": "<h3>Wiki notaion is available.</h3><p>Followings is available as wiki notation.</p><br><br><hr><p><a href=\"http://www.maloninc.com/\" target=\"_blank\" title=\"open with new window\">http://www.maloninc.com/</a></p><p>(only http and https is available)</p><br><p><em>emphasize</em></p><p><strong>strong</strong></p><div><pre><ins>insert</ins>\n</pre></div><div><pre><del>delete</del>\n</pre></div><br><br><h3>Chapter1</h3><br><h4>Chapter1-1</h4><br><h5>Chapter1-1-1</h5><br><hr><ul><li>list item1</li></ul><ul><li>list item2</li></ul><ul><li>list item3</li></ul><hr><h3>Escape</h3><p>++insert++ -&gt; <ins>insert</ins></p><br>", "location": {"top": "115px", "left": "339px"}, "size": {"width": 304, "height": 304}, "rawText": "*Wiki notaion is available.\nFollowings is available as wiki notation.\n\n\n----\nhttp://www.maloninc.com/\n(only http and https is available)\n\n''emphasize''\n'''strong'''\n ++insert++\n --delete--\n\n\n*Chapter1\n\n**Chapter1-1\n\n***Chapter1-1-1\n\n----\n-list item1\n-list item2\n-list item3\n----\n*Escape\n\\+\\+insert\\+\\+ -> ++insert++\n"}, "useLeft": true, "useTop": true, "storedLocation": null, "heightN": 28, "heightS": 15, "widthE": 15, "widthW": 9, "width": 304, "height": 304, "visible": true, "constraint": false, "constraintPad": {"top": 0, "left": 0, "bottom": 0, "right": 0}, "orgWidth": 304, "orgHeight": 304, "overlayOpacity": 0.6, "pointer": [534, 128], "doResize": false, "textarea": null}], "config": {"defWidth": 250, "defHeight": 150, "theme": "bluelighting"}}

var wincontextmenu;
var UserData = {
	windows : [],
	config  : 
		{ 
			defWidth  : 250,
			defHeight : 150,
			theme     : 'bluelighting',
			shadeSpeed: "Fast",
			showEffect: true,
			hideEffect: true,
			docTitle  : 'Tiddly Sticky',
			forceClose: false
		}
};

var version   = '0.9.1';

function getUpdateInfo(info){
	
	/* version check */
	if(info && info.version > version) {
		Dialog.confirm("Newer version of Tiddly Sticky is available(" + info.version +")<br>" +
						"Do you want to visit the Tiddly Sticky to get the latest version?", 
							{
								windowParameters: {
									className: 'alphacube', 
									width:400, 
									height:100,
									destroyOnClose:true
								},
								okLabel: "Yes",
								cancelLabel: "No",
								ok:function(win){ open(info.updateURL); return true; },
								cancel:function(win){ return true; }
							});	
	}
}

function checkUpdateInfo() {
	/* do nothing */
}

function saveData(){
	/* do nothing */
}

function showPref(){
	Dialog.confirm($('preference').innerHTML, 
						{
							windowParameters: {
								title: 'Preference', 
								className: 'alphacube', 
								width:430, 
								height:320,
								destroyOnClose:true
							},
							okLabel: "OK",
							cancelLabel: "Cancel",
							ok:function(win){ 
								UserData.config.theme       = $('theme_selector').value
								UserData.config.defWidth    = $('defWidth').value
								UserData.config.defHeight   = $('defHeight').value;
								UserData.config.shadeSpeed  = $('shadeSpeed_selector').value;
								UserData.config.showEffect  = $('showEffect').checked;
								UserData.config.hideEffect  = $('hideEffect').checked;
								UserData.config.docTitle    = $('docTitle').value;
								UserData.config.forceClose  = $('forceClose').checked;
								
								saveData();
								
								Window.hasShowEffect        = UserData.config.showEffect;
								Window.hasHideEffect        = UserData.config.hideEffect;
								Window.resizeEffectDuration = Window.resizeDuration[UserData.config.shadeSpeed];
								document.title              = UserData.config.docTitle;
								return true; 
							},
							cancel:function(win){ return true; }
						});

	$('theme_selector').value      = UserData.config.theme;
	$('defWidth').value            = UserData.config.defWidth;
	$('defHeight').value           = UserData.config.defHeight;
	$('shadeSpeed_selector').value = UserData.config.shadeSpeed;
	$('showEffect').checked        = UserData.config.showEffect;
	$('hideEffect').checked        = UserData.config.hideEffect;
	$('docTitle').value            = UserData.config.docTitle;
	$('forceClose').checked        = UserData.config.forceClose;
	
}

// Overide WindowUtilities getPageSize to remove dock height (for maximized windows)
WindowUtilities._oldGetPageSize = WindowUtilities.getPageSize;
WindowUtilities.getPageSize = function() {
  var size = WindowUtilities._oldGetPageSize();
  var dockHeight = $('dock').getHeight();
  
  size.pageHeight -= dockHeight;
  size.windowHeight -= dockHeight;
  return size;
};    

// Add method which manuperate window size to Window object
Object.extend(Window.prototype, {
	setOrgSize: function(size) {
		this.orgWidth  = size.width;
		this.orgHeight = size.height;
	},
	getOrgSize: function() {
		return {width: this.orgWidth, height: this.orgHeight};
	}
})

// Over ride Windows unregister to save user data after a window has closed completely
Object.extend(Windows, {
	unregister: function(win) {
		this.windows = this.windows.reject(function(d) { return d==win });
		saveData();
	}
})


var isEditing = false;

function windowCloseCallback( win ){
	if(UserData.config.forceClose || confirm('Are you sure?')){
		return true
	}else{
		return false
	}
}


function windowModifiedCallback( win ){
	if(win.textarea != undefined || win.textarea){
		win.textarea.style.width  = (win.getSize().width-10)  + 'px';
		win.textarea.style.height = (win.getSize().height-10) + 'px';
	}
	setExtOption(win);
	saveData();
	return true;
}

function windowReiszedCallback( win ){
	win.setOrgSize(win.getSize());
	return windowModifiedCallback( win )
}

function windowMovedCallback( win ){
	docH = WindowUtilities.getPageSize().windowHeight - $('dock').getHeight();;
	docW = WindowUtilities.getPageSize().windowWidth;
	
	top  = parseInt(win.getLocation().top);
	left = parseInt(win.getLocation().left);
	
	if(top  < 0) top  = 0;
	if(left < 0) left = 0;
	if(top  > docH) top  = docH;
	if(left > docW) left = docW;
	win.setLocation(top, left);

	return windowModifiedCallback( win )
}

function windowMinimizeCallback( win ){
	if(win.minimized){
		var content = win.getContent().firstChild.innerHTML
		var index = content.indexOf('\n');
		if(index == -1){
			win.setTitle(content);
		}else{
			win.setTitle(content.substr(0,index));
		}
	}else{
		win.setTitle('');
	}
	return windowModifiedCallback( win )
}

function setExtOption( win ){
	/* set window's external option  */
	win.options.contentHTML = win.getContent().innerHTML;
	win.options.location    = win.getLocation();
	win.options.size        = win.getOrgSize();
	win.options.minimized   = win.minimized;
}

function setEditableContent( win ){
	Event.observe(win.getContent(), "dblclick", function(e){startEdit(e, win)})
}

function startEdit(event, win) {
	Event.stop(event);
	if(!isEditing){
		content = win.getContent();
		width  = win.getSize().width  - 10;
		height = win.getSize().height - 10;

		if(width < 70) width = 90;
		if(height < 50) height = 50;
		textarea = document.createElement('textarea');
		win.textarea = textarea;
		textarea.style.width  = width + 'px';
		textarea.style.height = height + 'px';
		if(win.options.rawText != undefined) {
			textarea.value = win.options.rawText;
			for(var node=content.firstChild; node != null;node=content.firstChild){
				content.removeChild(node)
			}
		}else{
			textarea.value = content.firstChild.innerHTML;
			content.removeChild(content.firstChild);
		}
		textarea.onblur = function(){finishEdit(win, textarea);}
		content.appendChild(textarea);

		textarea.focus();
		textarea.select();
		isEditing = true;
	}
}

function finishEdit(win, textarea) {
	if(isEditing){
		win.options.rawText = textarea.value;
		win.setHTMLContent(pjswlf.doMarkup(win.options.rawText).innerHTML)

		setExtOption(win);
		win.textarea = null;
		isEditing = false;
		saveData();
	}
}


function createWindow(event, theme){
	var top  = 250
	var left = 300

	if(event){
		top  = event.extend_pointer.y
		left = event.extend_pointer.x
	}
	if(theme == null){
		theme = UserData.config.theme
	}
	
    var win = new Window(
		{
			className: theme, 
			blurClassName: theme, 
			title: '', 
			width:UserData.config.defWidth, 
			height:UserData.config.defHeight, 
			top: top, 
			left:left,
			maximizable:false,
			destroyOnClose:true,
			parent: $('desktop'),
			onEndResize: windowReiszedCallback,
			onEndMove: windowMovedCallback,
			onMinimize: windowMinimizeCallback
		}); 
	win.setCloseCallback(windowCloseCallback);
	win.setOrgSize(win.getSize());
	win.getContent().update("<p>Double Click Me!</p>");
	win.show();
	setExtOption(win);
	setEditableContent(win);
	saveData();
	
	/* add contextmenu event handler */	
	$$("#" + win.getId()+' .table_window').invoke('observe', Prototype.Browser.Opera ? 'click' : 'contextmenu', function(e){
		if (Prototype.Browser.Opera && !e.ctrlKey) {
			return;
		}
		wincontextmenu.show(e);
	}.bind(wincontextmenu));

}


function initWindows(){
	tmpData = DemoData;
	
	UserData.windows = tmpData.windows
	Object.extend(UserData.config, tmpData.config);
	
	for (var i = 0; i < UserData.windows.length; i++){	
		var options = UserData.windows[i].options
		if(options.contentHTML == undefined) continue; // ignore Dialog
		
		options.parent      = $('desktop');
		options.onEndMove   = windowMovedCallback;
		options.onEndResize = windowReiszedCallback;
		options.onMinimize  = windowMinimizeCallback;

		var win = new Window(options);

		win.setCloseCallback(windowCloseCallback);
		win.getContent().update(options.contentHTML);
		win.element.setStyle(options.location)
		win.setSize(options.size.width, options.size.height, false);
		win.setOrgSize(options.size);
		setEditableContent(win);
		
		oldShowEffect = win.options.showEffect;
		win.options.showEffect = Element.show;
		win.show();
		win.options.showEffect = oldShowEffect;
	}
	
	Windows.windows.each(function(w){
		if(w.options.minimized) w.minimize()
	});
	
}

function initMenu(){
	
	var desktopMenu =
		[
			{
				name: 'New',
				className: 'new_sticky',
				callback: function(evt){createWindow(evt)}
			},
			{
				separator: true
			},
			{
				name: 'New As Blue Lighting',
				className: 'new_bl',
				callback: function(evt){createWindow(evt, 'bluelighting')}
			},
			{
				name: 'New As Green Lighting',
				className: 'new_gl',
				callback: function(evt){createWindow(evt, 'greenlighting')}
			},
			{
				name: 'New As DarkBlue Lighting',
				className: 'new_gr',
				callback: function(evt){createWindow(evt, 'darkbluelighting')}
			},
			{
				name: 'New As Grey Lighting',
				className: 'new_gr',
				callback: function(evt){createWindow(evt, 'greylighting')}
			},
			{
				name: 'New As Nuncio',
				className: 'new_nu',
				callback: function(evt){createWindow(evt, 'nuncio')}
			},
			{
				name: 'New As Spread',
				className: 'new_sp',
				callback: function(evt){createWindow(evt, 'spread')}
			},
			{
				name: 'New As Alpha Cube',
				className: 'new_ac',
				callback: function(evt){createWindow(evt, 'alphacube')}
			},
			{
				separator: true
			},
			{
				name: 'Preference...',
				className: 'pref',
				callback: showPref
			}
		];
		
	var windowMenu =
		[
			{
				name: 'Change theme Blue Lighting',
				className: 'new_bl',
				callback: function(evt){changeTheme(evt, 'bluelighting')}
			},
			{
				name: 'Change theme Green Lighting',
				className: 'new_gl',
				callback: function(evt){changeTheme(evt, 'greenlighting')}
			},
			{
				name: 'Change theme DarkBlue Lighting',
				className: 'new_gr',
				callback: function(evt){changeTheme(evt, 'darkbluelighting')}
			},
			{
				name: 'Change theme Grey Lighting',
				className: 'new_gr',
				callback: function(evt){changeTheme(evt, 'greylighting')}
			},
			{
				name: 'Change theme Nuncio',
				className: 'new_nu',
				callback: function(evt){changeTheme(evt, 'nuncio')}
			},
			{
				name: 'Change theme Spread',
				className: 'new_sp',
				callback: function(evt){changeTheme(evt, 'spread')}
			},
			{
				name: 'Change theme Alpha Cube',
				className: 'new_ac',
				callback: function(evt){changeTheme(evt, 'alphacube')}
			}
		];
		
	new Proto.Menu(
		{
			selector: '#desktop', // context menu will be shown when element with class name of "contextmenu" is clicked
			className: 'menu desktop', // this is a class which will be attached to menu container (used for css styling)
			menuItems: desktopMenu // array of menu items
		});

	wincontextmenu = new Proto.Menu(
		{
			selector: '.table_window', // context menu will be shown when element with class name of "contextmenu" is clicked
			className: 'menu desktop', // this is a class which will be attached to menu container (used for css styling)
			menuItems: windowMenu // array of menu items
		});
}

function initSticky(){
	$('desktop').style.width  = window.innerWidth  + 'px';
	$('desktop').style.height = window.innerHeight + 'px';
	
	initWindows();
	initMenu();

	$('title').innerHTML = 'Tiddly Sticky ' + version

	Window.hasShowEffect        = UserData.config.showEffect;
	Window.hasHideEffect        = UserData.config.hideEffect;
	Window.resizeEffectDuration = Window.resizeDuration[UserData.config.shadeSpeed];
	document.title              = UserData.config.docTitle;
	
	checkUpdateInfo();
}

function changeTheme(event, theme) {
	
	/* find parent node until which has an id as window_... */ 
	for (elm = Event.element(event); elm && elm.id.indexOf('window_') == -1 ; elm = elm.parentNode);

	windowId = elm.id.replace(/_content/, '');
	windowId = windowId.replace(/_row./, '');
	win = Windows.getWindow(windowId);
	win.options.focusClassName = theme; 
	win.options.blurClassName = theme;
	win.changeClassName(theme)
	saveData();
}


Event.observe(document, 'dom:loaded', initSticky);