var repeat=0;

var scrolling = false;
var left0AniFlag = true;
var left1AniFlag = true;
var left2AniFlag = true;
var left3AniFlag = true;
var centerAniFlag = true;
var right3AniFlag = true;
var right2AniFlag = true;
var right1AniFlag = true;
var right0AniFlag = true;

function nextCard(){
  zoomOutCenter(moveContentLeft);
};

function lastCard(){
  zoomOutCenter(moveContentRight);
};

function startScrollRight() {
  if (!scrolling) {
    clearInterval(autoScroll);
    scrolling = true;
    zoomOutCenter(moveContentLeft);
  }
};

function startScrollLeft() {
  if (!scrolling) {
    clearInterval(autoScroll);
    scrolling = true;
    zoomOutCenter(moveContentRight);
  }
};

function endScroll() {scrolling=false;return false;};

function moveContentRight() {
  // make sure animation is done before starting again
  if (left0AniFlag && left1AniFlag && left2AniFlag && left3AniFlag && centerAniFlag &&
        right0AniFlag && right1AniFlag && right2AniFlag && right3AniFlag) {
    
    // figure out if we need to repeat a # of times
    if (repeat>1) {
      scrolling = true;
      repeat--;
    } else if (repeat==1) {
      scrolling = false;
      repeat--;
    }

    //find new start and end point - we have to wrap the product array so the last is next to the first
    if (scrollerEnd-1 < 0) scrollerEnd = productCount-1;
    else scrollerEnd--;
    if (scrollerStart-1 < 0) scrollerStart = productCount-1;
    else scrollerStart--;
    
    //Preload next image
    if (scrollerStart-1 < 0) preLoad(products[productCount-1].img);
    else preLoad(products[scrollerStart-1].img);

    //New card becomes left-most
    position[1] = scrollerStart;
    left1AniFlag=false;
    $('#card-window').append('<img id="card-'+scrollerStart+'" onclick="return scrollTo(this)" '+
        'style="position:absolute;left:-20px;z-index:80;width:90px;height:58px;display:none;top:12px;cursor:pointer;" '+
        'alt="'+products[scrollerStart].name+' card image" src="'+products[scrollerStart].img+'"/>'
        );

    /*
    $('#card-window').prepend("<a href=\"/phone-card/"+products[scrollerStart].code.toLowerCase()+"/\""+
        'style="position:absolute;left:-20px;z-index:80;width:90px;height:58px;display:none;top:12px;"'+
        ' id="card-'+scrollerStart+"\" onclick=\"return scrollTo(this)\" >"+
        '<img border="0" style="width:90px;height:58px;" alt="'+products[scrollerStart].img+' card image"'+
        ' src="'+products[scrollerStart].img+'"/></a>'
        );
    */  
    //$('#card-'+scrollerStart).click(eval("function() {return scrollTo('"+scrollerStart+"')}"));
    $('#card-'+scrollerStart).css('zIndex', 100).animate({left: 0,opacity: 'show'},"normal",
        "linear",function(){
            left1AniFlag=true;
            if(scrolling) moveContentRight(); 
            else zoomInCenter();
          });
    
    //left-most becomes 2nd from left
    left2AniFlag=false;
    if (scrollerStart+1 >= productCount) position[2] = (scrollerStart+1)-productCount;
    else position[2] = scrollerStart+1;
    $('#card-'+position[2]).css('zIndex', 200).animate({left: 40},"normal",
        "linear",function(){left2AniFlag=true;if(scrolling) moveContentRight(); else zoomInCenter();});
    
    //2nd from left becomes 3rd from left
    left3AniFlag=false;
    if (scrollerStart+2 >= productCount) position[3] = (scrollerStart+2)-productCount;
    else position[3] = scrollerStart+2;
    $('#card-'+position[3]).css('zIndex', 300).animate({left: 80},"normal",
        "linear",function(){left3AniFlag=true;if(scrolling) moveContentRight(); else zoomInCenter();});
    
    //3rd from left becomes center
    centerAniFlag=false;
    if (scrollerStart+3 >= productCount) position[4] = (scrollerStart+3)-productCount;
    else position[4] = scrollerStart+3;
    $('#card-'+position[4]).css('zIndex', 500).animate({left: 160},"normal",
        "linear",function(){centerAniFlag=true; if(scrolling) moveContentRight(); else zoomInCenter();});
    
    //center becomes 3rd from right
    right3AniFlag=false;
    if (scrollerStart+4 >= productCount) position[5] = (scrollerStart+4)-productCount;
    else position[5] = scrollerStart+4;
    $('#card-'+position[5]).css('zIndex', 300).animate({left: 241},"normal",
        "linear",function(){right3AniFlag=true;if(scrolling) moveContentRight(); else zoomInCenter();});
    
    //3rd from right becomes 2nd from right
    right2AniFlag=false;
    if (scrollerStart+5 >= productCount) position[6] = (scrollerStart+5)-productCount;
    else position[6] = scrollerStart+5;
    $('#card-'+position[6]).css('zIndex', 200).animate({left: 281},"normal",
        "linear",function(){right2AniFlag=true;if(scrolling) moveContentRight(); else zoomInCenter();});
    
    //2nd from right becomes right-most
    right1AniFlag=false;
    if (scrollerStart+6 >= productCount) position[7] = (scrollerStart+6)-productCount;
    else position[7] = scrollerStart+6;
    $('#card-'+position[7]).css('zIndex', 100).animate({left: 321},"normal",
        "linear",function(){right1AniFlag=true;if(scrolling) moveContentRight(); else zoomInCenter();});
    
    //remove right-most
    right0AniFlag=false;
    if (scrollerStart+7 >= productCount) position[8] = (scrollerStart+7)-productCount;
    else position[8] = scrollerStart+7;
    $('#card-'+position[8]).css('zIndex', 10).animate({left: 343,opacity:"hide"},"normal",
        "linear",function(){right0AniFlag=true;$('#card-'+position[8]).remove();if(scrolling) moveContentRight(); else zoomInCenter();});
  }
};

function moveContentLeft() {
  // make sure animation is done before starting again
  if (left0AniFlag && left1AniFlag && left2AniFlag && left3AniFlag && centerAniFlag &&
        right0AniFlag && right1AniFlag && right2AniFlag && right3AniFlag) {

    // figure out if we need to repeat a # of times
    if (repeat>1) {
      scrolling = true;
      repeat--;
    } else if (repeat==1) {
      scrolling = false;
      repeat--;
    }

    //find new start and end point - we have to wrap the product array so the last is next to the first
    if (scrollerEnd+1 == productCount) scrollerEnd = 0;
    else scrollerEnd++;
    if (scrollerStart+1 == productCount) scrollerStart = 0;
    else scrollerStart++;
  
    //Preload next image
    if (scrollerEnd+1 == productCount) preLoad(products[0].img);
    else preLoad(products[scrollerEnd+1].img);

    //New card
    position[7] = scrollerEnd;
    right1AniFlag=false;
    $('#card-window').append('<img id="card-'+scrollerEnd+'" onclick="return scrollTo(this)" '+
        'style="position:absolute;left:343px;z-index:80;width:90px;height:58px;display:none;top:12px;cursor:pointer;" '+
        'alt="'+products[scrollerEnd].name+' card image" src="'+products[scrollerEnd].img+'"/>'
        );

    //$('#card-'+scrollerEnd).click(eval("function() {return scrollTo('"+scrollerEnd+"')}"));
    $('#card-'+scrollerEnd).css('zIndex', 100).animate({left: 321,opacity: 'show'},"normal",
        "linear",function(){
            right1AniFlag=true;
            if(scrolling) moveContentLeft(); 
            else zoomInCenter();
          });
    
    
    //right-most
    right2AniFlag=false;
    if (scrollerEnd-1 < 0) position[6] = productCount + (scrollerEnd-1);
    else position[6] = scrollerEnd-1;
    $('#card-'+position[6]).css('zIndex', 200).animate({left: 281},"normal",
        "linear",function(){right2AniFlag=true;if(scrolling) moveContentLeft(); else zoomInCenter();});
    
    //2nd from right
    right3AniFlag=false;
    if (scrollerEnd-2 < 0) position[5] = productCount + (scrollerEnd-2);
    else position[5] = scrollerEnd-2;
    $('#card-'+position[5]).css('zIndex', 300).animate({left: 241},"normal",
        "linear",function(){right3AniFlag=true;if(scrolling) moveContentLeft(); else zoomInCenter();});
    
    //3rd from right
    centerAniFlag=false;
    if (scrollerEnd-3 < 0) position[4] = productCount + (scrollerEnd-3);
    else position[4] = scrollerEnd-3;
    $('#card-'+position[4]).css('zIndex', 500).animate({left: 160},"normal",
        "linear",function(){centerAniFlag=true;if(scrolling) moveContentLeft(); else zoomInCenter();});
    
    //center
    left3AniFlag=false;
    if (scrollerEnd-4 < 0) position[3] = productCount + (scrollerEnd-4);
    else position[3] = scrollerEnd-4;
    $('#card-'+position[3]).css('zIndex', 300).animate({left: 80},"normal",
        "linear",function(){left3AniFlag=true;if(scrolling) moveContentLeft(); else zoomInCenter();});
    
    //3rd from left
    left2AniFlag=false;
    if (scrollerEnd-5 < 0) position[2] = productCount + (scrollerEnd-5);
    else position[2] = scrollerEnd-5;
    $('#card-'+position[2]).css('zIndex', 200).animate({left: 40},"normal",
        "linear",function(){left2AniFlag=true;if(scrolling) moveContentLeft(); else zoomInCenter();});
    
    //2nd from left
    left1AniFlag=false;
    if (scrollerEnd-6 < 0) position[1] = productCount + (scrollerEnd-6);
    else position[1] = scrollerEnd-6;
    $('#card-'+position[1]).css('zIndex', 100).animate({left: 0},"normal",
        "linear",function(){left1AniFlag=true;if(scrolling) moveContentLeft(); else zoomInCenter();});
    
    //left-most
    left0AniFlag=false;
    if (scrollerEnd-7 < 0) position[0] = productCount + (scrollerEnd-7);
    else position[0] = scrollerEnd-7;
    $('#card-'+position[0]).css('zIndex', 10).animate({left: -20,opacity:"hide"},"normal",
        "linear",function(){left0AniFlag=true; $('#card-'+position[0]).remove();if(scrolling) moveContentLeft(); else zoomInCenter();});
  }
};

function zoomInCenter(pNextFunc) {
  if (!zoom) {
    $("#card-info").html("<a href=\"/phone-card/"+products[position[4]].code.toLowerCase()+
      "/\">"+products[position[4]].name+"</a><br/>"+products[position[4]].description);
    $("#card-"+position[4]).animate({width:122,height:78,left:144,top:5},"fast")
      .find('img').animate({width:122,height:78},"fast");
    if ( $.browser.msie )
      $("#card-info").slideDown("fast",pNextFunc);
    else
      $("#card-info").fadeIn("fast",pNextFunc);
    zoom = true;
  }
};

function zoomOutCenter(pNextFunc) {
  if (zoom) {
    $("#card-"+position[4]).animate({width:90,height:58,left:160,top:12},"fast")
      .find('img').animate({width:90,height:58},"fast");
    if ( $.browser.msie )
      $("#card-info").slideUp("fast",pNextFunc);
    else $("#card-info").fadeOut("fast",pNextFunc);
    zoom = false;
  }
};

function scrollTo(cardEle) {
  clearInterval(autoScroll);
  var cardNum = cardEle.id.split('-').pop();
  //alert('Clicked on '+cardNum+', center is '+position[4]);
  //return false;
  if (cardNum == position[4])
    window.location="/phone-card/"+products[cardNum].code.toLowerCase()+"/";
  else {
    for(var i=0;i<position.length;i++) {
      if ( position[i] == cardNum && i>4 ) {
        repeat = i-4;
        zoomOutCenter(moveContentLeft);
        break;
      } else if ( position[i] == cardNum && i<4 ) {
        repeat = 4-i;
        zoomOutCenter(moveContentRight);
        break;
      }
    }
    return false;
  }
};