var nameFieldSelector = '.nameField';
var nameFieldDefault = 'ナマエをいれてください';
var maouText = [];
var maouTextIndex = 0;

function showMaou(text) {
maouText = text;
maouTextIndex = 0;
$('.logo').hide();
$('.maou').fadeIn(100);
$('.data').click(showMaouText);
showMaouText();
}
function showMaouText() {
  if (maouTextIndex >= maouText.length) {
    hideMaou();
    showDesc();
    return;
  }
    
$('.maou p').html(maouText[maouTextIndex].replace(/\n/mg,'<br />'));
++maouTextIndex;
}

function hideMaou() {
$('.data').unbind('click');
$('.maou').fadeOut(100);
}

function showDesc() {
  setTimeout(function(){$('div.data .text').html("これは「ダウンロードストーリー」専用の「ずかん」です。<br />ダウンロードストーリーに現れる勇者たちの名前を上の欄に入力すると、<br />その情報を確認することができます。<br />ゲーム本編で登場する勇者や魔物の情報を知りたい場合は、<br />ゲーム内の「ずかん」をご利用ください。").fadeIn(50);
$('.logo').fadeIn(50);
}, 500);
}

function resetNameField(o) {
  $(o ? o : nameFieldSelector).css('color','#999').val(nameFieldDefault);
}

$(function() {
for (var i=1; i<=1; ++i) {
  $('#profiles').append('<div class="profile"><form class="name"><input name="profName'+i+'" type="text" class="nameField"><input type="submit" value="ページをひらく" class="submit"></form><br /><div class="numname"><br /></div><div class="data"><img src="img/logo.gif" class="logo" /><div class="anim"><p id="anim'+i+'"></p></div><div class="spec"></div><div class="param"></div><div class="text"></div><div class="maou"><p></p></div></div></div>');
}

  resetNameField();
  $(nameFieldSelector).focus(function() {
    var self = $(this);
    if (self.val() == nameFieldDefault) self.val('');
    self.css('color','#fff');
  }).blur(function() {
    if ($(this).val() == '') resetNameField(this);
  });

  $('.submit').hover(
		     function(){$(this).css('background','#999')},
		     function(){$(this).css('background','transparent')})
.focus(function(){$(this).css('background','#999')})
.blur(function(){$(this).css('background','transparent')});

  $('.profile form').submit(function(){
    var profName = $(nameFieldSelector).val();

    if (!profName) resetNameField();
    if (!profName || profName == nameFieldDefault) return false;

    var dataDiv = $(this).parent('div').children('div.data');
    $.getJSON(profile_php+encodeURI(profName)+'?'+(new Date).getTime(), function(json) {

      if (json.num < 0) {
	dataDiv.prev('.numname').html('<br />');
	dataDiv.children('.anim').html('<p id="anim1"></p>').fadeOut(100);
	dataDiv.children('.spec').html('').fadeOut(100);
	dataDiv.children('.param').html('').fadeOut(100);
	dataDiv.children('.text').html('').fadeOut(100);
	showMaou(json.maou);

      } else {
	hideMaou();
	$('.logo').hide();
	swfobject.embedSWF('swf/'+json.anim+'.swf', 'anim1', '72', '60', '9.0',
			   '', {}, {wmode:'transparent'});
	dataDiv.children('.anim').fadeIn(50);
	dataDiv.prev('.numname').html(json.num+'<span class="specLi">■</span>'+json.name);
	dataDiv.children('.spec').html(json.spec.replace(/^/mg,'<span class="specLi">■</span>').replace(/$/mg,'<br />')).fadeIn(50);
	dataDiv.children('.param').html(json.param).fadeIn(50);
	dataDiv.children('.text').html(json.text.replace(/\n/mg,'<br />')).fadeIn(50);
      }

    });
    return false;
});


showDesc();

});