//store the current parameter
var parameters = {page : 1 , sex : null , category : null , type : null , sale : null , stage : null};
var limit = 9; //constatnt
var max_page_count = 5; //constant 
var avatar_exist = true;
var shop_items = new Array();
var g_items = new Array();
var avt_sex = null;


function navigateToAll(_name){
  var tmp = {sex:parameters['sex'] , category:parameters['category'] ,
             type:parameters['type'] , sale:parameters['sale'] , stage:parameters['stage']};
  tmp[_name] = null;
  loadShop(shop_items ,1, tmp['sex'] , tmp['category'] , tmp['type'] , tmp['sale'] , tmp['stage']);
}


//絞込み
function navigateTo(_sex , _category , _type , _sale , _stage){
  var n_sex = _sex;
  var n_category = _category;
  var n_type = _type;
  var n_sale = _sale;
  var n_stage = _stage;

  if(n_sex && n_sex == parameters['sex'])return;
  if(n_category && n_category == parameters['category'])return;
  if(n_type && n_type == parameters['type'])return;
  if(n_sale && n_sale == parameters['sale'])return;
  if(n_stage && n_stage == parameters['stage'])return;
  
  if(n_sex == null)n_sex = parameters['sex'];
  if(n_category == null)n_category = parameters['category'];
  if(n_type == null)n_type = parameters['type'];
  if(n_sale == null)n_sale = parameters['sale'];
  if(n_stage == null)n_stage = parameters['stage'];
  
  loadShop(shop_items , 1 , n_sex , n_category , n_type , n_sale , n_stage);
}


//shop loader
function load() {
  $.getJSON('userinfo_nologin.php' , loadFirst);
}


function loadFirst(userinfo){
  loadUserInfo(userinfo);
  shopLoadUserInfo(userinfo);
  $.getJSON('shopinfo_nologin.php' , loadMain);
}


function loadMain(json){
  params = getPageParameters();
  var page = params['page'];
  var sex = params['sex'];
  var category = params['category'];
  var type = params['type']; //{0:新着 , 1:期間限定 , 2:ゲームタイトル関連 }
  var sale = params['sale']; //free/wallet/point
  var stage = params['stage'];
  if(!page)page = 1;
  if(!sex)sex = null;
  if(!category)category = null;
  if(!type)type = null;
  if(!sale)sale = null; 
  if(!stage)stage = null;
  shop_items = json;
  loadShop(json , page , sex , category , type , sale, stage); 
}


function loadShop(items , page , sex , category , type , sale , stage) {
  //clear current content
  document.getElementById('item_list').innerHTML = '';
  document.getElementById('item_list').className = 'item_list';
  document.getElementById('page_navigator').innerHTML = '';

  //generate main contents
  var cnt = 0;
  var list = new Array();

  for(var j = 0 ; j < items.length ; j++)
  {
    var ok = true;
    if(items[j]['display'] != 1)ok=false;
    if(category != null && category != items[j]['category'])ok = false;
    if(sex != null && items[j]['sex'] != sex && items[j]['sex']!=3)ok = false;
    if(sale != null && items[j]['point_type'] != sale)ok = false;
    if(type == 0 && items[j]['new'] != true)ok = false;
    if(type == 1 && items[j]['limits'] != 1)ok = false;
    if(type == 2 && items[j]['game'] != 1)ok = false;
    if(stage != null && items[j]['rank'] != stage)ok = false;
    
    if(ok){
      if( list.length < limit && cnt >= limit*(page-1) )list.push(items[j]);
      cnt++;
    }
  }

  // リストが短くなったらavatar_boxをページトップへ
  if (list.length < limit-3) $('#avatar_box').css('top','10px');

  //該当する項目が存在しないとき
  if(list.length == 0){
    $('#item_list').html('<div style="margin:30px auto;color:red;font-size:12px;font-weight:bold;text-align:center;">No Applicable Items Found.</div>');
    $('#page_navigator').hide();
  }else{
    $('#page_navigator').show();
  }

  //ここ以降で保存するのが重要
  //store parameters
  parameters['page'] = page;
  parameters['sex'] = sex;
  parameters['category'] = category;
  parameters['type'] = type;
  parameters['sale'] = sale;
  parameters['stage'] = stage;
  
  //convert list element to html
  for(var k = 0; k < list.length ; k++)
  {
    document.getElementById('item_list').appendChild(genItemHTML(list[k]));

    if(k%3 == 2 && k != limit-1)
    {
      var bar = document.createElement('div');
      bar.className = 'hr_type1';
      document.getElementById('item_list').appendChild(bar);
    }
    if(k%3 != 2 && k == list.length-1 &&  k != limit-1)
    {
      var bar = document.createElement('div');
      bar.className = 'hr_type1';
      document.getElementById('item_list').appendChild(bar);
    }
    if(k == limit-1 )
    {
      var bar = document.createElement('div');
      bar.className = 'hr_type1';
      document.getElementById('item_list').appendChild(bar);
    }

  }

  var div_clear = document.createElement('div');
  div_clear.className = 'clear';
  document.getElementById('item_list').appendChild(div_clear);

  //generate page navigator
  var totalPage = Math.floor(cnt / limit);
  if(cnt > totalPage*limit)totalPage += 1;
  var minPage = 1;
  var maxPage = totalPage;

  if((page - minPage)*2 + 1 > max_page_count)minPage = page -(max_page_count-1)/2;
  if(maxPage - minPage + 1 > max_page_count)maxPage = minPage + (max_page_count-1);
  if( page > (maxPage - max_page_count) ) minPage = maxPage - max_page_count + 1;
  if( maxPage < max_page_count ) minPage = 1;

  var prevPage = document.createElement('span');
  prevPage.className = 'page_back';
  if(parameters['page'] > 1){
     var link = document.createElement('a');
     link.href = '';
     link.onclick = 
       function(){
         loadShop(items , page-1 , sex , category , type , sale , stage);
         return false;
       }
     link.appendChild(document.createTextNode('Prev'));
     prevPage.appendChild(link);
  }else{
     prevPage.appendChild(document.createTextNode('Prev'));
  }
  document.getElementById('page_navigator').appendChild(prevPage);

  for(var k = minPage ; k <= maxPage ; k++)
  {
    var pageNum = document.createElement('span');
    pageNum.className = 'page_number';
    if(k == page){
      var c = document.createElement('span');
      c.className = 'page_now';
      c.appendChild(document.createTextNode(k));
      pageNum.appendChild(c);
    }else{
      var c = document.createElement('a');
      c.href = '';
      c.onclick = 
        function(){
          var p = this.firstChild.nodeValue;
          loadShop(items , p , sex , category , type , sale , stage);
          return false;
        };
      c.appendChild(document.createTextNode(k));
      pageNum.appendChild(c);
    }
    document.getElementById('page_navigator').appendChild(pageNum);
  }

  var nextPage = document.createElement('span');
  nextPage.className = 'page_next';
  if(page < totalPage){
    var link = document.createElement('a');
    link.href = '';
    link.onclick = 
      function(){
        loadShop(items , 1+Number(page) ,sex , category , type , sale , stage);
        return false;
      };
    link.appendChild(document.createTextNode('Next'));
    nextPage.appendChild(link);
  }else{
    nextPage.appendChild(document.createTextNode('Next'));
  }
  document.getElementById('page_navigator').appendChild(nextPage);
  //ここまでPage navigatoir生成

  // 右端のマージン制御
  $("#item_list div.item:nth-child(4n+3)").addClass("third_child");
}

function genItemHTML(ns){
  var root = document.createElement('div');
  root.className = 'item';

  var icon = document.createElement('div');
  icon.className = 'icon tooltip_item';
  icon.title = ns['name'];

  var img1 = document.createElement('img');
 
  if(ns['photo_b']){
    img1.src = '/na/data/images/org/' + ns['photo_b'];
  }else{
    img1.src = './data/images/item_icon.jpg';
  }
  img1.className = 'icon';
  icon.appendChild(img1);
  if(ns['new']){   //新着アイテムには、New表示を！
    var fuga = document.createElement('div');fuga.className = 'new';
    icon.appendChild(fuga);
  }
  root.appendChild(icon);
  
  var setumei = document.createElement('div');
  setumei.className = 'setumei';

    if( ns['limits'] == 1 ){  //限定アイテムには、限定アイコンを!!
    var img2 = document.createElement('img');
    img2.src = './data/images/icon_12.gif';
    setumei.appendChild(img2);
  }
  if( ns['rank'] > 1 ){  // ステージアイテムにアイコン
    var img3 = document.createElement('img');
    if( ns['rank'] == 2 ) img3.src = './data/images/icon_03.gif';
    if( ns['rank'] == 3 ) img3.src = './data/images/icon_06.gif';
    if( ns['rank'] == 4 ) img3.src = './data/images/icon_08.gif';
    if( ns['rank'] == 5 ) img3.src = './data/images/icon_10.gif';
    setumei.appendChild(img3);
  }

  var name = document.createElement('span');

  if(ns['name']){
    var _name = ns['name'];
    if(_name.length > 30)_name = _name.substring(0,30) + '...';
    name.innerHTML = _name;
  }

  setumei.appendChild(name);
  root.appendChild(setumei);
  root.appendChild( createSlot(ns) );  //装備スロット

  var sex_match = ((!(ns['sex'] == 1 && avt_sex == 'f')) && (!(ns['sex'] == 2 && avt_sex == 'm'))) || (ns['sex'] == 3);

  var soubi = document.createElement('div');
  soubi.className = 'soubi';
  for(var i = 1 ; i <= 3 ; i++)
  {
    var p = document.createElement('div');
    p.className = 'parts0' + i;
    if(i == 1){ //値段
        var priceDOM = document.createElement('span');
        priceDOM.className = 'price';
        var imageDOM = document.createElement('img');
        if(ns['point_type'] == 0){  //無料アイテム
          priceDOM.innerHTML = '<img src="./data/images/icon_price_free.gif" />';
        }else if(ns['point_type'] == 1){   //Walletアイテム
          priceDOM.innerHTML = '<img src="./data/images/icon_price_coin.gif" />' + ns['point'];
        }else{
          priceDOM.innerHTML = '<img src="./data/images/icon_price_point.gif" />' + ns['point'];
        }
        p.appendChild(priceDOM);
    }else if(i == 2){//カートボタン
        var cart_text = document.createElement('span');
        cart_text.appendChild(document.createTextNode("Get it"));
        p.appendChild(cart_text);
    }else if(i == 3){ //試着する
        var equip_text = document.createElement('span');
        equip_text.appendChild(document.createTextNode("Try it on"));
        p.appendChild(equip_text);
    }
    soubi.appendChild(p);
  }
  root.appendChild(soubi);
  return root;
}

function shopLoadUserInfo(ls) {
    avt_sex = ls['sex'];
    if(!avt_sex){
      avatar_exist = false;
      return;
    }
    setitem_id = ls['setitem_id'];

    if(sex == 'm'){
      for(var i = 0 ; i < init_list.length ; i ++)init_list[i] = m_init_list[i];
    }else{
      for(var i = 0 ; i < init_list.length ; i ++)init_list[i] = f_init_list[i];
    }

    for(var i = 0 ; i < equip_list.length ; i++)def_list[i] = equip_list[i];
}


function createSlot(ns){
  var category_indices = new Array(null,1,4,5,6,7,8,9,2,11,13,12);
  var category_keys = new Array( null ,'hat', 'ubody', 'lbody', 'hand', 'shoes',
                                'ritem', 'litem', 'hair', 'motion', 'background_effect', 'background');
  var bui_indices = new Array(0,2,3,4,5,6,7,8,9,10,12,11);
  var digit = new Array(0,0,0,0,0,0,0,0,0,0,0,0);

  var bui = document.createElement('div');
  bui.className = 'bui';

  var row = document.createElement('div');
  row.className = 'row';

  if(ns['category'] != 'setitem'){
    for(var j = 1, len = category_indices.length ; j < len ; j++){
      if(ns['category'] == category_indices[j]){
        digit[j] = 1;
      }
    }
  }else{
    for(var j = 1, len = category_keys.length ; j < len ; j++){
      if(j == 10 || ns[category_keys[j]] == 1){//なんでも装備可能
        digit[j] = 0;
      }else if(ns[category_keys[j]] == 2){ //装備禁止
        digit[j] = 2;
      }else{
        digit[j] = 1;
      }
    }
  }
  var img = document.createElement('img');
  img.src = './data/images/bui/' + digit.join("") + '.gif';
  img.alt = ns['name'];
  img.className = 'wide';
  row.appendChild(img);

  bui.appendChild(row);
  return bui;
}