/**
 * 今日のつぶやき（選手とスタッフ）部分を制御するJavaScript
 */
$(function(){
    var team_api = base_url + 'datafile/today_players.js';
    var staff_api = base_url + 'datafile/today_staff.js';
    var proxy_url = base_url + 'caution.php?url=';
    var icon_max = 4; // 一度に表示できるつぶやき欄の写真の枚数
    var pixelsToMove = 65; // つぶやき欄の左右スクロールの移動距離
    var disabledTransparency = 0.2; // つぶやき欄の左右スクロールボタンの無効時の透過度

    /*------------------------------
      メインルーチン
    --------------------------------*/
    todayTeamTweener();
    todayTeamStaff();

    /*------------------------------
      本日のつぶやき(選手)
    --------------------------------*/
    function todayTeamTweener (){
    var api_url = team_api;
    $.getJSON(api_url, {}, function(json) {
      $.each(json.users, function(i, n){
        var image = $('<td><a href="#"><img /></a></td>');
        $('img', image).attr('src', this.profile_image_url);
        $('a', image).data(this);
        $("#player .today .items tr").append(image);
        });
        // add popup event
        showProfilePopup($('#player .today'));
        // add scroll event
        $('a.prevPage', $('#player')).fadeTo(0, disabledTransparency);
        $('a.nextPage', $('#player')).fadeTo(0, disabledTransparency);
        if($('#player .today td').length > icon_max){
          $('a.nextPage', $('#player')).fadeTo(0, 1);
          addScrollEvent($('#player'), $('#player .today td').length - icon_max);
          }
      });
    };

    /*------------------------------
      本日のつぶやき(スタッフ)
    --------------------------------*/
    function todayTeamStaff (){
      var api_url = staff_api;
      $.getJSON(api_url, {}, function(json) {
          $.each(json.users, function(i, n){
            var image = $('<td><a href="#"><img /></a></td>');
            $('img', image).attr('src', this.profile_image_url);
            $('a', image).data(this);
            $("#staff .today .items tr").append(image);
        });
        // add popup event
        showProfilePopup($('#staff .today'));
        // add scroll event
        $('a.prevPage', $('#staff')).fadeTo(0, disabledTransparency);
        $('a.nextPage', $('#staff')).fadeTo(0, disabledTransparency);
        if($('#staff .today td').length > icon_max){
          $('a.nextPage', $('#staff')).fadeTo(0, 1);
          addScrollEvent($('#staff'), $('#staff .today td').length - icon_max);
          }
      });
    };

    /*--------------------------------------------------------
      プロフィールポップアップをクリック表示するイベント関数
    --------------------------------------------------------*/
    function showProfilePopup(area){
      $('td a', area).click(function(){
          var data = $(this).data();
          var target = $('#profOpen');
          $('#profName span', target).text(data.screen_name + ' (' + data.name + ')');
            $('#profImg img', target).attr('src', data.profile_image_url + '?' + Math.floor(Math.random() * 10000));
            $('#profUrl a', target).text(""); // clear first
            $('#profUrl a', target).attr('href','').attr('href', proxy_url + data.url).text(data.url);
            $('#profDiscription', target).text(data.description);
            target.css('display','block');
            return false;
            });
          }

    /*----------------------------------
     * スクロールイベント
     *--------------------------------*/
    function addScrollEvent(area, exceeds){
      var target = $('.items', area);
      target.data({'moved':0, 'limit':exceeds});
      var rightButton = $('a.nextPage', area);
      var leftButton = $('a.prevPage', area);
      // 右側ボタンクリック
      rightButton.click(function(){
        var limit = target.data('limit') - 1;
        if(limit >= 0){
          var toMove = target.data('moved') + pixelsToMove;
          target.animate({'scrollLeft': toMove});
          $(this).show();
          var data = {'moved' : toMove, 'limit' : limit };
          target.data(data);
        }
        if(limit == 0){
          $(this).fadeTo(0, 0.5);
          leftButton.fadeTo(0,1);
        }
        return false;
      });
      // 左側ボタンクリック
      leftButton.click(function(){
        var limit = target.data('limit') + 1;
        if(limit <= exceeds){
          var toMove = target.data('moved') - pixelsToMove;
          target.animate({'scrollLeft': toMove});
          var data = {'moved' : toMove, 'limit' : limit };
          target.data(data);
        }
        if(limit == exceeds){
          $(this).fadeTo(0, 0.5);
          rightButton.fadeTo(0,1);
        }
        return false;
      });
    }
})