//depends on:
//<script src="js/carousel.js" type="text/javascript" ></script>
//<script src="js/cookie.js" type="text/javascript" ></script>
//

function Carousel(varName, imagesDir, images, links, captions, frequency, fadeDuration)
{
    // 'Private' members
    this._imgMainID = varName + '_imgCarousel';
    this._divCarouselContainerID = varName + "_divCarouselContainer";
    this._divCarouselID = varName + "_divCarousel";
    this._divCaptionID = varName + "_divCaption";
    this._lnkElementID = varName + "_lnkElementID";
    this._images = images;
    this._links = links;
    this._captions = captions;
    this._imageCount = 0;
    this._frequency = frequency;
    this._imagesDirectory = imagesDir;
    this._name = varName;
    this._activeImage = 1;
    this._fadeDuration = fadeDuration; // milliseconds
    
	// changed to false specifically for Tabloid Front Page Feature
    this._randomImages = false;
    this._imagesShown = ""; // used for tracking when showing random images
    this._numberImagesShown = 0; // used for tracking when showing random images
    this._rotationNumber = -1;

    this._runCarousel = runCarousel;
    this._drawCarousel = drawCarousel;
    this._getNextImageFullPath = getNextImageFullPath;
    this._incrementRotationNumber = incrementRotationNumber;
    this._toggleActiveImage = toggleActiveImage;
    this._activeImageNumb = activeImageNumb;
    this._inactiveImageNumb = inactiveImageNumb;
    this._rotateImage = rotateImage;
    this._rotateImageIE = rotateImageIE;
    this._setupNextRotation = setupNextRotation;
    this._preLoadImages = preLoadImages;
        
    // 'Public' members
    this.StartCarousel = startCarousel;

    // initialize carousel
    if (this._images)
    {
        this._imageCount = this._images.length;
    }
    
    if (this._imageCount > 0)
    {
        // preload images so transitions are smooth first time around
        this._preLoadImages(); 
        this._drawCarousel();
    }
}

function drawCarousel(){
    // draw html for image carousel
    document.writeln("<div id='" + this._divCarouselContainerID + "' name='" + this._divCarouselContainerID + "'>");
    document.writeln("<a href='' id='" + this._lnkElementID  + "' name='" + this._lnkElementID  + "'>");
    
    document.writeln("<div id='" + this._divCarouselID + "_1' name='" + this._divCarouselID + "_1' style='opacity: 0; MozOpacity: 0; KhtmlOpacity: 0;  filter:alpha(opacity=0);'>");
    document.writeln("<img src='' id='" + this._imgMainID  + "_1' name='" + this._imgMainID  + "_1' width='435' height='293' alt='Kusiak Music' align='absbottom'>");
    document.writeln("<div id='" + this._divCaptionID + "_1' name='" + this._divCaptionID + "_1' class='small' style='color: #CCCCCC; margin-left: .2em; margin-top: .5em; height: 70px;'>");
    document.writeln("</div>");
    document.writeln("</div>"); 
    
    document.writeln("<div id='" + this._divCarouselID + "_2' name='" + this._divCarouselID + "_2' style='opacity: 0; MozOpacity: 0; KhtmlOpacity: 0;  filter:alpha(opacity=0)'>");
    document.writeln("<img src='' id='" + this._imgMainID  + "_2' name='" + this._imgMainID  + "_2' width='435' height='293' alt='Kusiak Music' align='absbottom'>");
    document.writeln("<div id='" + this._divCaptionID + "_2' name='" + this._divCaptionID + "_2' class='small' style='color: #CCCCCC; margin-left: .2em;  margin-top: .5em; height: 70px;'>");
    document.writeln("</div>");
    document.writeln("</div>");
    
    document.writeln("</a>");  
    document.writeln("</div>");
    
    // set opacity for images to 0
    changeOpacity(0, this._divCarouselID + "_" + this._inactiveImageNumb());
    changeOpacity(0, this._divCarouselID + "_" + this._activeImageNumb());    

    // set initial image and fadein
    this._incrementRotationNumber();
    setImage(this._imgMainID + "_" + this._activeImageNumb(), this._lnkElementID, this._divCaptionID + "_" + this._activeImageNumb(), this._getNextImageFullPath(), this._links[this._rotationNumber], this._captions[this._rotationNumber]);
    fade(this._divCarouselID + "_" + this._activeImageNumb(), -100, 100, this._fadeDuration);

    // set positioning
    document.getElementById(this._divCarouselContainerID).style.position = "relative"; 
    document.getElementById(this._divCarouselID + "_1").style.position = "relative"; 
    document.getElementById(this._divCarouselID + "_2").style.position = "absolute"; 

    document.getElementById(this._divCarouselID + "_1").style.left = 0 
    document.getElementById(this._divCarouselID + "_1").style.top = 0 

    document.getElementById(this._divCarouselID + "_2").style.left = 0 
    document.getElementById(this._divCarouselID + "_2").style.top = 0 
}

function startCarousel(){
    if ( ( this._imageCount > 1)      // don't run carousel if only 1 image 
        && (this._frequency > 1000)   // require minimum frequency
        )
    {  
        this._runCarousel();    
    }
}

function runCarousel(){
    // set up the next image rotation - doing this here gives the image some time to load before next rotation
    if (browserType() == IE)
        // using blendTrans for IE (MS proprietary approach) seems to be smoother than manipulating the opacity
        var t = setTimeout(this._name + "._rotateImageIE();", this._frequency);
    else
        var t = setTimeout(this._name + "._rotateImage();", this._frequency);
}

function rotateImage(){
    this._setupNextRotation();

    this._toggleActiveImage()

    fade(this._divCarouselID + "_" + this._inactiveImageNumb(), 100, 0, this._fadeDuration)
    fade(this._divCarouselID + "_" + this._activeImageNumb(), 0, 100, this._fadeDuration) 

    this._runCarousel();     
}

function rotateImageIE(){
    var crossFadeDuration = this._fadeDuration/1000;
    this._incrementRotationNumber();

    divCarousel = document.getElementById(this._divCarouselID + "_1");

    divCarousel.style.filter="blendTrans(duration=" + crossFadeDuration + ")";
    divCarousel.filters.blendTrans.Apply();
    divCarousel.filters.blendTrans.Play();
    imgMain = document.getElementById(this._imgMainID + "_1");
  
    setImage(this._imgMainID + "_1", this._lnkElementID, this._divCaptionID + "_1", this._getNextImageFullPath(), this._links[this._rotationNumber], this._captions[this._rotationNumber]);

    this._runCarousel();     
}


function incrementRotationNumber(){
    if (this._randomImages == true){
       // reset after all images shown
        if (this._numberImagesShown >= this._imageCount)
        {
            this._imagesShown = "";
            this._numberImagesShown = 0;
        }
    
        // first time through in session, always show first image
        if (this._rotationNumber < 0 && Get_Cookie("homeImageShown") != "true") {
            this._rotationNumber = 0;
            Set_Cookie("homeImageShown", "true");
        }
        else {
           // reset once all the images have been shown
           do{
                // avoid showing duplicate images until you've gone through the whole cycle
                this._rotationNumber = Math.floor(Math.random() * this._imageCount);
              } while (this._imagesShown.indexOf(":" + this._rotationNumber + ":") >= 0);
        }
               
       this._imagesShown += ":" + this._rotationNumber + ":";
       this._numberImagesShown++;
    }
    else{
        this._rotationNumber++;
        if (this._rotationNumber >= this._imageCount)
        {
            this._rotationNumber = 0;
        }
    }
}

function getNextImageFullPath(){
    return this._imagesDirectory + "/" + this._images[this._rotationNumber];
}

function toggleActiveImage()
{
    if (this._activeImage == 1)
        this._activeImage = 2;
    else   
        this._activeImage = 1;
}

function inactiveImageNumb()
{
    if (this._activeImage == 1)
        return 2;
    else   
        return 1;
}

function activeImageNumb()
{
    return this._activeImage;
}

function setupNextRotation() {
    // set up next rotation
    this._incrementRotationNumber();
    var fullImageName = this._getNextImageFullPath();
    var link = this._links[this._rotationNumber];
    var caption = this._captions[this._rotationNumber];

    changeOpacity(0, this._divCarouselID  + "_" + this._inactiveImageNumb());
  
    // set inactive image for next rotation
    setImage(this._imgMainID + "_" + this._inactiveImageNumb(), this._lnkElementID, this._divCaptionID + "_" + this._inactiveImageNumb(), fullImageName, link, caption);    
}

function preLoadImages(){
    if (this._imageCount > 0)
    {
        document.writeln("<div id='divPreload' style='position: absolute; left: 0; top: 0;'>");
        for(i=0; i<this._imageCount; i++)
        {
            document.writeln("<img src='" + this._imagesDirectory + "/" + this._images[i] + "' width='0' height='0' alt='Image 01' />");
        }
        document.writeln("</div>");
        changeOpacity(0, "divPreload");
    }
}


/* Carousel Helper functions - not called from within the carousel object*/
function fade(divCarouselID, opacStart, opacEnd, duration) { 
    //speed for each frame 
    var speed = (duration / Math.abs(opacStart - opacEnd));
    var timer = 0; 
    var increment = 1;

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
        for(i = opacStart; i >= opacEnd; i-=increment) 
        { 
            setTimeout("changeOpacity(" + i + ", '" + divCarouselID + "')", (timer * speed)); 
            timer += increment; 
        } 
    } else if(opacStart < opacEnd) { 
        for(i = opacStart; i <= opacEnd; i+=increment) 
        { 
           setTimeout("changeOpacity(" + i + ", '" + divCarouselID + "')",  + (timer * speed)); 
            timer += increment; 
        } 
    } 
} 

function setImage(imgElementID, lnkElementID, divCaptionID, newImageFullName, newHref, newCaption){
    document.getElementById(imgElementID).src = newImageFullName;
    document.getElementById(divCaptionID).innerHTML = newCaption;    
    
    var link = document.getElementById(lnkElementID);
    if (newHref && (newHref.length > 0) )
    {
        link.href = newHref;
    }
    else
    {
        if (link.href)
            link.removeAttribute("href");
        link.onclick="return false;";
    }
    
    // added specifically for Tabloid Front Page Feature
    link.target="_blank";
}
 
//change the opacity for different browsers 
function changeOpacity(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
}


// object to represent an award won by a film
function Award(award, competition, festival)
{
	// members
	this.award = award;
	this.competition = competition;
	this.festival = festival;
}

function writeAwards(awards)
{
 	var txt = "";

	txt +='<table style="border: 0; margin: 0; padding: 0; border-spacing: 0; width:338px; text-align: center;  border-collapse: collapse;">'
		+ '	<tr><td  align="center" style="width:338px;"><table style="border:0; margin: 0; padding: 0; border-spacing: 0; border-collapse: collapse; text-align: center;"><tr>';

 	for (i in awards)
 	{
 		txt +='		<td valign="bottom" align="left"  height="20px"  style="vertical-align: middle; text-align: center; width: 12px;">'
 			+ '			<img src="images/laurel_left_sm.gif" alt="laurel" border="0">'
 			+ '		</td>'
 			+ '		<td align="center" style="vertical-align: middle; text-align:center;">';
 			
 			if (awards[i].award.length > 0)
 				txt +=  '			<span class="award">' + awards[i].award + '</span><br />';
 			
 			if (awards[i].competition.length > 0)
 				txt += '<span class="competition">' + awards[i].competition + '</span><br />';

 			if (awards[i].festival.length > 0)
 				txt += '<span class="competition">' + awards[i].festival + '</span>';
 			
 		txt += '		</td>'
 			+ '		<td valign="bottom" align="right"  style="vertical-align: middle; text-align: center; width: 12px;">'
 			+ '			<img src="images/laurel_right_sm.gif" alt="laurel" border=0 >'
 			+ '		</td>'
 		
 
	}
 	
 	txt += ' </tr></table></td></tr>'
			+ '</table>';
 	
 	return txt;
}
/* END CAROUSEL OBJECT */