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

/**
 * @author dpio
 dhtml_tools.js is required
 This js is for the smaller video snapshots
*/


function VideoSnapshotControl(container, varName, contentTitle, contentThumbnail, contentURL, contentDescription, onMouseOverCallback, width, height)
{
    this._container = container;
    this._varName = varName;
    this._contentTitle = contentTitle;
    this._contentThumbnail = contentThumbnail;
    this._contentURL = contentURL;
    this._contentDescription = contentDescription;
    this._isSelected = false;
    this._initialWidth = parseInt(width);
	this._initialHeight = parseInt(height);
    
    this.Init(onMouseOverCallback);
}

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

VideoSnapshotControl.prototype._contentTitle;
VideoSnapshotControl.prototype._contentThumbnail;
VideoSnapshotControl.prototype._contentURL;
VideoSnapshotControl.prototype._contentDescription;
VideoSnapshotControl.prototype._imageElementContainer;
VideoSnapshotControl.prototype._imageElement;
VideoSnapshotControl.prototype._titleElementContainer;
VideoSnapshotControl.prototype._titleElement;
VideoSnapshotControl.prototype._isSelected;
VideoSnapshotControl.prototype._initialWidth;
VideoSnapshotControl.prototype._initialHeight;


// init control
VideoSnapshotControl.prototype.Init = function (onMouseOverCallback)
{
    this._container.className = "videosnapshotcontainer videosnapshotunselected";
    
    this._container.innerHTML = "<a><img onmouseover=\"" + this._varName + ".GrowImage();" + onMouseOverCallback + ";\" onmouseout=\"" + this._varName + 
        ".ShrinkImage();\" onerror=\"SwapImage(this, \'http://media1.break.com/static/live/v1/img/notavailable.gif\');\"/></a><div><a></a></div>";

	this._imageElementContainer = this._container.childNodes.item(0);
    this._imageElement = this._imageElementContainer.firstChild;
    this._titleElementContainer = this._container.childNodes.item(1);
    this._titleElement = this._titleElementContainer.firstChild;
    
    this._imageElementContainer.setAttribute("href", this._contentURL);
    this._imageElement.setAttribute("src", this._contentThumbnail);
    
    this._titleElementContainer.className = "videosnapshottitle";
    this._titleElement.setAttribute("href", this._contentURL);
    this._titleElement.innerHTML = this.ShrinkTitle();
}

// shrinks long titles
VideoSnapshotControl.prototype.ShrinkTitle = function ()
{
    if (this._contentTitle.length > 35)
    {
        return (this._contentTitle.substr(0, 31) + " ...")
    }
    else
    {
        return this._contentTitle;
    }
}

// toggles the background from transparent to black
VideoSnapshotControl.prototype.ToggleSelected = function()
{
    if (this._isSelected)
    {
        this._container.className = "videosnapshotcontainer videosnapshotunselected";
    }
    else
    {
        this._container.className = "videosnapshotcontainer videosnapshotselected";
    }
    
    this._isSelected = !(this._isSelected);
}

// increase image size
VideoSnapshotControl.prototype.GrowImage = function()
{
    this.AnimateResize(this._initialWidth - 20, this._initialWidth - 10, this._initialHeight - 25, this._initialHeight - 15, 10, 0);
}

// drecrease image size
VideoSnapshotControl.prototype.ShrinkImage = function()
{
    this.AnimateResize(this._initialWidth - 10, this._initialWidth - 20, this._initialHeight - 15, this._initialHeight - 25, 0, 10);
}

// animation control to resize
VideoSnapshotControl.prototype.AnimateResize = function(startWidth, endWidth, startHeight, endHeight, startPadding, endPadding)
{
    var frames = 5;
    var intervalWidth = (endWidth - startWidth) / frames;
	var intervalHeight = (endHeight - startHeight) / frames;
    var intervalPadding = (endPadding - startPadding) / frames;
    
    var intermediateWidth = startWidth;
	var intermediateHeight = startHeight;
    var intermediatePadding = startPadding;
    
    this._imageElement.style.width = startWidth + "px";
    this._imageElement.style.height = startHeight + "px";
    this._imageElement.style.marginTop = startPadding + "px";
    
    for (i = 0; i < frames; i++)
    {
        intermediateWidth +=  intervalWidth;
		intermediateHeight +=  intervalHeight;
        intermediatePadding +=  intervalPadding;
        setTimeout(this._varName + ".AnimateUpdate(" + intermediateWidth + ", " + intermediateHeight + ", " + intermediatePadding +")", 30 * (i + 1));
    }
    
    setTimeout(this._varName + ".AnimateUpdate(" + endWidth + ", " + endHeight + ", " + endPadding + ")", 30 * (frames + 1));
}

// animation step
VideoSnapshotControl.prototype.AnimateUpdate = function(width, height, padding)
{
    this._imageElement.style.width = width + "px";
    this._imageElement.style.height = height + "px";
    this._imageElement.style.marginTop = padding + "px";
}