/// <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";
    
    var innerHTML = "<a target=\"_top\"><img onmouseover=\"" + this._varName + ".ToggleSelected();";
    if (onMouseOverCallback != null)
    {
       innerHTML += onMouseOverCallback;
    }
    innerHTML += ";\" onmouseout=\"" + this._varName + ".ToggleSelected();\" onerror=\"SwapImage(this, \'http://media1.break.com/static/live/v1/img/notavailable.gif\');\"/></a><div><a></a><div class=\"thumb-desc\">"+this._contentDescription+"</div></div>";
        
    this._container.innerHTML = innerHTML;

	this._container.style.width = (this._initialWidth +  150) + "px";
	this._container.style.height = /*(this._initialHeight + 50) +*/ "88px";
	
	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._titleElementContainer.className = "videosnapshottitle";
    this._titleElement.innerHTML = this.ShrinkTitle();
    this._titleElement.style.width = this._initialWidth + 20 + "px";
    this._imageElement.setAttribute("src", this._contentThumbnail);
    this._imageElement.style.width = this._initialWidth + "px";
    this._imageElement.style.height = this._initialHeight + "px";
    
    if (this._contentURL != null)
    {
       this._imageElementContainer.setAttribute("href", this._contentURL);
       this._titleElement.setAttribute("href", this._contentURL);
    }
    else
    {
       this._imageElement.style.border = "none";
    }
    
}

// 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, this._initialWidth + 10, this._initialHeight, this._initialHeight + 10, 10, 0);	
}

// drecrease image size
VideoSnapshotControl.prototype.ShrinkImage = function()
{
    this.AnimateResize(this._initialWidth + 10, this._initialWidth, this._initialHeight + 10, this._initialHeight, 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";
}