/**
 * Promo Slider
 * Creates dynamic promo sliding window object
 *
 * @author Ben Henry
 * @date 06/24/2010
 *
 * Arguments - promoSliderJSON - JSON object defining all parameters of slider
 *
 * Code Flow
 * 1. Finds SliderContainer and sets width and height based on parameters
 * 2. Creates slider layers from bottom up. #1 slide is static slide, others will move
 */

PromoSlider = {

  // PromoSlider initializer - Parse JSON object and set object variables
  init:function( promoSliderJSON ) {
    this.sliderContentDiv = $( promoSliderJSON.sliderContainerDiv );
    this.sliderDirection = promoSliderJSON.sliderDirection;
    this.width = promoSliderJSON.width;
    this.height = promoSliderJSON.height;
    this.wcdContentPath = promoSliderJSON.wcdContentPath;
	this.location = promoSliderJSON.location,
    this.arrowLeftImg = promoSliderJSON.arrowLeftImg;
    this.arrowRightImg = promoSliderJSON.arrowRightImg;
    this.linkWidth = promoSliderJSON.linkWidth;
    this.dropShadowWidth = promoSliderJSON.dropShadowWidth;
    this.promoSlides = promoSliderJSON.promoSlides;
    this.numSlides = promoSliderJSON.promoSlides.length;

    if( this.sliderDirection == "rightToLeft" ) {
      this.mainFloat = 'right';
    }
    else {
      this.mainFloat = 'left';
    }

    this.sliderContentDiv.setStyle({ width: this.width+'px', height: this.height+'px', overflow:'hidden', position:'relative' });

    for( i=0; i < this.numSlides; i++ ) {
      var currentSlide = this.promoSlides[i];
      if( i == 0 ) {
        this.createStaticSlide( currentSlide );
      }
      else {
        this.createMovingSlide( currentSlide, i );
      }
    }
	this.sliderContentDiv.insert( new Element('div',{id:'disableDiv'}) );
    this.disableSlide = $('disableDiv');
    this.disableSlide.setStyle({
      width:this.width+'px',
      height:this.height+'px',
      position:'absolute',
      top:'0px',
      left:'0px',
      zIndex:999,
	  display:'none'
    });
	
	if( this.location == 'homepage' ) {
		this.containerDiv = 'PL_HomePageLayout_2019285_Left';
	}
	else if( passedLocation == 'division' ) {
		this.containerDiv = 'PL_DivisionLayout_1918057_Left';
	}

	if( (navigator.appVersion.indexOf('MSIE 6.0') !=-1) || (navigator.appVersion.indexOf('MSIE 7.0')!=-1) ) {
		this.wcdContentItemCIID = $( this.containerDiv ).down('div').getAttribute('className');
	}
	else {
		this.wcdContentItemCIID = $( this.containerDiv ).down('div').getAttribute('class');	
	}
	
	this.wcdContentItemCIIDRoot = this.wcdContentItemCIID.slice(0,1);
	this.wcdContentItemCIIDPrefix = this.wcdContentItemCIID.slice(1,4);
	this.wcdContentItemCIIDSuffix = this.wcdContentItemCIID.slice(4,7);
	
	var WCDCookieVal = 'sldr' + this.wcdContentItemCIID;
	sliderViewed = gidLib.getCookieVar('mktUniversalSession',WCDCookieVal);

	if ( sliderViewed == "" ) {
		twinTimer = setTimeout ( function() {
			PromoSlider.moveSlide(1);
		},3000 );

		gidLib.setCookieVar('mktUniversalSession',WCDCookieVal,'yes');
	}	
  }, // END init


  // createStaticSlide - Creates base non-moving slide
  createStaticSlide:function( slide ) {

    // Set up base static slide div
    this.sliderContentDiv.insert( new Element('div',{id:'staticSlide'}) );
    this.staticSlide = $('staticSlide');
    this.staticSlide.setStyle({
      backgroundImage:'url(' + this.wcdContentPath + slide.imgURL + ')',
      backgroundRepeat:'no-repeat',
      width:this.width+'px',
      height:this.height+'px',
      position:'absolute',
      top:'0px',
      left:'0px',
      zIndex:1
    });

    // Set up static slide content div
    this.staticSlide.insert( new Element('div',{id:'staticSlideContent'}) );
    this.staticSlideContent = $('staticSlideContent');
    $('staticSlideContent').insert( new Element('img',{id:'staticSlideImg',alt:slide.imgAlt,width:(this.width-this.linkWidth-this.dropShadowWidth),height:this.height,src:'http://piperlime.gap.com/assets/common/clear.gif'}) );
    $('staticSlideImg').setStyle({
      width:(this.width-this.linkWidth-this.dropShadowWidth)+'px',
      height:this.height+'px'
    });

    if( slide.imgMap != '' ) { $('staticSlideImg').useMap = '#' + slide.imgMap; }
    this.staticSlideContent.setStyle({
      width:(this.width-this.linkWidth-this.dropShadowWidth)+'px',
      height:this.height+'px',
      float:this.mainFloat
    });

    // Set up static slide link div
    this.staticSlide.insert( new Element('div',{ id:'staticSlideLink'}) );
    this.staticSlideLink = $('staticSlideLink');
    this.staticSlideLink.setStyle({
      width:this.linkWidth+'px',
      height:this.height+'px',
      float:this.mainFloat,
      cursor:'pointer' 
    });
    this.staticSlideLink.onclick = function () {
      PromoSlider.moveSlide( 1 );
    }  }, // END createStaticSlide


  // createMovingSlide - Creates subsuquent slides that move
  createMovingSlide:function( slide, number ) {
    var linkOffset = this.linkWidth * number;
    var totalLinkOffset = this.linkWidth * (this.numSlides);

    // Set up moving slide div
    this.sliderContentDiv.insert( new Element('div',{id:'slide'+number}) );
    var currSlide = $('slide'+number);
    currSlide.setStyle({
      backgroundImage:'url(' + this.wcdContentPath + slide.imgURL + ')',
      backgroundRepeat:'no-repeat',
      width:(this.width-linkOffset-this.dropShadowWidth)+'px',
      height:this.height+'px',
      position:'absolute',
      top:'0px',
      zIndex:number+1
    });
    if( this.sliderDirection == "leftToRight" ) {
      currSlide.setStyle({ left:'-'+(this.width - totalLinkOffset)+'px' });
    }
    else {
      currSlide.setStyle({ left:(this.width - totalLinkOffset + linkOffset)+'px' });
    }

    // Set up moving slide content div
    $('slide' + number).insert( new Element('div',{id :'slide'+number+'Content'}) );
    var currSlideContent = $('slide'+number+'Content');
    currSlideContent.insert( new Element('img',{id:'slide'+number+'Img',alt:slide.imgAlt,width:(this.width-linkOffset-this.linkWidth-this.dropShadowWidth),height:this.height,src:'http://piperlime.gap.com/assets/common/clear.gif'}) );
    $('slide'+number+'Img').setStyle({
      width:(this.width-this.linkWidth-this.dropShadowWidth)+'px',
      height:this.height+'px'
    });

    if( slide.imgMap != '' ) { $('slide'+number+'Img').useMap = '#' + slide.imgMap; }
    currSlideContent.setStyle({
      width:(this.width-linkOffset-this.linkWidth-this.dropShadowWidth)+'px',
      height:this.height+'px',
      float:this.mainFloat
    });

    // Set up link
    $('slide' + number).insert( new Element('div',{id :'slide'+number+'Link'}) );
    var currSlideLink = $('slide'+number+'Link');
    currSlideLink.setStyle({
      width:this.linkWidth+'px',
      height:this.height+'px',
      float:this.mainFloat
    });

    currSlideLink.insert( new Element('a',{id:'slide'+number+'ArrowLink'}) );
    var currSlideArrowLink = $('slide'+number+'ArrowLink');
    currSlideArrowLink.setStyle({
      width:this.linkWidth+'px',
      height:this.height+'px',
      float:this.mainFloat,
      cursor:'pointer'
    });
    currSlideArrowLink.onclick = function () {
      PromoSlider.moveSlide( number );
    }

    currSlideArrowLink.insert( new Element('img',{id:'slide'+number+'ArrowImg',width:this.linkWidth,height:this.height}) );
    var currSlideArrowImg = $('slide'+number+'ArrowImg');
	if( this.sliderDirection == "leftToRight" ) {
      currSlideArrowImg.src = this.wcdContentPath + this.arrowRightImg;
    }
	else {
      currSlideArrowImg.src = this.wcdContentPath + this.arrowLeftImg;
    }
  }, // END createMovingSlide

  // moveSlide - moves slide in and out depending on current position; also moves other slides appropriately
  moveSlide:function( number ) {
    var totalLinkOffset = this.linkWidth * this.numSlides;
    var linkOffset = ( this.linkWidth * number ) + this.dropShadowWidth;
	var amountToMove = this.width - totalLinkOffset;
    var numSlides = this.numSlides;
    var directionToMove;
		
    if( number != 0 ) {
	 	var leftOffset = $('slide'+number).getStyle('left').replace('px','').replace('-','');
	}
	else {
	 	var leftOffset = $('slide1').getStyle('left').replace('px','').replace('-','');
	}
	if( this.sliderDirection == "rightToLeft" ) {
	  amountToMove = amountToMove - this.dropShadowWidth;
	  leftOffset = leftOffset - this.linkWidth - this.dropShadowWidth;
	  if( number > 0 ) { leftOffset = leftOffset - ( this.linkWidth * ( number-1 ) ); }
	  directionToMove = ( leftOffset <= 0 ) ? "r" : "l";
	}
	else {
	  directionToMove = ( leftOffset <= 0 ) ? "l" : "r";
	}

	//alert( 'amount to move ' + amountToMove + '; left offset ' + leftOffset + '; direction ' + directionToMove );
	var itor = "";
	
	if( this.sliderDirection == "leftToRight" ) {

    if( directionToMove == "r" ) {

    // Moving right, so ensure that all slides below are moved as well
    for( var i=1; i <= number; i++ ) {
     var leftOffset = $('slide'+i).getStyle('left').replace('px','').replace('-','');
     if( leftOffset >= amountToMove ) {
	  itor += i + ",";
      new Effect.MoveBy('slide'+i, 0,amountToMove, {
        duration:2,
        mode:'relative',
		beforeStart: ( function() {
		  this.disableSlide.setStyle({ display:'block' });
		}).bind(this),
        afterFinish: ( function() {
	      PromoSlider.arrowSwitch( itor );
		  this.disableSlide.setStyle({ display:'none' });
		}).bind(this)
      });
     }
    }

    }
    else if( directionToMove == "l" ) {

    // Moving left, so ensure that all slides above are moved
    for( var i=numSlides-1; i > number; i-- ) {
     var leftOffset = $('slide'+i).getStyle('left').replace('px','');
     if( leftOffset == 0 ) {
	  itor += i + ",";
      new Effect.MoveBy('slide'+i, 0,'-'+amountToMove, {
        duration:2,
        mode:'relative',
		beforeStart: ( function() {
		  this.disableSlide.setStyle({ display:'block' });
		}).bind(this),
        afterFinish: ( function() {
		  PromoSlider.arrowSwitch(itor);
		  this.disableSlide.setStyle({ display:'none' });
		}).bind(this)
      });
     }
    }
	
    }
	
	}
	else {

    if( directionToMove == "l" ) {

    // Moving left, so ensure that all slides below are moved as well
    for( var i=1; i < number+1; i++ ) {
     var leftOffset = $('slide'+i).getStyle('left').replace('px','');
     if( leftOffset >= amountToMove ) {
	  itor += i + ",";
      new Effect.MoveBy('slide'+i, 0,'-'+amountToMove, {
        duration:2,
        mode:'relative',
		beforeStart: ( function() {
		  this.disableSlide.setStyle({ display:'block' });
		}).bind(this),
        afterFinish: ( function() {
		  PromoSlider.arrowSwitch(itor);
		  this.disableSlide.setStyle({ display:'none' });
		}).bind(this)
      });
     }
    }

    }
    else if( directionToMove == "r" ) {

    // Moving right, so ensure that all slides above are moved
    for( var i=numSlides-1; i >= number; i-- ) {
     var leftOffset = $('slide'+i).getStyle('left').replace('px','') - ( this.linkWidth * i ) - this.dropShadowWidth;
     if( leftOffset == 0 ) {
	  itor += i + ",";
      new Effect.MoveBy('slide'+i, 0,amountToMove, {
        duration:2,
        mode:'relative',
		beforeStart: ( function() {
		  this.disableSlide.setStyle({ display:'block' });
		}).bind(this),
        afterFinish: ( function() {
		  PromoSlider.arrowSwitch(itor);
		  this.disableSlide.setStyle({ display:'none' });
		}).bind(this)
      });
     }
    }
	
    }
	}

  },

  // arrowSwitch - changes direction of arrow on a slide
  arrowSwitch:function( number ) {
    var slidesToSwitch = number.substr(0,number.length-1);
    var slidesToSwitch = slidesToSwitch.split(',');
	for( var i = 0; i < slidesToSwitch.length; i++ ) {

     var currentSlideArrow = $('slide'+slidesToSwitch[i]+'ArrowImg');
     var currentSlideArrowSrc = currentSlideArrow.src;
     var lastSlashIdx = currentSlideArrowSrc.lastIndexOf('/')+1;
     currentSlideArrowSrc = currentSlideArrowSrc.substr( lastSlashIdx );

     if( currentSlideArrowSrc == this.arrowRightImg ) {
      Effect.Fade(currentSlideArrow,{duration:1, afterFinish: ( function( i ) {
        $('slide'+i+'ArrowImg').setAttribute('src', this.wcdContentPath + this.arrowLeftImg );

        Effect.Appear($('slide'+i+'ArrowImg'),{duration:1});
      } ).bind(this,slidesToSwitch[i]) });
     }
     else {
      Effect.Fade(currentSlideArrow,{duration:1, afterFinish: ( function( i ) {
        $('slide'+i+'ArrowImg').setAttribute('src', this.wcdContentPath + this.arrowRightImg  );

        Effect.Appear($('slide'+i+'ArrowImg'),{duration:1});
      } ).bind(this,slidesToSwitch[i]) });
     }
	}
  } // END arrowSwap

}