/* file: landing-new.js
   date: september 2008
   authors: kawashima, ahalsall, jeremydw
   purpose: animates slider for igoogle artist themes landing page and sets button URL
*/

//setting for making slide strip
var originPosition = {};
var is_animating = 0;
var currentSlide;
var currentStripPosition = 0;
var currentStripSlide = '';
var centeringPoint = 0;
var rightScrollLimit = 0;
var initScroll = 0; //Activate initial scroll animation:1, no action:0
var slideWidth = 100;
var slidesAtOnce = 9;
var initScrollAmount = 1800; //Scroll amount for initial scrolling animation.

function init() {
	var button = document.getElementById('getlink');
	button.onclick = tracking_handler;
  makeSlideStrip();
  show_selected_searchtip();
	centeringSelectedSlide(currentSlide);
}

function makeSlideStrip() {
  var slideTotal = 0;
  centeringPoint = Math.ceil(slidesAtOnce/2);
  for (var x in slideCode) {
    slideTotal++;
  }

  var i = 0;
  for (var code in slideCode) {
    if (i <= centeringPoint-1) {
      originPosition[code] = 0;
    } else {
      if (i >= slideTotal-centeringPoint+1)  {
        originPosition[code] = (slideTotal-slidesAtOnce)*slideWidth;
      } else {
        originPosition[code] = (i-centeringPoint+1)*slideWidth;
      }
    }
    i++;
  }

  rightScrollLimit = -1*(slideTotal-slidesAtOnce)*slideWidth;
}

// Slide animation function
function slide(goal, id, go_left, cp) {
  // @author:colin@evilfork.net 

  var div = document.getElementById(id);
  var animation = {};

  animation.time = 0.4;  // in seconds
  animation.fps = 60;
  animation.goal = goal;
  origin = 0.0;
  animation.origin = Math.abs(origin);
    
  animation.frames = (animation.time * animation.fps) - 1.0;

  var current_frame = 0;
  var motions = Math.abs(animation.goal - animation.origin);
  function animate() {  
    var ease_right = function (t) { return (1 - Math.cos(t * Math.PI))/2.0; };
    var ease = ease_right;
    if (go_left == 1) {
      ease = function(t) { return 1.0 - ease_right(t); };
    }
                    
    var left = (ease(current_frame/animation.frames) * Math.abs(animation.goal - animation.origin)) - cp; 
    div.style.left = '-' + left + 'px';
        
    current_frame += 1;
    if (current_frame == animation.frames) {
      is_animating = 0;
      window.clearInterval(timeoutId)
    }
  }

  var timeoutId = window.setInterval(animate, animation.time/animation.fps * 1000);
}

//Get style property
function getStyle(element, cssProperty){
  var elem = document.getElementById(element);
  if(elem.currentStyle){
    return elem.currentStyle[cssProperty]; //IE
  } else{
    var style =  document.defaultView.getComputedStyle(elem, null); //firefox, Opera
    return style.getPropertyValue(cssProperty);
  }
}

// Left and right arrows
function page_left() {
  var amount = slideWidth;
  animateSlide(amount, 'left');
}

function page_right() { 
  var amount = slideWidth;
  animateSlide(amount, 'right');
}

// Animate the strip
function animateSlide(amount,dir) {
  var thumblist = document.getElementById('thumblist');
  var rightarrow = document.getElementById('rightarrow');
  var leftarrow = document.getElementById('leftarrow');
  var currentStripPosition = parseInt(getStyle('thumblist','left'));
  var motionDistance;
  if (amount == slideWidth ) {
    motionDistance = slideWidth;
  } else {
    motionDistance = amount;
  }
  
  function aToggle(state,aDir) {
    if (state == 'on') {
      if (aDir =='right') {
        rightarrow.className = 'on';
        rightarrow.onclick = page_right;
      } else {
        leftarrow.className = 'on';
        leftarrow.onclick = page_left;
      }
    } else {
      if (aDir =='right') {
        rightarrow.onclick = null;
        rightarrow.className = ''; 
      } else {
        leftarrow.onclick = null;
        leftarrow.className = '';
      }
    }
  }
  
  function arrowChange(rP) {
    if (rP >= rightScrollLimit) {
      aToggle('on','right');
    }
    if (rP <= rightScrollLimit) {
      aToggle('off','right');
    }
    if (rP <= slideWidth) {
      aToggle('on','left');
    }
    if (rP >= 0) {
      aToggle('off','left');
    }
  }
      
  if (dir == 'right' && is_animating == 0) {
    is_animating = 1;
    slide(motionDistance, 'thumblist', 0, currentStripPosition);
    arrowChange(currentStripPosition-motionDistance);
  } else if (dir == 'left' && is_animating == 0) {
    is_animating = 1;
    rightStripPosition = currentStripPosition + motionDistance;
    slide(motionDistance, 'thumblist', 1, rightStripPosition);
    arrowChange(currentStripPosition+motionDistance);
  }
}

// Centering selected item
function centeringSelectedSlide(slideName) {
  var currentStripPosition = parseInt(getStyle('thumblist','left'));
  var dir = 'left';
  var originpoint = Math.abs(currentStripPosition);
  if (originpoint <= originPosition[slideName]) {
    dir = 'right';
  }
  var motionValue = Math.abs(originPosition[slideName]-originpoint);
  animateSlide(motionValue,dir);
}

function initMotion() {
  var thumblist = document.getElementById('thumblist');
  thumblist.style.left = '-' + initScrollAmount + 'px';
  animateSlide(initScrollAmount,'left');
}

var tracking_handler = function() {
  urchinTracker('/outgoing/add/' + slideCode[currentSlide].source);
}

// Toggles tip preview and proper button URL
function showPreview(slideName) {
  var oldSlide = document.getElementById(currentSlide);
  currentSlide = slideName;
  var slideNamethumb = document.getElementById(slideName);
  slideNamepreview = document.getElementById('previewContainer');

  var previewAbout = document.getElementById('previewAbout');
  var imgFull = document.getElementById('imgFull');
  var imgBanner6 = document.getElementById('imgBanner6');
  var imgBanner12 = document.getElementById('imgBanner12');
  var imgBanner18 = document.getElementById('imgBanner18');

  imgFull.src = 'images/themes/' + slideName + '/full_thumb_6.jpg';
  imgBanner6.src = 'images/themes/' + slideName + '/banner_sm_6.jpg';
  imgBanner12.src = 'images/themes/' + slideName + '/banner_sm_12.jpg';
  imgBanner18.src = 'images/themes/' + slideName + '/banner_sm_18.jpg';
  oldSlide.className = '';
  slideNamethumb.className = 'selected';
	button = document.getElementById('getlink');
	button.href = igUrl + slideCode[slideName].skin +
                '&source=' + slideCode[slideName].source;
	button.onclick = tracking_handler;
  previewAbout.innerHTML = slideCode[slideName].about;
	centeringSelectedSlide(slideName);
}

// Chooses an tip randomly to show on pageload, or displays the one indicated by #name=
function show_selected_searchtip() {
  var hash = window.location.hash;
  if (hash.length) {
    slideNamepreview = document.getElementById('previewContainer');
    var s = 'name=([^&]*)';
    var regex = new RegExp(s);
    var results = regex.exec(hash);
    if (results != null) {
      currentSlide = results[1];
      animateSlide(originPosition[currentSlide],'right');
      showPreview(currentSlide);
      return;
    }
    else {
      currentSlide = defaultSlide;
      animateSlide(originPosition[currentSlide],'right');
      showPreview(currentSlide);
      return;
    }
  }
  else {
    currentSlide = defaultSlide;
    animateSlide(originPosition[currentSlide],'right');
    showPreview(currentSlide);
    return;
  }
  if (initScroll == 1) {
    initMotion();
  }
}