/// <reference path="dhtml_tools.js" />
/// <reference path="video_snapshot.js" />

/**
 * @author dpio
 dhtml_tools.js is required
 video_snapshot.js is required
 This js is for the snapshot collection
*/

function VideoSnapshotCollectionControl(container, varName, numVideosTotal, numVideosToDisplay, snapshotWidth, snapshotHeight, selectCallback, premVidData)
{
    this._container = container;
    this._varName = varName;
    this._numVideosTotal = numVideosTotal;
    this._numVideosToDisplay = numVideosToDisplay;
    this._videoSnapshotArray = new Array(this.numVideosTotal);
    this._snapshotWidth = parseInt(snapshotWidth);
	this._snapshotHeight = parseInt(snapshotHeight);
    this._itemWidth = this._snapshotWidth + 20;
    this._isAnimating = false;
    this._timerList = new Array();
    
    this.Init(selectCallback, premVidData);
}

// Member variables
VideoSnapshotCollectionControl.prototype._container;
VideoSnapshotCollectionControl.prototype._varName;

VideoSnapshotCollectionControl.prototype._numVideosTotal;
VideoSnapshotCollectionControl.prototype._numVideosToDisplay;
VideoSnapshotCollectionControl.prototype._videoSnapshotArray;
VideoSnapshotCollectionControl.prototype._videoCollection;
VideoSnapshotCollectionControl.prototype._leftArrow;
VideoSnapshotCollectionControl.prototype._rightArrow;
VideoSnapshotCollectionControl.prototype._snapshotWidth;
VideoSnapshotCollectionControl.prototype._snapshotHeight;
VideoSnapshotCollectionControl.prototype._itemWidth;

VideoSnapshotCollectionControl.prototype._isAnimating;
VideoSnapshotCollectionControl.prototype._timerList;

// init
VideoSnapshotCollectionControl.prototype.Init = function(selectCallback, premVidData)
{
    this._container.className = "videosnapshotcollection";
    var scrollboxHeight = 265; // this._snapshotHeight + 50;
    
    // build control
    var innerString = "<div onmouseover=\"" + this._varName + ".MoveLeft();\" onmouseout=\"" + this._varName + ".StopAnimation();\"></div>";
    innerString += "<div class=\"videoscrollboxouter\" style=\"height: " + scrollboxHeight + "px;\"><div class=\"videoscrollboxinner\" style=\"height: " + scrollboxHeight + "px;\">";
    for (i = 0; i < this._numVideosTotal; i++)
    {
        innerString += "<div></div>";
    }    
    innerString += "</div></div><div onmouseover=\"" + this._varName + ".MoveRight();\" onmouseout=\"" + this._varName + ".StopAnimation();\"></div>";
    this._container.innerHTML = innerString;
    
    this._leftArrow = this._container.childNodes.item(0);
    this._videoCollection = this._container.childNodes.item(1).firstChild;
    this._rightArrow = this._container.childNodes.item(2);
    
    this._leftArrow.className = "videocollectionarrow videocollectionarrowleft";
    this._rightArrow.className = "videocollectionarrow videocollectionarrowright";
    
    // set arrow height locations
    /*
	if (this._snapshotHeight > 50)
    {
       var offset = (((this._snapshotHeight - 50) / 2) + 32) + "px";
       this._leftArrow.style.marginTop = offset;
       this._rightArrow.style.marginTop = offset;       
    }
    else
    {
       this._leftArrow.style.marginTop = "11px";
       this._rightArrow.style.marginTop = "11px";
    }
	*/
	//this._leftArrow.style.marginTop = "10px";
    
        
    // populate control
    for (i = 0; i < this._numVideosTotal; i++)
    {
       if (selectCallback != null)
       {
        this._videoSnapshotArray[i] = new VideoSnapshotControl(this._videoCollection.childNodes.item(i),
            this._varName + "._videoSnapshotArray[" + i + "]",
            premVidData[i].ContentName, 
            premVidData[i].ThumbnailURL, 
            premVidData[i].ContentURL,
            premVidData[i].ContentDescription,
            selectCallback + "(" + i + ");",
            this._snapshotWidth,
			this._snapshotHeight);
       }
       else
       {
        this._videoSnapshotArray[i] = new VideoSnapshotControl(this._videoCollection.childNodes.item(i),
            this._varName + "._videoSnapshotArray[" + i + "]",
            premVidData[i].ContentName, 
            premVidData[i].ThumbnailURL, 
            premVidData[i].ContentURL,
            premVidData[i].ContentDescription,
            null,
            this._snapshotWidth,
			this._snapshotHeight);

       }
    }

    // set widths based on number of elements created
    this._container.childNodes.item(1).style.width = "255px"; //(this._itemWidth * this._numVideosToDisplay) + "px";
    this._videoCollection.style.width = (this._itemWidth * this._numVideosTotal) + "px";
    this._videoCollection.style.left = "0px";
	this._videoCollection.style.top = "0px";
}

// selects a specific video
VideoSnapshotCollectionControl.prototype.SelectVideo = function(videoNumber)
{
    for (i = 0; i < this._numVideosTotal; i++)
    {
        if (this._videoSnapshotArray[i]._isSelected)
        {
            this._videoSnapshotArray[i].ToggleSelected();
        }
    }
    
    this._videoSnapshotArray[videoNumber].ToggleSelected();
}

// animation to move the scroll left and right
VideoSnapshotCollectionControl.prototype.AnimateMove = function(newPos)
{
	this._isAnimating = true;
    
    var startOffset = parseInt(this._videoCollection.style.top);
    var stopOffset = /*this._itemWidth*/ 88 * newPos * -1;
    var frames = Math.abs((stopOffset - startOffset) / 5);
    var interval = (stopOffset - startOffset) / frames;
    
    var intermediateLoc = startOffset;
    
    this._videoCollection.style.top = startOffset + "px";
    
    for (i = 0; i < frames; i++)
    {
        intermediateLoc +=  interval;
        this._timerList["timer" + i] = setTimeout(this._varName + ".AnimateUpdate(" + intermediateLoc + ")", 30 * (i + 1));
    }
    
    this._timerList["timer" + (frames)] = setTimeout(this._varName + ".AnimateUpdate(" + stopOffset + ")", 30 * (frames + 1));
    this._timerList["timer" + (frames + 1)] = setTimeout(this._varName + ".StopAnimation()", 30 * (frames + 2));
}

// animate step
VideoSnapshotCollectionControl.prototype.AnimateUpdate = function(loc)
{
   if (this._isAnimating)
   {
      this._videoCollection.style.top = loc + "px";
   }
}

// scroll right
VideoSnapshotCollectionControl.prototype.MoveRight = function()
{
 
    var newPos = this._numVideosTotal - this._numVideosToDisplay;
    
    if (!this._isAnimating)
    {
        this.AnimateMove(newPos);
    }
}

// scroll left
VideoSnapshotCollectionControl.prototype.MoveLeft = function()
{
    var newPos = 0;
	
    if (!this._isAnimating)
    {
        this.AnimateMove(newPos);
    }
}

VideoSnapshotCollectionControl.prototype.StopAnimation = function()
{
   this._isAnimating = false;

   for (key in this._timerList)
   {
      clearTimeout(this._timerList[key]);
   }
}