// JavaScript Document

function setSizes() {
	//Sets the sizes of content boxes by subtracting widths from the window size
	//thanks to http://www.howtocreate.co.uk/tutorials/javascript/browserwindow for the IE workaround
	var windowWidth = 0, windowHeight = 0;
	 if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		//windowWidth = window.innerWidth;
		//windowHeight = window.innerHeight;
		windowWidth = window.innerWidth;
		windowHeight = window.innerHeight;
	 } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}
	
	var contentWidth = windowWidth - 310;
	var contentHeight = windowHeight - 260;
	var content = document.getElementById('content')
	
	content.style.width = contentWidth + 'px'
	content.style.height = contentHeight + 'px'
}

// Ribbon Functions
var ribbon = {
	// dimensions of individual slides
	slideHeight: 80,
	slideWidth: 200,
	// number of sliding windows.  This should be one more than the total windows needed to cover the mask.
	numWindows: 6,
	// milliseconds between the movements. (40 = 25fps).
	timerDelay: 40,
	
	// Total number of picture slide divs that exist in the html.  This is calculated by the php script and passed
	// in by initialize(num)
	numSlides: 0,
	idxFirstSlide: 0,
	posFirstSlide: 0,
	
	initialize: function(num) {
		this.numSlides=num;
		var t=setTimeout('ribbon.myTimer()',this.timerDelay);
	},
		
	myTimer: function(o){
		var i;
		var d;
		var lpos=this.posFirstSlide;
		for (i=0, d=this.idxFirstSlide; i<this.numWindows; i++, d++){
			if (d>=this.numSlides) {
				d=0;
			}
			pDiv = document.getElementById('ribbonDiv'+d);
			pDiv.style.left=lpos+'px';
			pDiv.style.display='block';
			lpos=lpos+this.slideWidth;
		}
		this.posFirstSlide=this.posFirstSlide-1;
		if (this.posFirstSlide<=0-this.slideWidth){
			this.posFirstSlide=0;
			hDiv = document.getElementById('ribbonDiv'+this.idxFirstSlide);
			hDiv.style.display='none';
			this.idxFirstSlide=this.idxFirstSlide+1;
			if (this.idxFirstSlide==this.numSlides){
				this.idxFirstSlide=0;
			}
		}
		var s=setTimeout("ribbon.myTimer()",this.timerDelay);
	}
}



//Stuff to do when the page is loaded
window.onload = setSizes
window.onresize = setSizes