﻿var ImageScroller = function(_imageScrollerParentDivID, _imageScrollerChildDivID) {
   _imageScrollerParentDivID = getElem(_imageScrollerParentDivID); 
   _imageScrollerChildDivID = getElem(_imageScrollerChildDivID); 

// TWEAKED EVER SO SLIGHTLY FOR RYAN AND COLLIN BEGIN HERE
   // THUMBNAIL URL
   var prImagePaths = new Array(); 
   // EPISODE TITLE
   var prImageAltText = new Array(); 
   // YOUTUBE EMBED
   var prImageClicks = new Array(); 
   // EPISODE SYNOPSIS
   var prImageDescription = new Array();
   // EPISODE SYNOPSIS
   var prShareId = new Array();

// END RYAN AND COLLIN TWEAKING (tee hee)
   
   var iNumOfThumbsShown = 1; 
   var iNumOfImages; 
   
   var bAutoScroll = 0; 
   //0=false, 1=true
   var iAutoScrollDelay = 2000; 
   var bAutoScrollDirection = 1; 
   //0=back, 1=forward
   var bAutoReverse = 1; 
   //0=false, 1=true
   var iScrollType = 1; 
   //0=horizontal, 1=vertical
   var bEnableThumbBorder = 0; 
   //0=no, 1=yes
   var bEnableCurrentCount = 0; 
   //0=no, 1=yes
   var bEnableThumbDescription = 0; 
   //0=no, 1=yes
   var bClickOpenType = 0; 
   //0=same window, 1=new window
   var iImageScrollAmount = 1;
   //number of images to scroll
   
   var objCounterDiv = ""; 
   var objDescriptionDiv = ""; 
   var iSmoothSlideInterval = 3; 
   var iSmoothSlideAmount = 7; 
   var moveTimer; 
   
   this.THUMB_HEIGHT = 69; 
   this.THUMB_WIDTH = 122; 
   this.THUMB_PADDING = 7.5; 
   
   var CURRENT_THUMB_INDEX = 1;
   var NEW_REVERSE_OFFSET = 0; 
   var MAX_REVERSE_OFFSET = 0; 
   var NEW_FORWARD_OFFSET = 0; 
   var IS_SCROLLING = false; 
   //* BEGIN FUNCTIONS *//
   this.setNumOfImageToScroll = function(_NumOfImagesToScroll) {
        iImageScrollAmount = parseInt(_NumOfImagesToScroll);
   };
   this.enableThumbnailDescription = function(_descriptionDivID) {
      bEnableThumbDescription = 1; 
      objDescriptionDiv = _descriptionDivID; 
      }; 
   this.setScrollType = function(_iType) {
      if (_iType == 0) {
         iScrollType = 0; 
         }
      else {
         iScrollType = 1; 
         }
      }; 
   this.setScrollSpeed = function(_iSpeed) {
      if (_iSpeed > 0 || _iSpeed < 1000) {
         iSmoothSlideInterval = _iSpeed; 
         }
      else {
         iSmoothSlideInterval = 7; 
         }
      }; 
   this.setScrollAmount = function(_iAmount) {
      if (_iAmount > 0 || _iAmount < 1000) {
         iSmoothSlideAmount = _iAmount; 
         }
      else {
         iSmoothSlideAmount = 7; 
         }
      }; 
   this.setClickOpenType = function(_openType) {
      if (_openType == 0 || _openType == 1) {
         bClickOpenType = _openType; 
         }
      }; 
   this.enableCurrentCount = function(_counterDivID) {
      bEnableCurrentCount = 1; 
      objCounterDiv = _counterDivID; 
      }; 
   this.enableThumbBorder = function(_boolean) {
      bEnableThumbBorder = _boolean; 
      }; 
   this.setThumbsShown = function(_newNumOfThumbsShown) {
      iNumOfThumbsShown = parseInt(_newNumOfThumbsShown); 
      }; 
   this.addThumbnail = function(_thumbnailURL, _fullClickURL, _thumbnailAlt, _thumbnailDescription, _shareId) {
   		// THUMBNAIL IMAGE URL
      prImagePaths[prImagePaths.length] = _thumbnailURL; 
        // YOUTUBE EMBED URL
      prImageClicks[prImageClicks.length] = _fullClickURL; 
      	// EPISODE TITLE
      prImageAltText[prImageAltText.length] = _thumbnailAlt; 
      	// EPISODE SYNOPSIS
      prImageDescription[prImageDescription.length] = _thumbnailDescription; 
      	// SHARE ID
      prShareId[prShareId.length] = _shareId;
      }; 
   this.setThumbnailHeight = function(_newThumbHeight) {
      this.THUMB_HEIGHT = _newThumbHeight; 
      }; 
   this.getThumbnailHeight = function() {
      return this.THUMB_HEIGHT; 
      }; 
   this.setThumbnailWidth = function(_newThumbWidth) {
      this.THUMB_WIDTH = _newThumbWidth; 
      }; 
   this.getThumbnailWidth = function() {
      return this.THUMB_WIDTH; 
      }; 
   this.setThumbnailPadding = function(_newThumbPadding) {
      this.THUMB_PADDING = _newThumbPadding; 
      }; 
   this.getThumbnailPadding = function() {
      return THUMB_PADDING; 
      }; 
   this.getCurrentThumbIndex = function() {
      return CURRENT_THUMB_INDEX; 
      }; 
   this.getThumbnailCount = function() {
      return iNumOfImages; 
      }; 
   this.renderScroller = function() {
      iNumOfImages = prImagePaths.length; 
      if (iNumOfThumbsShown > iNumOfImages) {
         iNumOfThumbsShown = iNumOfImages; 
         }
      MAX_REVERSE_OFFSET = 0 - (iNumOfImages - iNumOfThumbsShown) * this.THUMB_WIDTH; 
      if (this.THUMB_PADDING > 0) {
         MAX_REVERSE_OFFSET = MAX_REVERSE_OFFSET - (iNumOfImages * this.THUMB_PADDING); 
         }
      if (bEnableThumbBorder == 1) {
         MAX_REVERSE_OFFSET = MAX_REVERSE_OFFSET - (iNumOfImages * 4); 
         }
      if (iScrollType == 0) {
         _imageScrollerParentDivID.style.width = (this.THUMB_WIDTH * iNumOfThumbsShown) + ((iNumOfThumbsShown-1) * (this.THUMB_PADDING)) + "px"; 
         if (bEnableThumbBorder == 1) {
            _imageScrollerParentDivID.style.width = (parseInt(_imageScrollerParentDivID.style.width) + (iNumOfThumbsShown * 4)) + "px"; 
            }
         _imageScrollerParentDivID.style.height = this.THUMB_HEIGHT + (this.THUMB_PADDING) + "px"; 
         if (bEnableThumbBorder == 1) {
            _imageScrollerParentDivID.style.height = (parseInt(_imageScrollerParentDivID.style.height) + 4) + "px"; 
            }
         _imageScrollerChildDivID.style.width = (this.THUMB_WIDTH * iNumOfImages) + (iNumOfImages * (this.THUMB_PADDING)) + "px"; 
         if (bEnableThumbBorder == 1) {
            _imageScrollerChildDivID.style.width = (parseInt(_imageScrollerChildDivID.style.width) + (iNumOfImages * 4)) + "px"; 
            }
         }
      else if (iScrollType == 1) {
         _imageScrollerParentDivID.style.width = (this.THUMB_WIDTH) + ((this.THUMB_PADDING * 2)) + "px"; 
         if (bEnableThumbBorder == 1) {
            _imageScrollerParentDivID.style.width = (parseInt(_imageScrollerParentDivID.style.width) + (4)) + "px"; 
            }
         _imageScrollerParentDivID.style.height = (this.THUMB_HEIGHT * iNumOfThumbsShown) + (iNumOfThumbsShown * (this.THUMB_PADDING * 2)) + "px"; 
         if (bEnableThumbBorder == 1) {
            _imageScrollerParentDivID.style.height = (parseInt(_imageScrollerParentDivID.style.height) + (iNumOfThumbsShown * 4)) + "px"; 
            }
         _imageScrollerChildDivID.style.width = (this.THUMB_WIDTH) + (this.THUMB_PADDING * 2) + "px"; 
         if (bEnableThumbBorder == 1) {
            _imageScrollerChildDivID.style.width = (parseInt(_imageScrollerChildDivID.style.width) + 4) + "px"; 
            }
         }
      //*** [Begin] Image Cacheing code ***//
      var oHref;
      var oImage;
        oHref = document.createElement("a");
        oImage = document.createElement("img");
        
      for (i = 0; i < iNumOfImages; i++) {
        oHref = document.createElement("a");
        //oHref.href = prImageClicks[i];
        
        // REPLACED HREF WITH JAVASCRIPT FUNCTION
        oHref.href = "javascript: onClick=myScroller.handleEpisodeClick("+i+")";
        oHref.title = prImageAltText[i];
        
        if (bClickOpenType == 1) {
            oHref.target = "_blank";
        }
        
        oImage = document.createElement("img");
            oImage.src = prImagePaths[i];
            oImage.alt = prImageAltText[i];
            oImage.border = 0;
            oImage.width = this.THUMB_WIDTH;
            oImage.height = this.THUMB_HEIGHT;
            oImage.style.padding = this.THUMB_PADDING;
            
          oHref.appendChild(oImage);
          _imageScrollerChildDivID.appendChild(oHref);
            
      }
      //*** [End]   Image Cacheing code ***//
      
      if (bEnableCurrentCount == 1) {
         addAnEvent(window, "load", this.updateCurrentCount); 
         }
      if (bEnableThumbDescription == 1) {
         addAnEvent(window, "load", this.updateCurrentDescription); 
         }
         //this.handleEpisodeClick(0);
      }; 
   this.scrollUp = function() {
      _origOffset = parseInt(_imageScrollerChildDivID.style.top); 
      _currentOffset = parseInt(_imageScrollerChildDivID.style.top); 
      _newOffset = _currentOffset - (this.THUMB_HEIGHT * iImageScrollAmount); 
      if (this.THUMB_PADDING > 0) {
         _newOffset = _newOffset - (2 * this.THUMB_PADDING); 
         }
      if (bEnableThumbBorder == 1) {
         _newOffset = _newOffset - 4; 
         }
      if (IS_SCROLLING == false && _newOffset >= MAX_REVERSE_OFFSET) {
         NEW_FORWARD_OFFSET = _newOffset; 
         moveScrollerUp(); 
         }
      }; 
   this.scrollDown = function() {
      _origOffset = parseInt(_imageScrollerChildDivID.style.top); 
      _currentOffset = parseInt(_imageScrollerChildDivID.style.top); 
      _newOffset = _currentOffset + (this.THUMB_HEIGHT * iImageScrollAmount); 
      if (this.THUMB_PADDING > 0) {
         _newOffset = _newOffset + (2 * this.THUMB_PADDING); 
         }
      if (bEnableThumbBorder == 1) {
         _newOffset = _newOffset + 4; 
         }
      if (_newOffset <= 0) {
         if(_currentOffset > (_origOffset - this.THUMB_HEIGHT)) {
            if (IS_SCROLLING == false && _newOffset >= MAX_REVERSE_OFFSET) {
               NEW_REVERSE_OFFSET = _newOffset; 
               moveScrollerDown(); 
               }
            }
         }
      }; 
   this.scrollTop = function() {
      if (IS_SCROLLING == false) {
         NEW_FORWARD_OFFSET = ( - 1 * (iNumOfImages - iNumOfThumbsShown) * this.THUMB_HEIGHT); 
         CURRENT_THUMB_INDEX = iNumOfImages - iNumOfThumbsShown; 
         moveScrollerUp(); 
         }
      }; 
   this.scrollBottom = function() {
      if (IS_SCROLLING == false) {
         NEW_REVERSE_OFFSET = 0; 
         CURRENT_THUMB_INDEX = iNumOfImages - iNumOfThumbsShown; 
         moveScrollerDown(); 
         }
      }; 
   this.scrollReverse = function() {
      _origOffset = parseInt(_imageScrollerChildDivID.style.left); 
      _currentOffset = parseInt(_imageScrollerChildDivID.style.left); 
      _newOffset = _currentOffset + (this.THUMB_WIDTH * iImageScrollAmount); 
      if (this.THUMB_PADDING > 0) {
         _newOffset = _newOffset + (this.THUMB_PADDING * (2 * iImageScrollAmount)); 
         }
      if (bEnableThumbBorder == 1) {
         _newOffset = _newOffset + 4; 
         }
      if (_newOffset <= 0) {
         if(_currentOffset > (_origOffset - (this.THUMB_WIDTH * iImageScrollAmount))) {
            if (IS_SCROLLING == false) {
               NEW_REVERSE_OFFSET = _newOffset; 
               moveScrollerRight(); 
               }
            }
         }
      }; 
   this.scrollForward = function() {
      _origOffset = parseInt(_imageScrollerChildDivID.style.left); 
      _currentOffset = parseInt(_imageScrollerChildDivID.style.left); 
      _newOffset = _currentOffset - (this.THUMB_WIDTH * iImageScrollAmount); 
      if (this.THUMB_PADDING > 0) {
         _newOffset = _newOffset - ((2 * iImageScrollAmount) * this.THUMB_PADDING); 
         }
      if (bEnableThumbBorder == 1) {
         _newOffset = _newOffset - 4; 
         }
      if (IS_SCROLLING == false && _newOffset >= MAX_REVERSE_OFFSET) {
         NEW_FORWARD_OFFSET = _newOffset; 
         moveScrollerLeft(); 
         }
      }; 
   this.scrollEnd = function() {
      if (IS_SCROLLING == false) {
         NEW_FORWARD_OFFSET = MAX_REVERSE_OFFSET; 
         CURRENT_THUMB_INDEX = iNumOfImages - iNumOfThumbsShown; 
         moveScrollerLeft(); 
         }
      }; 
   this.scrollBegin = function() {
      if (IS_SCROLLING == false) {
         NEW_REVERSE_OFFSET = 0; 
         CURRENT_THUMB_INDEX = 2; 
         moveScrollerRight(); 
         }
      }; 
   this.updateCurrentDescription = function() {
      getElem(objDescriptionDiv).innerHTML = prImageDescription[CURRENT_THUMB_INDEX - 1]; 
      }; 
   this.updateCurrentCount = function() {
      getElem(objCounterDiv).innerHTML = CURRENT_THUMB_INDEX + "/" + iNumOfImages; 
      }; 
   function moveScrollerUp() {
      _ElementObj = _imageScrollerChildDivID; 
      _currentOffset = parseInt(_ElementObj.style.top); 
      if (_currentOffset > NEW_FORWARD_OFFSET && (_currentOffset - iSmoothSlideAmount) >= NEW_FORWARD_OFFSET) {
         _ElementObj.style.top = _currentOffset - iSmoothSlideAmount + "px"; 
         IS_SCROLLING = true; 
         moveTimer = window.setTimeout(moveScrollerUp, iSmoothSlideInterval); 
         }
      else if (_currentOffset > NEW_FORWARD_OFFSET) {
         _ElementObj.style.top = _currentOffset - 1 + "px"; 
         IS_SCROLLING = true; 
         moveTimer = window.setTimeout(moveScrollerUp, iSmoothSlideInterval); 
         }
      else {
         IS_SCROLLING = false; 
         CURRENT_THUMB_INDEX++; 
         window.clearTimeout(moveTimer); 
         if (bEnableThumbDescription == 1) {
            getElem(objDescriptionDiv).innerHTML = prImageDescription[CURRENT_THUMB_INDEX - 1]; 
            }
         if (bEnableCurrentCount == 1) {
            getElem(objCounterDiv).innerHTML = CURRENT_THUMB_INDEX + "/" + iNumOfImages; 
            }
         }
      }; 
   function moveScrollerDown() {
      _ElementObj = _imageScrollerChildDivID; 
      _currentOffset = parseInt(_ElementObj.style.top); 
      if (_currentOffset < NEW_REVERSE_OFFSET && (_currentOffset + iSmoothSlideAmount) <= NEW_REVERSE_OFFSET) {
         _ElementObj.style.top = _currentOffset + iSmoothSlideAmount + "px"; 
         IS_SCROLLING = true; 
         moveTimer = window.setTimeout(moveScrollerDown, iSmoothSlideInterval); 
         }
      else if (_currentOffset < NEW_REVERSE_OFFSET) {
         _ElementObj.style.top = _currentOffset + 1 + "px"; 
         IS_SCROLLING = true; 
         moveTimer = window.setTimeout(moveScrollerDown, iSmoothSlideInterval); 
         }
      else {
         IS_SCROLLING = false; 
         CURRENT_THUMB_INDEX--; 
         window.clearTimeout(moveTimer); 
         if (bEnableThumbDescription == 1) {
            getElem(objDescriptionDiv).innerHTML = prImageDescription[CURRENT_THUMB_INDEX - 1]; 
            }
         if (bEnableCurrentCount == 1) {
            getElem(objCounterDiv).innerHTML = CURRENT_THUMB_INDEX + "/" + iNumOfImages; 
            }
         }
      }; 
   function moveScrollerRight() {
      _ElementObj = _imageScrollerChildDivID; 
      _currentOffset = parseInt(_ElementObj.style.left); 
      if (_currentOffset < NEW_REVERSE_OFFSET && (_currentOffset + iSmoothSlideAmount) <= NEW_REVERSE_OFFSET) {
         _ElementObj.style.left = _currentOffset + iSmoothSlideAmount + "px"; 
         IS_SCROLLING = true; 
         moveTimer = window.setTimeout(moveScrollerRight, iSmoothSlideInterval); 
         }
      else if (_currentOffset < NEW_REVERSE_OFFSET) {
         _ElementObj.style.left = _currentOffset + 1 + "px"; 
         IS_SCROLLING = true; 
         moveTimer = window.setTimeout(moveScrollerRight, iSmoothSlideInterval); 
         }
      else {
         IS_SCROLLING = false; 
         CURRENT_THUMB_INDEX--; 
         window.clearTimeout(moveTimer); 
         if (bEnableThumbDescription == 1) {
            getElem(objDescriptionDiv).innerHTML = prImageDescription[CURRENT_THUMB_INDEX - 1]; 
            }
         if (bEnableCurrentCount == 1) {
            getElem(objCounterDiv).innerHTML = CURRENT_THUMB_INDEX + "/" + iNumOfImages; 
            }
         }
      }; 
   function moveScrollerLeft() {
      _ElementObj = _imageScrollerChildDivID; 
      _currentOffset = parseInt(_ElementObj.style.left); 
      if (_currentOffset > NEW_FORWARD_OFFSET && (_currentOffset - iSmoothSlideAmount) >= NEW_FORWARD_OFFSET) {
         _ElementObj.style.left = _currentOffset - iSmoothSlideAmount + "px"; 
         IS_SCROLLING = true; 
         moveTimer = window.setTimeout(moveScrollerLeft, iSmoothSlideInterval); 
         }
      else if (_currentOffset > NEW_FORWARD_OFFSET) {
         _ElementObj.style.left = _currentOffset - 1 + "px"; 
         IS_SCROLLING = true; 
         moveTimer = window.setTimeout(moveScrollerLeft, iSmoothSlideInterval); 
         }
      else {
         IS_SCROLLING = false; 
         CURRENT_THUMB_INDEX++; 
         window.clearTimeout(moveTimer); 
         if (bEnableThumbDescription == 1) {
            getElem(objDescriptionDiv).innerHTML = prImageDescription[CURRENT_THUMB_INDEX - 1]; 
            }
         if (bEnableCurrentCount == 1) {
            getElem(objCounterDiv).innerHTML = CURRENT_THUMB_INDEX + "/" + iNumOfImages; 
            }
         }
      }; 
   function addAnEvent(_obj, _eventName, _functionName) {
      if (window.addEventListener) {
         _obj.addEventListener(_eventName, _functionName, false); 
         }
      else {
         _obj.attachEvent("on" + _eventName, _functionName); 
         }
      }; 
   function getElem(_elemID) {
      return document.getElementById(_elemID); 
      }; 
      
   // BEGIN RYAN AND COLLIN FUNCTIONS
   
   this.handleEpisodeClick = function(n) {
   		var epTitle=prImageAltText[n];
   		var epSynopsis=prImageDescription[n];
   		var epYouTube=prImageClicks[n];
   		var totalVids=prImageAltText.length;
   		var nnum=n+1;
   		var share=prShareId[n];
   		var thisUrl="http://www.ryanandcollin.com/watch.php?ep="+share;
   		
   		
   		var embedCode="<object width='503' height='283'>"+
   		"<param name='movie' value='"+epYouTube+"'></param>"+
   		"<param name='allowFullScreen' value='true'></param>"+
   		"<param name='allowscriptaccess' value='always'></param>"+
   		"<embed src='"+epYouTube+"' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='503' height='283'></embed></object>";
   		
   		/*var iconCode="<a href='http://www.facebook.com/sharer.php?u="+thisUrl+"&t='"+epTitle+"' target='_blank'><img src='images/layout/header/smicons/facebook.png' alt='' /></a>"+
		"<a href='http://twitter.com/home?status='"+epTitle+":"+thisUrl+"' title='Talk about it on Twitter' target='_blank'><img src='images/layout/header/smicons/twitter.png' alt='' /></a>"+
		"<a href='http://delicious.com/save' onclick='window.open('http://delicious.com/save?v=5&noui&jump=close&url='"+thisUrl+"+'&title='"+epTitle+", 'delicious','toolbar=no,width=550,height=550'); return false;'><img src='images/layout/header/smicons/delicious.png' alt='' /></a>"+
		"<a href='http://digg.com/submit?url="+thisUrl+"&title="+epTitle+"&bodytext="+epSynopsis+"&media="+epSynopsis+"&topic=TOPIC' target='_blank'><img src='images/layout/header/smicons/digg.png' alt='' /></a>"+
		"<a href='http://www.stumbleupon.com/submit?url="+thisUrl+"&title="+epTitle+"' target='_blank'><img src='images/layout/header/smicons/stumbleupon.png' alt='' /></a>"+
		"<a href='mailto: ?subject=Ryan%20%26%20Collin%20-%20A%20New%20Comedic%20Web%20Series&body="+thisUrl+"%0A%0ARyan%20%26%20Collin%20is%20a%20source%20of%20entertainment%20for%20the%20internet%20generation.%20Ryan%20is%20a%20straightforward%2C%20ambitious%20young%20guy%20whose%20everyday%20life%20is%20marred%20by%20Collin's%20well-intentioned%20sin%20and%20moral%20destruction.'><img src='images/layout/header/smicons/email.png' alt='' /></a>";*/
		
		var fbCode='<fb:comments xid="'+share+'" css="http://www.ryanandcollin.com/styles/rcfbcomments.css?1-7" url="'+thisUrl+'" numposts="5" title="'+epTitle+'"></fb:comments>';
   		
		//Create your sharelet with desired properties and set button element to false
		var myObject=SHARETHIS.addEntry({title:epTitle,url:thisUrl},{button:false,popup:false});
		//Output your customized button
		var c='<span id="shareMe"><a href="javascript:void(0);"><img src="http://w.sharethis.com/images/rotating-icon.gif?CXNID=1000014.0NXC" />ShareThis</a></span>';
   		
   		//tweetmeme_url = thisUrl;
		//var tframe=document.getElementById('tweetmemeframe');
		//tframe.src=tframe.src;
		
   		getElem("videoBox").innerHTML = embedCode;
   		getElem("episodeContent").innerHTML = "<div id='epContentContainer'><h2>"+epTitle+"</h2><p>"+epSynopsis+"</p></div><div id='smicons2'>"+c+"</div>";
		//Tie customized button to ShareThis button functionality.
		var element=document.getElementById("shareMe");
		myObject.attachButton(element);
		getElem("fbcomments").innerHTML = fbCode;
		FB.init("ac456c2ea39d7f65dc0972cb186e9f8c", "../xd_receiver.htm");
   };
};