/* (c) 2008-2009 Rano <rano.jp@gmail.com> */

var editor;
var sections;
var pastes;
var flags;

var isMSIE = /*@cc_on!@*/false;
var hige;

/*----------------------------------------------------------------*/
var RanoSectionList = function(target) {
	var _target = target;

	this.clear = function() {
		$(_target).innerHTML = "";
	};

	this.add = function(i) {
		var n = document.createElement("DIV")
		n.name = n.id = "section_list_" + i.toString();
		n.body_id = "section_body_" + i.toString();
		n.stat_id = "section_stat_" + i.toString();
		n.original = $(n.body_id).value;
		n.modified = false;
		$(_target).appendChild(n);

		n.innerHTML = "<a class='list' href='javascript:editor.section.show(" +
                  i.toString() + ")'>" +
//	              n.body_id + "/ " +
		              "<span id='" + n.stat_id + "'>" +
		              section_summary(i) + "</span>" +
		　　　　　　　　"</a>";
	};

	this.update_stats = function(i) {
		var n = $("section_list_" + i.toString());
		if (n) {
			var text = $(n.body_id).value;
			if (n.modified == false && text != n.original) {
				n.modified = true;
			}
			$(n.stat_id).innerHTML = section_summary(i);
		}
	};

	var section_summary = function(i) {
		var n = $('section_list_' + i.toString());
		if (n) {
			var text = $(n.body_id).value;
			var name = $('section_name_' + i.toString());
			if (text.length > 0) {
				text = text.length.toString() + '文字' + (n.modified ? ' *' : '');
			} else {
				text = 'テキストがありません';
			}
			return name.value + '<br />' + text;
		} else {
			return '';
		}
	};
};

/*----------------------------------------------------------------*/
var RanoPictureForm = function(target) {
	var _target = target;

	this.destroy = function(id) {
		if (confirm('本当に削除しますか？')) {
			new Ajax.Request('/pastes/destroy/' + id.toString(),
		                   {asynchronous:true, evalScripts:true});
		}
	}
};

/*----------------------------------------------------------------*/
var RanoPreviewForm = function(target) {
	var _target = target;
	var _waiting = [];
	var _viewer;

	var date = new Date();
	var tail = '?' + date.getTime().toString();

	this.init = function() {
		this.initFlags();

		_viewer = (isMSIE) ? window['externalViewer'] : window.document['externalViewer'];
		if (_waiting['status']) {
			_viewer.setTitle(title);
			_viewer.setAuthor(author);
			_viewer.setBackground('/images/400/' + _waiting.bg.id + tail, '',
														_waiting.bg.width2);
			_viewer.setMode("preview");
			_viewer.setFlags($('draft_flags').value);
			_viewer.load(_waiting['text']);
			_waiting['status'] = false;
		}
	};

	this.update = function() {
//	alert(pastes[0].id + tail);

		_waiting['text'] = editor.section.dump();
		_waiting['bg'] = pastes[0];
		_waiting['status'] = true;

		if (isMSIE && _viewer) {
			_viewer.setBackground('/images/400/' + _waiting.bg.id + tail,	'',
														_waiting.bg.width2);
			_viewer.setFlags($('draft_flags').value);
			_viewer.load(_waiting['text']);
			_waiting['status'] = false;
		}
	};

	this.resize = function(height) {
		if ($(_target)) {
//		height = (parseInt(height) + 40).toString() + "px"
			height = (parseInt(height)).toString() + "px"

			$(_target).style.width = "945px";
			$(_target).style.height = height;
			if ($('externalViewer')) $('externalViewer').style.height = height;
		}
	};

	this.initFlags = function() {
		$('draft_flags_h').selectedIndex = this.testFlag("h") ? 1 : 0;
		$('draft_flags_unfold').checked = this.testFlag("unfold");
		$('draft_flags_align').checked = this.testFlag("align");
	};

	this.setFlag = function(s, value) {
		if (value) {
			if (!this.testFlag(s)) {
				$('draft_flags').value = $('draft_flags').value + " " + s;
			}
		} else {
			var flags = $('draft_flags').value.split(' ');
			for (var i = 0; i < flags.length; i++) {
				if (flags[i] == s) flags.splice(i, 1);
			}
			$('draft_flags').value = flags.join(' ');
		}
		_viewer.setFlags($('draft_flags').value);
		_viewer.load(_waiting['text']);
	};

	this.testFlag = function(s) {
		var flags = $('draft_flags').value.split(' ');
		for (var i = 0; i < flags.length; i++) {
			if (flags[i] == s) return true;
		}
		return false;
	};

	hige = new HIGEWheel(_target);
};

/*----------------------------------------------------------------*/
var RanoSectionForm = function(target) {
	var _target = target;
	var _current = 0;
	var _section_size = 0;
	var _paste_size = 0;
	var list = new RanoSectionList('text_list');

	var add_section = function(i, section) {
		var n = Rano.textarea('section_body_' + i.toString(), section['body']);
		n.style.display = "none";
		n.style.height = Rano.height;
		$(_target).appendChild(n);

		var m = Rano.hidden('section_name_' + i.toString(), section['name']);
		$(_target).appendChild(m);

		list.add(i);
	};

	var add_index = function() {
		var index = [];
		for (var i = 0; i < _section_size; i++) {
			index.push(i.toString());
		}
		var n = Rano.hidden('section_index', index.join(','));
		$(_target).appendChild(n);
	};

	this.reset = function() {
		_section_size = sections.length;
		_paste_size = pastes.length;
		list.clear();
		add_index();
		for (var i = 0; i < _section_size; i++) {
			add_section(i, sections[i]);
		}
		this.show(0);
	};

	this.show = function(current) {
		_current = current;
		for (var i = 0; i < _section_size; i++) {
			var id = "section_body_" + i.toString();
			if ($(id)) {
				$(id).style.display = (i == current) ? 'block' : 'none';
			}
		}
	};

	this.update_stats = function() {
		list.update_stats(_current)
	};

	this.resize = function(height) {
		for (var i = 0; i < _section_size; i++) {
			var id = "section_body_" + i.toString();
			if ($(id)) {
				$(id).style.height = height;
			}
		}
	};

	this.upload = function() {
		document.text.submit();
	};

	this.upload_picture = function() {
		//confirm('派生作品の画像も差し替えますか？');
		document.picture.submit();
	};

	this.dump = function() {
		var tmp = [];
		for (var i = 0; i < _section_size; i++) {
			var id = "section_body_" + i.toString();
			var name = "section_name_" + i.toString();
			if ($(name)) {
				tmp.push("#section " + $(name).value);
			}
			if ($(id)) {
				tmp.push($(id).value);
			}
		}
		return tmp.join("\n");
	}
};

/*----------------------------------------------------------------*/
var RanoTab = function(only) {
	var panes = ['text', 'picture', 'preview'];
	var text = [];
	
	this.show = function (id) {
		for (var i = 0; i < panes.length; i++) {
			var pane = panes[i];
			if (id == pane) {
				$(pane + '_menu').show();
				$(pane + '_pane').show();
//			$(pane + '_nl').className = "selected";
			} else {
				$(pane + '_menu').hide();
				$(pane + '_pane').hide();
//			$(pane + '_nl').className = null;
			}
		}
		if (id == "preview") editor.preview.update();
	};

	this.hide_some_tabs = function(only) {
		$('text_nav').style.display = (only != "picture") ? 'block' : 'none';
		$('picture_nav').style.display = (only != "text") ? 'block' : 'none';
	};

	this.show_all_tabs = function(only) {
		$('text_nav').style.display = 'block';
		$('picture_nav').style.display = 'block';
	};

	this.hide_some_tabs(only);
};

/*----------------------------------------------------------------*/
var RanoEditor = function(target, id, only) {
	var _target = target;
	var _height = "300px";
	var _id = id;
	var _userAgent = navigator.userAgent.toLowerCase();

	this.section = new RanoSectionForm('text_form');
	this.picture = new RanoPictureForm('picture_form');
	this.preview = new RanoPreviewForm('preview_form')
	this.tab = new RanoTab(only);

	this.watch = function() {
		editor.section.update_stats();
		setTimeout(editor.watch, 500);
	};

	this.save_and_exit = function() {
		document.draft.action = '/drafts/save_and_exit';
		document.draft.submit();
	};

	this.publish = function() {
		document.draft.action = '/drafts/publish';
		document.draft.submit();
	};

	this.discard = function() {
		if (confirm('編集前の状態に戻します。よろしいですか？')) {
			document.draft.action = '/drafts/discard';
			document.draft.submit();
		}
	};

	this.resize = function() {
		var height = Rano.update_height();
		if (_height != height) {
			_height = height;
			this.section.resize(height);
			this.preview.resize(height);
		}
	};

	this.edit_title = function(id, current_name) {
		var name = prompt('タイトルを入力してください', current_name);
		new Ajax.Request('/books/edit_title/' + id,
		  {asynchronous:true, evalScripts:true,
					parameters:{'name': name}});
  };

	this.edit_author = function(id, current_name) {
		var name = prompt('作者名を入力してください', current_name);
		new Ajax.Request('/books/edit_author/' + id,
		  {asynchronous:true, evalScripts:true,
					parameters:{'name': name}});
	}

	this.resize();
	this.section.reset();
	document.text.reset();
	document.picture.reset();
};

var Rano = {
	element: function(tag, id, name, type) {
		var n;
		if (isMSIE) {
			var str = ' id="' + id.toString() + '"';
			if (name) str += ' name="' + name.toString() + '"';
			if (type) str += ' type="' + type.toString() + '"';
			n = document.createElement('<' + tag + str + '>');
		} else {
			n = document.createElement(tag);
			n.id = id;
			if (name) n.name = name;
			if (type) n.type = type;
		}
		return n;
	},

	textarea: function(id, value) {
		var n = Rano.element('textarea', id, id);
		if (isMSIE) {
			n.value = value.gsub(/\n/, "\r\n");
		} else {
			n.innerHTML = value;
		}
		return n;
	},

	hidden: function(id, value) {
		var n = Rano.element('input', id, id, 'hidden');
//	var n = Rano.element('input', id, id, 'input');
		n.value = value;
		return n;
	},

  update_height: function() {
		var offset = 200;
	  var height = window.innerHeight ? 
		             window.innerHeight : 
		             document.documentElement.clientHeight;
		if (height < 300) height = 300;
		return Rano.height = (height - offset).toString() + "px";
	}
};