$(document).ready(function() {
    $('#liveMember').html([
        '<dt><a href="/session/live" title="一覧を見る">一覧を見る &gt;&gt;</a></dt>',
        '<dd><ul id="liveMemberData"></ul></dt>'].join('')
    );

    $.getJSON(
        '/live/limited/profile/14',
        null,
        function(json){
            $.each(json.user_list, function(i, user){
                user.profileImageList = user.profile_image.match(/static/) ? user.profile_image.replace('online', 'thumb') : user.profile_image.replace('na_160x120', 'na_80x60');

                var elmLi = $(['<li><a href="/profile/', user.username, '" id="lpl-', user.username, '" class="userImage"><img class="thumb" src="', user.profileImageList, '"></a></li>'].join('')).appendTo('#liveMemberData');
                $('#lpl-' + user.username).attr('title', user.display_name + 'さんのプロフィールを見る');

                var hasPrm = false;
                var divRoleImages = $('<ul class="prem_badge"></ul>');
                var imgSrc = {
                    'prefix':'<img src="/images/ja/member/premium_icon_',
                    'suffix':'.gif" />'};

                if ($.inArray('mystyle', user.roles) != -1) {hasPrm = true; divRoleImages.append($('<li>' + imgSrc.prefix + 'mystyle' + imgSrc.suffix + '</li>'));}else{divRoleImages.append($('<li></li>'));}
                if ($.inArray('yy', user.roles) != -1) {hasPrm = true; divRoleImages.append($('<li>' + imgSrc.prefix + 'yy' + imgSrc.suffix + '</li>'));}else{divRoleImages.append($('<li></li>'));}
                if ($.inArray('professional', user.roles) != -1) {hasPrm = true; divRoleImages.append($('<li>' + imgSrc.prefix + 'pro' + imgSrc.suffix + '</li>'));}else{divRoleImages.append($('<li></li>'));}
                if (user.broadcast_type == 'iphone'){hasPrm = true;}

                if(hasPrm == true){
                  var paths = [];
                  $('#lpl-' + user.username).addClass('Premium');
                  $.each(user.live_tag ,function(i, tag){
                    paths.push('<a href="/search/user?search_by=live_tag&keyword=' + encodeURIComponent(tag) + '">' + tag + '</a>');
                  });

                  var BroadcastTypeIcon;
                  var BroadcastImg = {
                    'ImgCode01':'<img src="/images/ja/search/icon_',
                    'ImgCode02':'.gif" class="broadcastImg" />'};
                  if (user.broadcast_type == 'hd'){BroadcastTypeIcon = BroadcastImg.ImgCode01 + 'hd' + BroadcastImg.ImgCode02;}
                  if (user.broadcast_type == 'iphone'){BroadcastTypeIcon = BroadcastImg.ImgCode01 + 'mobile' + BroadcastImg.ImgCode02;}
                  if (user.broadcast_type == 'normal'){BroadcastTypeIcon = '';}

                  paths = paths.join(' ');
                  var divPremiumPopupIn = $('<div class="divPremiumPopup-in"><a href="/profile/' + user.username + '"><img src="' + user.profile_image + '" /></a><p><strong>' + BroadcastTypeIcon + '<a href="/profile/' + user.username + '">' + user.display_name + '</a></strong>' + paths + '</p></div>').append(divRoleImages);
                  var divPremiumPopup = $('<div id="pop-' + user.username + '" class="divPremiumPopup"></div>').append(divPremiumPopupIn);
                  elmLi.append(divPremiumPopup);
                  }

                  // popup
                  var distance = 10;
                  var time = 100;
                  var hideDelay = 100;
                  var hideDelayTimer = null;
                  var beingShown = false;
                  var shown = false;
                  var popup = $('#pop-' + user.username).css('opacity', 0);
                    var paths = [];
                    $.each(user.live_tag ,function(i, tag) {
                        paths.push('/search/user?search_by=live_tag&keyword=' + encodeURIComponent(tag));
                    });
                  elmLi.mouseover(function() {
                    if (hideDelayTimer){ clearTimeout(hideDelayTimer); };
                    if (beingShown || shown) {
                      return;
                      }else{
                      beingShown = true;
                      popup.css({top: -125,left: -62,display: 'block'})
                           .animate({top: '-=' + distance + 'px',opacity: 1}, time, 'swing',function() {
                             beingShown = false;
                             shown = true;
                           });
                      }
                      }).mouseout(function() {
                    if (hideDelayTimer){ clearTimeout(hideDelayTimer); };
                    hideDelayTimer = setTimeout(function() {
                      hideDelayTimer = null;
                      popup.animate({top: '-=' + distance + 'px',opacity: 0}, time, 'swing', function () {
                             shown = false;
                             popup.css('display', 'none');
                           });
                      }, hideDelay);
                    });
            });
        }
    );
});