/**
 * stepの数と、実際の表示するステップ番号とは違いがあります！！
 * 途中でステップが増える処理があるため。
 * resmapを参照！
 */
var step = 0;
var curRow = null;
var styleRow = null;
var resmap = {
	1: '1',
	2: '2',
	3: '3',
	4: '4'
};
var useMakeBlog = false;

var prevDisabled = false;
var nextDisabled = false;

var hasToken = false;
var hasBlog = false;

var gid = '';
var blogId = '';
var blogTitle = '';
var designId = '';
var designTitle = '';
var originalLink = '';

var designData = [
	['standard', 'スタンダード', '../_modules/images/blog/sel-standard.png', '記事一覧を表示します。'],
	['paging', 'ページ表示', '../_modules/images/blog/sel-standard.png', '記事を一つずつ表示します。<br />ページ移動で次の記事を表示します。'],
   	['title', 'タイトルのみ', '../_modules/images/blog/sel-standard.png', 'タイトルのみの記事一覧を表示します。'],
   	['table', 'テーブル式表示', '../_modules/images/blog/sel-standard.png', '記事一覧をテーブル形式で表示します。'],
   	/*
	['accordion', 'アコーディオン表示', '../_modules/images/blog/sel-accordion.png', '記事一覧をアコーディオンで表示します。<br />ページナビゲーションが付きます。'],
	['tab', 'タブ表示', '../_modules/images/blog/sel-tab.png', '記事一覧をタブで表示します。<br />ページナビゲーションが付きます。'],
	*/
	['main01', 'メイン（トップページ＆記事）', '../_modules/images/blog/sel-main.png', 'トップページと記事ページを表示します。<br />画面の移動はAjaxにて行われます。<br />ブックマークできるアドレスが生成されます。'],
	['side01', 'サイド（カレンダー＆カテゴリー一覧）', '../_modules/images/blog/sel-side.png', 'カレンダー、カテゴリーの一覧を含むサイドバーです。<br />Bloggerのみ対応しており、「メイン（トップページ＆記事）」と組み合わせて使います。']
];

var selectedBlog = null;
var radioBlog = {			//radioボタンのインデックス
	'google'  : '0',
	'yahoo'   : '1',
	'ameba'   : '2',
	'cocolog' : '3',
	'fc2'     : '4',
	'jugem'	  : '5',
	'livedoor': '6',
	'goo'     : '7'
};


Ext.onReady(function(){
	setupCommon();

	var args = location.search;
	if (args.length > 0) {
		// get initial data
		var params = parseParam(args);
		// authsubからの戻り
		if (params.auth_return) {
			gid = params.g;
			step = 2;
			gotoStep(3);
		// 復元
		} else {
			gid = params.g;
			blogId = params.s;
			designId = params.d;
			
			jQuery.each(designData, function(i, d) {
				if (d[0] == designId) {
					designTitle = d[1];
					return;
				}
			});
			
			var opt = eval('(' + decodeURIComponent(params.o) + ')');
			selectedBlog = opt.site;
			opRec = createBlogOptionObject(opt.site, opt.blogid, opt.blogsvr, opt.max_results,
					opt.link_words, opt.custom_domain);
			
			step = 3;
			gotoStep(4);
		}

	} else {
		gotoStep(1);
	}

	jQuery('#btn-prev').click(function(e) {
		if (prevDisabled) return;

		nextDisabled = false;

		if (step == 1) {
			location.href = '/main/';
			
		} else {
			gotoStep(step-1);
			
		}
	});

	jQuery('#btn-next').click(function(e) {
		if (nextDisabled) return;

		// 
		if (step == 1) {
			selectedBlog = jQuery('input[@name=blog]:checked').val();
			if (selectedBlog == null) {
				msgBox('ブログの選択','貼り付けるブログを選択してださい');
				return;
			}
			curRow = selectedBlog;
			
		} else if (step == 2) {
			var hasError = false;
			if (selectedBlog=="fc2") {
				fc2_id = jQuery("#blog_id");
				fc2_svr = jQuery("#blog_svr");
				if (!checkRequiredForFC2(fc2_id, fc2_svr, '#msg_blog_id')) hasError = true;
			} else if (selectedBlog=='google') {
				var bid = jQuery('#blog_id');
				var cdom = jQuery('#custom_domain');
				if (!checkRequiredGoogle(bid, cdom, '#msg_blog_id')) hasError = true;
			} else {
				if (!checkRequired('#blog_id', '#msg_blog_id')) hasError = true;
			}
			if (!checkNumRequired('#max_results', '#msg_blog_max_results')) hasError = true;
			if (hasError) {
				msgBox('入力エラー', 'エラーがあります。内容をご確認ください。');
				return;
			}
			opRec = getOption();

		} else if (step == 3) {
			if (styleRow == null) {
				msgBox('エラー', 'デザインを選んでください');
				return;
			}
			designId = styleRow.data.id;
			designTitle = styleRow.data.title;
			
		} else if (step == 4) {
			var o = CObj(opRec);
			if (selectedBlog == 'google' && o.custom_domain != '') {
				jQuery.ajax({
					url: './get_blog_id',
					type: 'GET',
					data: {
						'u': 'http://' + o.custom_domain
					},
					dataType: 'json',
					success: function(json) {
						loadTag('blog', gid, json.blogId, designId, encodeURIComponent(opRec));
					},
					error: function(xhr, stats) {
						msgBox('通信エラー','ブログIDの取得に失敗しました。');
					}
				});
			} else {
				loadTag('blog', gid, blogId, designId, encodeURIComponent(opRec));
			}
			return;
		}

		gotoStep(step+1);
	});

	jQuery(window).bind('resize', resizeHandler);
});

function gotoStep(nextstep) {
	if (nextstep == step) return;
	var fn = (nextstep > step) ? nextHandler:prevHandler;
	var nm = resmap[nextstep];
	var tm = new Date().getTime();
	jQuery('#contents_body').load('/_modules/html/blog/step' + nm + '.html?tm=' + tm, fn);
}

function nextHandler(text, status) {
	if (status == 'success') {
		step++;
		setStepCss();
		onLoadComplete();
	}
}

function prevHandler(text, status) {
	if (status == 'success') {
		step--;
		setStepCss();
		onLoadComplete();
	}
}

function onLoadComplete() {
	// Googleアカウント
	if (step == 1) {
		if (selectedBlog!=null) {
			var idx = radioBlog[selectedBlog];
			if (idx!=null) {
				jQuery('input:radio[#blog]')[idx].checked = true;
			}
		}

	} else if (step == 2) {
		renderBlogOption();
		
	} else if (step == 3) {
		jQuery('#blog_name').append("「" + blogTitle + "」");
		styleRow = null;	//選択クリア
		renderDesignList();

	} else if (step == 4) {
		renderUsefulLink();

	}
}

function setStepCss() {
	var nm = resmap[step];
	jQuery('#sub_title').css('background-image', 'url(/_modules/images/blog/subtitle0' + nm + '.png)');
	for (var i=1; i<=8; i++) {
		nm = resmap[i];

		var src = '/_modules/images/blog/step0' + nm;
		if (i == step) {
			src += '_on';
		}
		
		jQuery('#step' + nm).css('background-image',
			'url(' + src + '.png)');
	}

	/* sumit button */
	btn = document.getElementById('btn-next');
	if (step == 4) {
		btn.className = 'btn-submit';
	} else {
		btn.className = 'btn-next';
	}

	// resize
	resizeHandler();
}

function renderDesignList() {
	store = new Ext.data.SimpleStore ({
		fields: [
			{name: 'id'},
			{name: 'title'},
			{name: 'image'},
			{name: 'description'}
		]
	});
	store.loadData(designData);

	var grid = new Ext.grid.GridPanel({
		id: 'topic-grid',
		el: 'main-area',
		store: store,
		columns: [
			{id: 'id', header: 'デザイン', width: 600, dataIndex: 'title', renderer: formatTitle}
		],
		sm: new Ext.grid.RowSelectionModel({
			singleSelect: true
		}),
		height: 350,
		width: 600,
		viewConfig: {
			forceFit: true,
			enableRowBody: true,
			showPreview: true,
			getRowClass: function(record, rowIndex, p, store) {
				if (record.data.image != '')
					p.body = '<p><img src="' + record.data.image + '" style="float: left; margin: 2px" />' + record.data.description + '</p>';
				else
					p.body = '<p>' + record.data.description + '</p>';
				return 'x-grid3-row-expanded';
			}
		}
	});

	grid.on('rowclick', function(g, rowIndex, e) {
		styleRow = g.getStore().getAt(rowIndex);
	});
	
	grid.render();
}

function formatTitle(value, p, record) {
	return String.format(
		'<div class="topic">{0}</div>',
		value
	);
}

/**
 * Blogオプション設定
 */
var opRec = null;
function renderBlogOption() {
	blog = CBlog(selectedBlog);
	setBlogOptionHtml(blog);

	var blog_id = "";
	var blog_svr = "";
	var max_results = countDEFBlog[blog];
	var link_words = "";
	var custom_domain = "";

	if (opRec!=null) {
		obj = CObj(opRec);
		if (obj.blogid) { blog_id = obj.blogid; }
		if (obj.blogsvr) { blog_svr = obj.blogsvr;}
		if (obj.max_results) { max_results = obj.max_results; }
		if (obj.link_words) { link_words = obj.link_words; }
		if (obj.custom_domain) { custom_domain = obj.custom_domain; }
	}

	//ブログURL
	if (selectedBlog=="fc2") {
		//FC2用
		fc2_id = jQuery("#blog_id");
		fc2_svr = jQuery("#blog_svr");
		if (document.getElementById('blog_id')) {
			jQuery('#blog_id').focus(function(e) {
				checkRequiredForFC2(fc2_id, fc2_svr, '#msg_blog_id');
			}).keyup(function(e) {
				checkRequiredForFC2(fc2_id, fc2_svr, '#msg_blog_id');
			}).val(blog_id);
		}
		if (document.getElementById('blog_svr')) {
			jQuery('#blog_svr').focus(function(e) {
				checkRequiredForFC2(fc2_id, fc2_svr, '#msg_blog_id');
			}).keyup(function(e) {
				checkRequiredForFC2(fc2_id, fc2_svr, '#msg_blog_id');
			}).val(blog_svr);
		}
	} else if (selectedBlog=='google') {
		var bid = jQuery('#blog_id');
		var cdom = jQuery('#custom_domain');
		
		bid.focus(function(e) {
			checkRequiredGoogle(bid, cdom, '#msg_blog_id');
		}).keyup(function(e) {
			checkRequiredGoogle(bid, cdom, '#msg_blog_id');
		}).val(blog_id);
		
		cdom.focus(function(e) {
			checkRequiredGoogle(bid, cdom, '#msg_blog_id');
		}).keyup(function(e) {
			checkRequiredGoogle(bid, cdom, '#msg_blog_id');
		}).val(custom_domain);
		
	} else {
		//Blogger,Yahoo,Ameba,livedoor,JUGEM,cocolog,goo用
		if (document.getElementById('blog_id')) {
			jQuery('#blog_id').focus(function(e) {
				checkRequired(this, '#msg_blog_id');
			}).keyup(function(e) {
				checkRequired(this, '#msg_blog_id');
			}).val(blog_id);
		}
	}
	
	//表示件数
	if (document.getElementById('max_results')) {
		jQuery('#max_results').focus(function(e) {
			checkNumRequired(this, '#msg_blog_max_results');
		}).keyup(function(e) {
			checkNumRequired(this, '#msg_blog_max_results');
		}).val(max_results);
	}
	
	jQuery('#link_words').val(link_words);
	
	if (selectedBlog=="ameba") {
		jQuery("#blog-option").append('<p></p>').append('※アメーバブログをお使いの場合はアメーバ側の制約により、ブログの一部文章のみの表示になる場合があります。<br/>あらかじめご了承ください。');
	}
}

function getOption() {
	var blog = CBlog(selectedBlog);
	var blog_id =  jQuery('#blog_id').val();
	var blog_svr = jQuery('#blog_svr').val();
	var max_results = jQuery('#max_results').val();
	var link_words = jQuery('#link_words').val();
	var custom_domain = jQuery('#custom_domain').val();
	
	// blogspot.comのほうに入力された時は、カスタムドメインのID保持を解除する。
	if (selectedBlog == 'google') {
		if (blog_id != '') blogId = '';
	}
	
	return  createBlogOptionObject(blog, blog_id, blog_svr, max_results, link_words, custom_domain);
}

function setBlogOptionHtml(blog) {
	name = null;
	html = null;
	max  = "1〜";
	
	html = blogOptionHtml(blog);
	
	name = nameBlog[blog];
	max += countMAXBlog[blog] + "件";
	
	jQuery('#blog_name').html("「" + name + "」");
	jQuery('#option-values').html(html);
	jQuery('#msg_blog_max_results').html(max);
}

/*var OK_IMG = '<img src="../_modules/images/blog/ok.png" width="15" height="15" />';
var ERR_IMG = '<img src="../_modules/images/blog/ng.png" width="14" height="15" />';
var REQUIRED = '入力してください。';*/
var NUMERIC = '数値を入力してください。';
var LIMITED = '入力値が範囲(1〜%s件)外です。';

function checkNumRequired(el, msgId) {
	if (!document.getElementById("max_results")) { return true; }

	el = jQuery(el);
	blog = CBlog(selectedBlog);
	max = countMAXBlog[blog];

	if (el.val().length == 0) {
		jQuery(msgId).html(ERR_IMG + REQUIRED);
		return false;
	} else if (isNaN(el.val())) {
		jQuery(msgId).html(ERR_IMG + NUMERIC);
		return false;
	} else if (el.val()<1 || el.val()>max) {
		jQuery(msgId).html(ERR_IMG + LIMITED.replace("%s",max));
		return false;
	} else {
		jQuery(msgId).html(OK_IMG);
		return true;
	}
}

function checkRequired(el, msgId) {
	if (!document.getElementById(msgId.replace("#msg_",""))) { return true; }

	el = jQuery(el);
	if (el.val().length == 0) {
		jQuery(msgId).html(ERR_IMG + REQUIRED);
		return false;
	} else {
		jQuery(msgId).html(OK_IMG);
		return true;
	}
}

function checkRequiredForFC2(id,svr,msgId) {
	if (!document.getElementById(msgId.replace("#msg_",""))) { return true; }

	if (id.val().length == 0 || svr.val().length == 0) {
		jQuery(msgId).html(ERR_IMG + REQUIRED);
		return false;
	} else {
		jQuery(msgId).html(OK_IMG);
		return true;
	}
}

function checkRequiredGoogle(blogId, customDomain, msgId) {
	if (blogId.val().length == 0 && customDomain.val().length == 0) {
		jQuery(msgId).html(ERR_IMG + REQUIRED);
		return false;
	} else {
		jQuery(msgId).html(OK_IMG);
		return true;
	}
}

function blogOptionHtml(blog) {
	var html = null;

	html = "<table class='option-table'>";
	switch (blog) {
	case "google":
		html += "	<tr><th>ブログURL<span class='attention'>＊</span></th>";
		html += "<td>" + blogURLPrefix(blog) + "<input type='text' name='blog_id' id='blog_id' size='16' />" + blogURLSuffix(blog) + "<br />";
		html += 'もしくは<br />';
		html += 'http://<input type="text" name="custom_domain" id="custom_domain" size="20" /><br />';
		html += '<span class="attention" style="font-size:80%">※上が優先されます</span></td>';
		html += "<td><span id='msg_blog_id' class='msg'></span></td></tr>";
		break;
	case "yahoo":
	case "ameba":
	case "livedoor":
	case "jugem":
	case "cocolog":
	case "goo":
		html += "	<tr><th>ブログURL<span class='attention'>＊</span></th><td>" + blogURLPrefix(blog) + "<input type='text' name='blog_id' id='blog_id' size='16' />" + blogURLSuffix(blog) + "</td><td><span id='msg_blog_id' class='msg'></span></td></tr>";
		break;
	case "fc2":
		html += "	<tr><th>ブログURL<span class='attention'>＊</span></th><td>" + blogURLPrefix(blog) + "<input type='text' name='blog_id' id='blog_id' size='16' />.<input type='text' name='blog_svr' id='blog_svr' size='6' />" + blogURLSuffix(blog) + "</td><td><span id='msg_blog_id' class='msg'></td></tr>";
		break;
	}
	
	html += "	<tr><th>表示件数<span class='attention'>＊</span></th><td><input type='text' name='max_results' id='max_results' size='4' /></td><td><span id='msg_blog_max_results' class='msg'></span></td></tr>";
	html += '	<tr><th>「続きを読む」リンク<br />の文字</th><td><input type="text" name="link_words" id="link_words" size="26" /><br />';
	html += '<span class="attention" style="font-size:80%">※「この続きはわたしのブログへどうぞ」など</span></td>';
	html += '<td><span id="msg_link_words" class="msg"></span></td></tr>';
	html += "</table>";

	return html;
}

function setBlogTitle(blogTitle) {

//	if (CBlog(selectedBlog) != "google") {
		params = CObj(opRec);
		jQuery.getJSON(RSS_JSON_URI, params, function(json) {
			if (json!=null) {
				jQuery('#blog_name').append(json.feed.title.$t);
			}
		});
/*	} else {
		jQuery('#blog_name').append(blogTitle);
	}*/
}

function renderUsefulLink() {
	blog = CBlog(selectedBlog)
	
	var o = CObj(opRec);
	var id = o.blogid;
	if (blog=="fc2") { id = id + "." + o.blogsvr; }
	var blogLink = createBlogURL(blog, id);
	
	jQuery('#blog').append(nameBlog[blog]);
	jQuery('#blog_url').append(blogLink);
	jQuery('#max_results').append(o.max_results);
	jQuery('#design_layout').append(designTitle);

	switch (blog) {
	case "google":
		jQuery('#useful-link').append(googleUsefulLinkHTML());
		document.getElementById('original_link').href = "javascript:getUrl('" + blogLink + "')";
		jQuery.ajax({
			url: './get_blog_id',
			type: 'GET',
			data: {
				'u': blogLink
			},
			dataType: 'json',
			success: function(json) {
				blogId = json.blogId;
				document.getElementById('edit_link').href = "javascript:getUrl('http://www.blogger.com/post-create.g?blogID=" + blogId + "')";
				document.getElementById('setting_link').href = "javascript:getUrl('http://www.blogger.com/blog-options-basic.g?blogID=" + blogId + "')";
			},
			error: function(xhr, stats) {
				msgBox('通信エラー','ブログIDの取得に失敗しました。');
			}
		});
		break;
	case "yahoo":
	case "ameba":
	case "livedoor":
	case "fc2":
	case "jugem":
	case "cocolog":
	case "goo":
		if (blog=="fc2") { id = o.blogsvr; }
		writeLink = createWriteBlogURL(blog, id);
		settingLink = createSettingBlogURL(blog, id);

		jQuery('#useful-link').append(usefulLinkHTML(blog));
		document.getElementById('original_link').href = "javascript:getUrl('" + blogLink + "')";
		document.getElementById('edit_link').href = "javascript:getUrl('" + writeLink + "')";
		document.getElementById('setting_link').href = "javascript:getUrl('" + settingLink + "')";
		break;
	}
}

function googleUsefulLinkHTML() {

	html = "<div class='lcol'>";
	html += "<a href='javascript:;' id='original_link'><!--このブログのオリジナルページを開く--></a>";
	html += "<p>ブラウザが起動し、このブログのオリジナルページ（Bloggerでの公開ページ）が開きます。</p>";
	html += "</div>";
	html += "<div class='rcol'>";
	html += "<a href='javascript:;' id='edit_link'><!--このブログの投稿ページを開く--></a>";
	html += "<p>ブラウザが起動し、Bloggerの投稿ページが開きます。</p>";
	html += "</div>";
	html += "<div style='clear:both'></div>";
	html += "<div class='lcol'>";
	html += "<a href='javascript:;' id='setting_link'><!--このブログの設定ページを開く--></a>";
	html += "<p>このブログのBloggerでの設定を変更したいときにクリックしてください。ブラウザが起動し、Bloggerの設定ページが開きます。</p>";
	html += "</div>";
	html += "<div class='rcol'>";
	html += '<a href="javascript:getUrl(\'http://www.blogger.com/\');" id="blogger_link"><!--Bloggerのトップページを開く--></a>';
	html += "<p>ブラウザが起動し、Bloggerのトップページが開きます。</p>";
	html += "</div>";

	return html;
}

function usefulLinkHTML(blog) {

	html = "<div class='lcol'>";
	html += "<a href='javascript:;' id='original_link'><!--このブログのオリジナルページを開く--></a>";
	html += "<p>ブラウザが起動し、このブログのオリジナルページ（" + nameBlog[blog] + "での公開ページ）が開きます。</p>";
	html += "</div>";
	html += "<div class='rcol'>";
	html += "<a href='javascript:;' id='edit_link'><!--このブログの投稿ページを開く--></a>";
	html += "<p>ブラウザが起動し、" + nameBlog[blog] + "の投稿ページが開きます。</p>";
	html += "</div>";
	html += "<div style='clear:both'></div>";
	html += "<div class='lcol'>";
	html += "<a href='javascript:;' id='setting_link'><!--このブログの設定ページを開く--></a>";
	html += "<p>" + nameBlog[blog] + "での設定を変更したいときにクリックしてください。ブラウザが起動し、" + nameBlog[blog] + "の設定ページが開きます。</p>";
	html += "</div>";
	html += "<div class='rcol'>";
	html += "<a href=\"javascript:getUrl('" + urlTopBlog[blog] + "');\" id='blogger_link'><!--ブログのトップページを開く--></a>";
	html += "<p>ブラウザが起動し、" + nameBlog[blog] + "のトップページが開きます。</p>";
	html += "</div>";

	return html;
}