var currCursor = 1;
var totalIcons = 0;
var bottomIndex = 1;
var topIndex = 10;

function getCursor() {
  return currCursor;
}
function setCursor(cur) {
  currCursor = cur;
}
function getTotalIcons() {
  return totalIcons;
}
function setTotalIcons(icons) {
  totalIcons = icons;
}

function updateIcons(newCurr) {
  var total = getTotalIcons();
  if(total > 10) {
    if(!(newCurr >= bottomIndex && newCurr <= topIndex)){
      var dif = newCurr - 10;
      if(dif > 0) {
        bottomIndex = dif + 1;
        topIndex = newCurr;
      } else {
        bottomIndex = newCurr;
        topIndex = newCurr + 9;
      } 
      /*
      alert("Bottom: " + bottomIndex +
            "\nTop: " + topIndex
      );
      */
      for(i=1; i<=total; i++){
        if(i >= bottomIndex && i <= topIndex) {
          $("#icon_" + i).removeClass("hiddenIcon").removeClass("firstIcon");
          if(i == bottomIndex) {
            $("#icon_" + i).addClass("firstIcon");
          }
        } else {
          $("#icon_" + i).addClass("hiddenIcon").removeClass("firstIcon");
        }
      }  
    }
  }
  return true;
}

$(document).ready(function(){
  var base = $('#site_url').val();  
  $(".media_nav .section").append("<div id='slider_controls'><a href='#' id='more_left' title='Previous'><img src='"+base+"assets/css/cssimages/arrow-left.gif' alt='prev' title='' /></a> <a href='#' id='more_right' title='Next'><img src='"+base+"assets/css/cssimages/arrow-right.gif' alt='next' title='' /></a></div>");
  $("#mike").add("#icon_1").addClass("current");
  $(".updated").show();
  
  // Get total number of icons
  var numIcons = $("a[name='icon_nav']");
  setTotalIcons(numIcons.length);

// !THUMBNAIL BUTTONS ------------------------------------------------------------------
    $(".media_nav .home a.thumb").click(function(){
      // Update the current cursor position
      var currId = $(this).attr("id");
      var currCur = currId.replace("icon_","");
      setCursor((currCur*1));
           
      var nextStory = $(this).attr("href");
      var nextText = $(this).attr("rel");       
      var newOffsetStart = $(".media .section").offset().left;
      newOffsetStart += 870;
      boxMoveWidth = newOffsetStart * -1;

      $(".media .section").append("<div class='new_current'>");
      $("div.new_current").load(nextStory, function(){
        $("div.new_current .hero").css({ left: newOffsetStart });
        $(".story").fadeOut(500);
        $("div.current .callout").fadeOut(500, function(){
          $("div.current .hero").animate({ left: boxMoveWidth },1000,function(){
              $(this).parent().remove();
          });
          $("div.new_current .hero").show().animate({ left: "0" },1000,function(){
            $("div.new_current .callout").fadeIn(500);
            $(".content .section").load(base + "/stories/"+nextText, function(){
              $(".updated").fadeIn(500);
            });
            $("div.new_current").removeClass().addClass("current");
          });
        });
      });                                                              
      $(".media_nav .home a").removeClass("current");
      $(this).addClass("current");
      $(this).blur();
      return false;                                            
    });
    
    $(".hero").click(function(){
      var myCopy = $(this).attr("id");        
      $(".content .section").load(base + "/stories/"+myCopy+"/");
    });

// !RIGHT BUTTON ---------------------------------------------------------------------
    $("#more_right").click(function(){
      var currCur = getCursor();
      if(currCur >= getTotalIcons()) {
        setCursor(1);  
        currCur = 1;
      } else {
        setCursor(currCur+1); 
        currCur = currCur + 1;
      }
      /*
      alert("Right Button Clicked" +
            "\nCurrent Cursor: " + currCur +
            "\nMax Icons: " + getTotalIcons()     
      );
      */      
      var nextStory = $("#icon_" + currCur).attr("href");
      var nextText = $("#icon_" + currCur).attr("rel");
      
      var newOffsetStart = $(".media .section").offset().left;
      newOffsetStart += 870;
      boxMoveWidth = newOffsetStart * -1;

      $(".media .section").append("<div class='new_current'>");

      $("div.new_current").load(nextStory, function(){
          $("div.new_current .hero").css({ left: newOffsetStart });
          $(".story").fadeOut(500);
          $("div.current .callout").fadeOut(500, function(){
              $("div.current .hero").animate({ left: boxMoveWidth },1000,function(){
                  $(this).parent().remove();
              });
              $("div.new_current .hero").show().animate({ left: "0" },1000,function(){
                  $("div.new_current .callout").fadeIn(500);
                  $(".content .section").load(base + "/stories/"+nextText, function(){
                      $(".updated").fadeIn(500);
                  });
                  $("div.new_current").removeClass().addClass("current");
              });
          });
      });
      
      // Update the items to show
      updateIcons(currCur);
      
      $("#icon_" + currCur).addClass("new_current");
      $("a.current").removeClass("current");
      $("a.new_current").removeClass("new_current").addClass("current");

      $(this).blur();
      return false;
    });
    
// !LEFT BUTTON ---------------------------------------------------------------------
    $("#more_left").click(function(){
      var currCur = getCursor();
      if(currCur <= 1) {
        setCursor(getTotalIcons());  
        currCur = getTotalIcons();
      } else {
        setCursor(currCur - 1); 
        currCur = currCur - 1;
      }
      /*
      alert("Left Button Clicked" +
            "\nCurrent Cursor: " + currCur +
            "\nMax Icons: " + getTotalIcons()      
      );                           
      */
      var prevStory = $("#icon_" + currCur).attr("href");
      var prevText = $("#icon_" + currCur).attr("rel");

      var newOffsetStart = $(".media .section").offset().left;
      newOffsetStart += 870;
      boxMoveWidth = newOffsetStart;
      newOffsetStart *= -1;

      $(".media .section").append("<div class='new_current'>");
      $("div.new_current").load(prevStory, function(){
        $("div.new_current .hero").css({ left: newOffsetStart });
        $(".story").fadeOut(500);
        $("div.current .callout").fadeOut(500, function(){
          $("div.current .hero").animate({ left: boxMoveWidth },1000,function(){
            $(this).parent().remove();
          });
          $("div.new_current .hero").show().animate({ left: "0" },1000,function(){
            $("div.new_current .callout").fadeIn(500);
            $(".content .section").load(base + "/stories/"+prevText, function(){
              $(".updated").fadeIn(500);
            });
            $("div.new_current").removeClass().addClass("current");
          });
        });
      });
      
      // Update the items to show
      updateIcons(currCur);
        
      $("#icon_" + currCur).addClass("new_current");
      
      $("a.current").removeClass("current");
      $("a.new_current").removeClass("new_current").addClass("current");
      $(this).blur();
      return false;                                                     
    });
    
// !NEW BROWSER WINDOWS ------------------------------
    $('a[rel="external"]').click( function() {
      var myLink = $(this).attr('href');                              
      window.open(myLink);
      return false;
    });                                                          
});