$.jQTouch({
	icon: './img/icon.png',
	statusBar: 'black',
	startupScreen: './img/jqt_startup.png',
	preloadImages: [
		'./css/img/chevron_white.png',
		'./css/img/bg_row_select.gif',
		'./css/img/back_button.png',
		'./css/img/back_button_clicked.png',
		'./css/img/button_clicked.png',
		'./css/img/grayButton.png',
		'./css/img/whiteButton.png',
		'./css/img/loading.gif',
		'./img/jqtouch.png'
	]
});

$(function(){
	// init
	var cards = [];
	var backButton = '<a href="#" class="button back">戻る</a>';
	var colorList = '<ul><li class="color_R">赤</li><li class="color_P">紫</li><li class="color_G">緑</li><li class="color_W">白</li><li class="color_Y">黄</li><li class="color_B">青</li><li class="color_M">混色</li></ul>';
	
	var addPage = function(pName, pTitle, pContent){
		$("<div></div>").attr("id", pName).append("<div></div>").children()
									.addClass("toolbar").append("<h1>" + pTitle + "</h1>").append(backButton).end()
									.append(pContent)
									.appendTo("body");
	};
	
	var showCard = function(e, id){
		function markup(abls)
		{
			var p;
			
			abls = abls.replace(/［/g, '[');
			abls = abls.replace(/］/g, ']');
			
			var part = abls.split('\\n');
			
			for(var i = 0; i < part.length; i++){
				var abl = part[i];
				var flag = false;
				if((p = abl.indexOf("』")) >= 0){
					flag = true;
					abl = abl.substr(0, p + 1) + "<br />" + abl.substr(p + 1);
					abl = abl.replace(/『/g, '<span class="abl_timing">『');
					abl = abl.replace(/』/g, '』</span>');
				}
				if((p = abl.indexOf("]")) >= 0){
					if(!flag) abl = abl.substr(0, p + 1) + "<br />" + abl.substr(p + 1);
					abl = abl.replace(/\[/g, '<span class="abl_lv">');
					abl = abl.replace(/\]/g, '</span>');
				}
				if(abl.indexOf("【") >= 0){
					abl = abl.replace(/\【/g, '<span class="abl_name">');
					abl = abl.replace(/\】/g, '</span>');
				}
				if((p = abl.indexOf('<br /><span class="abl_name">')) >= 0){
					var p2 = abl.indexOf("</span>", p);
					if(abl.substr(p2 + 7, 1) != "を"){
						abl = abl.substr(0, p) + abl.slice(p + 6, p2 + 7) + abl.substr(p, 6) + abl.substr(p2 + 7);
					}
				}
				if(abl.indexOf("BP+") >= 0){
						abl = abl.replace(/BP\+\d+/g, '<span class="abl_bp">$&</span>');
				}
				
				part[i] = abl;
			}
			return '<p class="abl">' + part.join('</p><p class="abl">') + '</p>';
		}
		
		if(!id)	id = $(this).attr("id").substr(1);
		var card = cards[id];
		var cardStr = card.id;
		if(cardStr < 0){
			cardStr = "X" + ("0" + (-cardStr).toString()).slice(-2);
		}else{
			cardStr = ("00" + cardStr.toString()).slice(-3);
		}
		var expStr = card.exp;
		if(expStr != "P"){
			expStr = expStr + "-";
		}
		$("#view_img").attr("src", "../img/" + expStr + cardStr + ".png");
		$("#view_abl").html(markup(card.abl));
		$("#view_name").text(card.name);
		$("#view_cost").text(card.cost + " - " + card.redc);
		if(card.core[2] == 0){
			card.core.pop();
			card.bp.pop();
		}
		$("#view_pow").html(card.core.join(" / ") + "<br />" + card.bp.join(" / "));
		
		$("#view").data("scrollY", window.scrollY);
		$("#view").data("id", id);
		
		var sy = window.scrollY;
		$('#exp_' + card.exp + "_color_" + card.col).bind('pageTransitionEnd', function(e, info){
			if(info.direction == "in"){
				setTimeout(function(){scrollTo(0, sy);}, 0);
				$(this).unbind("pageTransitionEnd");
			}
		});
	};
	
	var getList = function(){
		$("#cardlist ul").empty();
		
		var param = {};
		$.getJSON("../search.php", param, function(json){
			var len = json.length;
			var old, expList;
			for(var i = 0; i < len; i++){
				var card = json[i];
				var cexp = card.exp;
				
				if(i == 0 || card.exp != old.exp){
					$("#cardlist ul").append('<li><a href="#exp_' + cexp + '">' + cexp + "</a></li>");
					
					addPage("exp_" + cexp, cexp, colorList);
					
					$("#exp_" + cexp + " ul li").each(function(){
						var colorPageID = "exp_" + cexp + "_" + $(this).attr("class");
						$(this).wrapInner('<a href="#' + colorPageID + '"></a>');
						addPage(colorPageID, cexp + " / " + $(this).text(), '<ul class="form"></ul>');
					});
				}
				
				if(card.col.length > 1) card.col = "M";
				$("#exp_" + cexp + "_color_" + card.col + " ul").append('<li><a href="#view" class="cid flip" id="i' + i + '">' + card.name + '</a></li>');
				old = card;
			}
			
			$("a.cid").click(showCard);
			$("#home_info").append(" ok, " + len + " cards!");
			setTimeout(function(){$("#home_info").fadeOut("slow", function(){$("#home_info").text(len + " cards available").fadeIn();})}, 1000);
			cards = json;
		});
	}();
	
	
	$('#view').addTouchHandlers().bind('swipe', function(e, data){
		var now = $("#view").data("id");
		if(data.direction == "left"){
			showCard(null, --now);
		}else{
			showCard(null, ++now);
		}
	});
});