var currentlyActiveTab = "isFollowing";
var currentFocus = new Object();
var isFollowingPages = 1;
var isFollowedByPages = 1;
var processingFollowers = false;

function clearNode( thisNode ) {
  while( thisNode.firstChild ) {
    thisNode.removeChild( thisNode.firstChild );
  }
}

function swapTabs( toWhich ) {
  if( toWhich != currentlyActiveTab ) {
    document.getElementById( currentlyActiveTab ).style.visibility = "hidden";
    document.getElementById( currentlyActiveTab+"Header" ).style.backgroundColor = "#ffffff";
    document.getElementById( toWhich ).style.visibility = "visible";
    document.getElementById( toWhich+"Header" ).style.backgroundColor = "#ffffcc";
    currentlyActiveTab = toWhich;
  }
}

function processOneEntry( elementType, elementTitle, elementContent ) {
  var elementTmp = document.createElement( elementType );
  var elementTextEntry = document.createTextNode( elementTitle + elementContent );
  elementTmp.appendChild( elementTextEntry );
  return elementTmp;
}

function showOneAvatarPic( myUri ) {
  var avatarNode = document.createElement( "img" );
  avatarNode.src = myUri;
  var subElement = document.createElement( "li" );
  subElement.appendChild( avatarNode );
  return avatarNode;
}

function processCoreResults( response ) {
  var listTmp = document.createElement( "ul" );
  var linkNode = document.createElement( "a" );
  linkNode.href = response.url;
  linkNode.appendChild( document.createTextNode( "Web home (click to visit) " ) );
  var subElement = document.createElement( "li" );
  subElement.appendChild( linkNode );
  listTmp.appendChild( subElement );
  if( !processingFollowers ) {
    subElement = document.createElement( "li" );
    subElement.appendChild( showOneAvatarPic( response.profile_image_url ) );
    listTmp.appendChild( subElement );
  }
  else {
    linkNode = document.createElement( "a" );
    linkNode.style.textDecoration="underline";
    linkNode.appendChild( document.createTextNode( "Avatar (click to show picture) " ) );
    linkNode.style.color="blue";
    linkNode.onmouseover = function() {
      this.style.cursor = "pointer";
    };
    linkNode.onmouseout = function() {
      this.style.cursor = "default";
    };
    linkNode.onclick = function() {
      var tmpNode = this.parentNode;
      var tmpImageUri = response.profile_image_url;
      clearNode( tmpNode );
      tmpNode.appendChild( showOneAvatarPic( tmpImageUri ) );
    };
    subElement = document.createElement( "li" );
    subElement.appendChild( linkNode );
    listTmp.appendChild( subElement );
  }
  listTmp.appendChild( processOneEntry( "li", "Description: ", response.description ) );
  listTmp.appendChild( processOneEntry( "li", "Location: ", response.location ) );
  listTmp.appendChild( processOneEntry( "li", "Tweets: ", response.statuses_count ) );
  listTmp.appendChild( processOneEntry( "li", "Following: ", response.friends_count ) );
  listTmp.appendChild( processOneEntry( "li", "Followed by: ", response.followers_count ) );
  listTmp.appendChild( processOneEntry( "li", "Favorites: ", response.favourites_count ) );
  listTmp.appendChild( processOneEntry( "li", "Protected updates: ", response.protected ) );
  listTmp.appendChild( processOneEntry( "li", "Account created: ", response.created_at ) );
  listTmp.appendChild( processOneEntry( "li", "TZ: ", response.time_zone ) );
  listTmp.appendChild( processOneEntry( "li", "ID: ", response.id ) );
  return listTmp;
}

function processCurrentFocus() {
  processingFollowers = false;
  var thisContainer = document.getElementById( "focusUser" );
  var subNode = document.createElement( "div" );
  subNode.appendChild( processOneEntry( "h2", "", currentFocus.screen_name + " (" + currentFocus.name + ")" ) );
  thisContainer.appendChild( subNode );  
  thisContainer.appendChild( processCoreResults( currentFocus ) );
  setupFirstPages();
}

function addOption( whichPage ) {
  var myOption = document.createElement( "option" );
  myOption.value = whichPage;
  myOption.appendChild( document.createTextNode( whichPage ) );
  return myOption;
}

function addFocusChangeButton( response ) {
  var subElement = document.createElement( "input" );
  subElement.type = "button";
  subElement.id = "clickHereForFocusChange";
  subElement.value = "Shift Focus";
  subElement.onclick = function( event ) {
    clearNode( document.getElementById( "isFollowing" ) );
    clearNode( document.getElementById( "isFollowingPages" ) );
    clearNode( document.getElementById( "isFollowedBy" ) );
    clearNode( document.getElementById( "isFollowedByPages" ) );
    clearNode( document.getElementById( "focusUser" ) );
    document.getElementById( "targetUser" ).value = response.screen_name;
    var targetUser = document.getElementById( "targetUser" ).value;
    var targetUriBase = "http://twitter.com/users/show/";
    var targetUriEnding = ".json?&callback=?";
    var fullUri = targetUriBase + targetUser + targetUriEnding;
    $.getJSON( fullUri, 
      function( data ) {
        currentFocus = data;
        processCurrentFocus();
        setupFirstPages();
      }
    );
  }
  return subElement;
}

function processFollower( oneFollower, whatTarget, whatSequenceNumber ) {
  processingFollowers = true;
  var thisContainer = document.getElementById( whatTarget );
  var subNode = document.createElement( "div" );
  subNode.appendChild( processOneEntry( "h2", whatSequenceNumber + ". ",  oneFollower.screen_name + " (" + oneFollower.name + ")" ) );
  subNode.appendChild( addFocusChangeButton( oneFollower ) );
  thisContainer.appendChild( subNode ); 
  thisContainer.appendChild( processCoreResults( oneFollower ) );
}

function getOnePage( whatType, whatPage ) {
  var targetUriBase = "http://twitter.com/statuses/friends/";
  var targetUriEnding = ".json?&callback=?";
  if( whatType == "isFollowing" ) {
    targetUriBase = "http://twitter.com/statuses/friends/";
  }
  else if ( whatType == "isFollowedBy" )  {
    targetUriBase = "http://twitter.com/statuses/followers/";
  }
  var fullUri = targetUriBase + currentFocus.screen_name + targetUriEnding + "&page=" + whatPage;
  $.getJSON( fullUri, 
    function( data ) {
      var currently = data;
      var counter = (whatPage-1) * 100;
      for( var key in currently ) {
        if( currently.hasOwnProperty( key ) ) {
          counter++;
          processFollower( currently[ key ], whatType, counter );
        }
      }
    }
  );
}

function setupFirstPages() {
  document.getElementById( "affiliations" ).style.display = "block";
  clearNode( document.getElementById( "isFollowing" ) );
  clearNode( document.getElementById( "isFollowedBy" ) );
  getOnePage( "isFollowing", "1" );
  getOnePage( "isFollowedBy", "1" );
  isFollowingPages = 1;
  if( currentFocus.friends_count > 100 ) {
    isFollowingPages = ( currentFocus.friends_count - (currentFocus.friends_count % 100) ) / 100;
    if( (currentFocus.friends_count % 100) > 0 ) {
      isFollowingPages++;
    }
  }
  isFollowedByPages = 1;
  if( currentFocus.followers_count > 100 ) {
    isFollowedByPages = ( currentFocus.followers_count - (currentFocus.followers_count % 100) ) / 100;
    if( (currentFocus.followers_count % 100) > 0 ) {
      isFollowedByPages++;
    }
  }
  var isFollowingSelect = document.getElementById( "isFollowingPages" );
  clearNode( isFollowingSelect );
  for( var pageCounter = 1; pageCounter <= isFollowingPages; pageCounter++ ) {
    isFollowingSelect.appendChild( addOption( pageCounter ) );
  }
  isFollowingSelect.onchange = function() {
    clearNode( document.getElementById( "isFollowing" ) );
    getOnePage( "isFollowing", isFollowingSelect.options[ isFollowingSelect.selectedIndex ].text );
  };
  var isFollowedBySelect = document.getElementById( "isFollowedByPages" );
  clearNode( isFollowedBySelect );
  for( var pageCounter = 1; pageCounter <= isFollowedByPages; pageCounter++ ) {
    isFollowedBySelect.appendChild( addOption( pageCounter ) );
  }
  isFollowedBySelect.onchange = function() {
    clearNode( document.getElementById( "isFollowedBy" ) );
    getOnePage( "isFollowedBy", isFollowedBySelect.options[ isFollowedBySelect.selectedIndex ].text );
  };
  swapTabs( "isFollowing" );
}