var transitionTimer;
var removeTimer;
var videoOnly = false;
var imageOnly = false;
var currIdx=0;
// Set an array variable called "featuredItems" on each page displaying a featured widget.
//   featuredItems should be an array of featuredItem objects (see function below).

function featuredItem(id, name, image) {
    this.id = id;
    this.name = name;
    this.image = image;
}
function pageLoaded() {
    //console.log("onload()");
    /*start transition timer if there is more than one featuredItem*/
    if (featuredItems.length > 1) {
        transitionTimer = setTimeout("changeItem()", 3000);
    }
    setHeight();
}
function pageUnload() {
    //console.log("onunload()");
    /*stop transition timer*/
    clearTimeout(transitionTimer);
}
function changeItem() {
    //console.log("changeItem()");
    var prevIdx = currIdx;
    currIdx++;
    if (currIdx >= featuredItems.length)
        currIdx = 0;

    var featuredBox = document.getElementById('featured-box');
    /*console.log("featuredBox: " + featuredBox + "  # children: " + featuredBox.childNodes.length);
    var ii = 0;
    for (var ii = 0; ii < featuredBox.childNodes.length; ii++) {
        console.log("featuredChild[" + ii + "]: " + featuredBox.childNodes[ii]);
    }
    console.log("featuredBox first child: " + featuredBox.firstChild);*/
    featuredBox.firstChild.style.zIndex = 2;
    var nextItem = document.createElement('div');
    nextItem.id = "featured" + currIdx;
    nextItem.setAttribute("class", "featured-item ");
    //if videoOnly is set to true, call loadVideo() instead of loadWindow()
    if(videoOnly) {
        nextItem.innerHTML = "<a href='javascript:loadVideo(" + featuredItems[currIdx].id + ")' style='z-index:1'>" +
            "<img src='" + featuredItems[currIdx].image + "' alt='" + featuredItems[currIdx].name + " After Effects Template'  /></a>";
    } else if(imageOnly) {
        nextItem.innerHTML = "<div style='z-index:1'>" +
            "<img src='" + featuredItems[currIdx].image + "' alt='" + featuredItems[currIdx].name + "'  /></div>";
    } else {
        nextItem.innerHTML = "<a href='javascript:loadWindow(\"details.php?template_id=" + featuredItems[currIdx].id + "\")' style='z-index:1'>" +
            "<img src='" + featuredItems[currIdx].image + "' alt='" + featuredItems[currIdx].name + " After Effects Template'  /></a>";
    }
    featuredBox.insertBefore(nextItem, featuredBox.firstChild);
    var prevItem = "featured" + prevIdx;
    Effect.Fade(prevItem, {duration: 0.5});
    removeTimer = setTimeout("removeItem()", 550);
    transitionTimer = setTimeout("changeItem()", 3000);
}
function removeItem() {
    //console.log('removeItem()');
    clearTimeout(removeTimer);
    var featuredBox = document.getElementById('featured-box');
    featuredBox.removeChild(featuredBox.firstChild.nextSibling);
}