/*
*	※Licence: CC3.0 
*	http://creativecommons.org/licenses/by/3.0/deed.ja
*
*	Title: Layout Changer for Vicuna v1.1
*	URI: http://10coin.com/products/layout-changer/
*	Last Modified: 2007-11-15
*	Author: marble
*/

var layoutChanger = {
	config: {
		columnType: [
			'single',
			'double',
			'multi'
		],
		name: [
			'メインページ',
			'カテゴリーページ',
			'日付アーカイブページ',
			'個別記事ページ'
		],
		page: [
			'mainIndex',
			'category',
			'dateBasedArchive',
			'individual'
		],
		column: [
			'double',
			'double',
			'double',
			'single'
		],
		cookieName: 'layoutChanger',
		cookieDate: 90
	},

	change: function(data) {
		var config    = this.config;
		var attr      = new Array();
		var body      = document.body;
		var attr      = this.getClassName(body).split(' ');
		var index;

		for(var i in config.page) {
			if(document.getElementById('layoutChangerPref')) {
				this.select(config.page[i], data[i]);
			}

			for(var j in attr) {
				index = (attr[j] == config.page[i]) ? i : index;
			}
		}

		for(var i in config.columnType) {
			for(var j in attr) {
				attr[j] = (attr[j] == config.columnType[i]) ? data[index] : attr[j];
			}
		}

		this.setClassName(body, attr.join(' '));
	},

	createPrefPanel: function(data) {
		var target       = this;
		var config       = this.config;
		var setClassName = this.setClassName;
		var capitalize   = this.capitalize;

		var body = document.body;

		// Pref Panel
		var panel           = document.createElement('div');
		panel.id            = 'layoutChangerPref';
		panel.style.display = 'none';
		body.appendChild(panel);

		for(var i in config.page) {
			// Item
			var item = document.createElement('div');
			item.id  = 'layoutChangerItem' + capitalize(config.page[i]);
			setClassName(item, 'page');
			panel.appendChild(item);

			// Name
			var name       = document.createElement('div');
			name.innerHTML = config.name[i];
			setClassName(name, 'title');
			item.appendChild(name);

			// Column
			var column = document.createElement('div');
			column.id  = 'layoutChanger' + capitalize(config.page[i]);
			setClassName(column, 'column l' + Number(config.columnType.length));
			item.appendChild(column);

			for(var j in config.columnType) {
				// Type
				var type       = document.createElement('div');
				type.innerHTML = config.columnType[j];
				with({i:i, j:j}) {
					type.onclick = function() {
						target.select(config.page[i], config.columnType[j]);
					};
				}
				setClassName(type, config.columnType[j]);
				column.appendChild(type);
			}

			this.select(config.page[i], data[i]);
		}

		// Button List
		var buttons = document.createElement('div');
		setClassName(buttons, 'submit');
		panel.appendChild(buttons);

		// Default Button
		var def        = document.createElement('div');
		def.innerHTML  = 'Default';
		def.onclick    = function() {
			for(var i in config.page) {
				if(document.getElementById('layoutChangerPref')) {
					target.select(config.page[i], config.column[i]);
				}
			}
		};
		setClassName(def, 'default');
		buttons.appendChild(def);

		// Set Button
		var set        = document.createElement('div');
		set.innerHTML  = 'OK';
		set.onclick    = function() {
			target.check();
			target.hide();
		};
		setClassName(set, 'apply');
		buttons.appendChild(set);
	},

	check: function() {
		var config = this.config;
		var data   = new Array();

		for(var i in config.page) {
			var flag  = '';
			var items = document.getElementById('layoutChanger' + this.capitalize(config.page[i])).getElementsByTagName('div');

			for(var j = 0, l = items.length; j < l; j++) {
				if(this.getClassName(items[j]).indexOf('current') != -1) {
					data[i] = items[j].innerHTML;
					flag = true;
				}
			}

			if(!flag) {
				alert("error!!\n" + config.name[i] + ' is not selected!');
				return false;
			}
		}

		this.setCookie(data);
		this.change(data);
	},

	select: function(id, column) {
		var items = document.getElementById('layoutChanger' + this.capitalize(id)).getElementsByTagName('div');
		var flag;

		for(var i = 0, l = items.length; i < l; i++) {
			var str = items[i].innerHTML;

			if(str == column) {
				flag = ' current';
			}
			else {
				flag = '';
			}

			this.setClassName(items[i], str + flag);
		}
	},

	show: function() {
		document.getElementById('layoutChangerPref').style.display = '';
		document.getElementById('layoutChangerOverlay').style.display = '';
	},

	hide: function() {
		document.getElementById('layoutChangerPref').style.display = 'none';
		document.getElementById('layoutChangerOverlay').style.display = 'none';
	},

	// utilities
	capitalize: function(str) {
		return str.charAt(0).toUpperCase() + str.substring(1);
	},

	setCookie: function(data) {
		var t = new Date();
		t.setTime(t.getTime() + (1000 * 60 * 60 * 24 * Number(this.config.cookieDate)));
		document.cookie = this.config.cookieName + '=' + encodeURIComponent(data.join(',')) + '; path=/; expires=' + t.toGMTString();
	},

	getCookie: function(m) {
		return (m = ('; ' + document.cookie + ';').match('; ' + this.config.cookieName + '=(.*?);')) ? decodeURIComponent(m[1]).split(',') : null;
	},

	setClassName: function(elem, str) {
			if(document.fileModifiedDate) {
				elem.className = str;
			}
			else {
				elem.setAttribute('class', str);
			}
	},

	getClassName: function(elem) {
		return elem.className || elem.getAttribute('class');
	},

	// init
	init: function(data) {
		var body   = document.body;
		var target = this;

		// overlay
		var overlay           = document.createElement('div');
		overlay.id            = 'layoutChangerOverlay';
		overlay.style.display = 'none';
		overlay.onclick       = function() {
			target.hide();
		};
		body.appendChild(overlay);

		// button
		var button     = document.getElementById('layoutChanger');
		button.onclick = function() {
			if(!document.getElementById('layoutChangerPref')) {
				target.createPrefPanel(data);
			}

			target.show();
		};
	},

	start: function() {
		var config = this.config;

		// get cookie
		var data = this.getCookie('s');

		// default column
		if(data == null) {
			data = config.column;
		}

		// button
		document.write('<p id="layoutChanger">Layout Setting</p>');

		this.change(data);

		var target = this;
		try {
			window.addEventListener("load", function() {
				target.init(data)
			}, false);
		}
		catch(e) {
			window.attachEvent("onload", function() {
				target.init(data)
			});
		}
	}
}

layoutChanger.start();