// JavaScript Document
/*  JAVA  */

// set initial values 
	var matte = '#000000';
	var slideTime = 5000;
	var slideWidth;
	var slideHeight;
	var frameHeight;
	var frameWidth;
	var captionTop;
	var controlZoneTop;
	var scroller;
	var reflect = true;
	var slideshow;
	var thumbnails;
	var hud;
	var fadeSpeed = 40;
	var transition = 'swap';
	var thumbMatte = 89;
	var pickerHeight = 100;
	var browser;
	var domain = ".mac.com";
	var baseURL = "http://www.mac.com/1/slideshow/";
		
if (screen.availHeight > 975) { 	
		slideWidth = "800";
		slideHeight = "800";
		controlZoneTop = reflect ? "702" : "600";
		captionTop = reflect ? "840" : "820";
	}	else if (screen.availHeight > 775) {
		slideWidth = "800";
		slideHeight = "600";
		controlZoneTop = "473";
		captionTop = "625";
	} else {
		slideWidth = "711";
		slideHeight = "533";
		controlZoneTop = "416";
		captionTop = "558";
	}
 
function initSlideshow() {

	var slideIndex = parseInt(getQueryStringValue('slideIndex'));
	var screenWidth;
	var screenHeight;
	browser = new BrowserDetectLite();
	
	if ( !(slideIndex >= 0 && slideIndex < imgs.length) ) { 	
			// if no valid slideIndex is provided, set the screen size to accomodate the full slideshow
			slideIndex = null;
			screenWidth = parseInt(slideWidth) + 200 > screen.availWidth ? screen.availWidth : parseInt(slideWidth) + 200;
			screenHeight = parseInt(slideHeight) + 250 > screen.availHeight ? screen.availHeight : parseInt(slideHeight) + 250;
	} else {
			// else set the screen size & dimensions to accomodate only a large image for the selected index
			reflect = false;
			screenWidth = imgs[slideIndex].displayWidth + widthOffset(browser) > screen.availWidth ? screen.availWidth : imgs[slideIndex].displayWidth + widthOffset(browser);
			screenHeight = imgs[slideIndex].displayHeight + heightOffset(browser) > screen.availHeight ? screen.availHeight : imgs[slideIndex].displayHeight +  heightOffset(browser);

			slideHeight = imgs[slideIndex].displayHeight;
			slideWidth = imgs[slideIndex].displayWidth;
			captionTop = 0;
			document.title = imgs[slideIndex].caption;
			document.getElementsByTagName('body')[0].style.background = '#ffffff';

	}


	if (checkBrowser(screenHeight, screenWidth, slideIndex)) {
	
		// IE changes:  set initial opacity alpha values for IE
		alphaRules();
		

		// hijack the window and resize to the correct proportions
		if (screen.availHeight < 1050 || slideIndex != null ) {
			window.resizeTo(screenWidth, screenHeight);
		} else if (!(window.outerHeight >= 1050 && window.outerWidth >= 1000)) {
			window.resizeTo(screenWidth, screenHeight);
		}
		window.focus();

		if (document.documentElement && document.documentElement.clientWidth) {  
			screenWidth = document.documentElement.clientWidth;
		} else if (self.innerWidth) {
			screenWidth = self.innerWidth;
		} else if (document.body ) {
			screenWidth = document.body.clientWidth;
		}
		screenHeight = screenHeight - 30;
		
		// create page objects
		frameHeight = reflect ? parseInt(slideHeight) + 102 : parseInt(slideHeight);
		frameWidth = screenWidth - 20;
		var frame = appendDiv(document.getElementsByTagName('body')[0], 'frame', frameWidth, frameHeight);
		var frameTop = Math.round((screenHeight - frameHeight)/2) > 0 ? Math.round((screenHeight - frameHeight)/2) : 0;
		if (slideIndex == null) {
			frame.style.marginTop =  frameTop + 'px';	
		} else {
			frame.style.marginTop = '0px';
		}


		var slideMatte = appendDiv(frame, 'matte', parseInt(slideWidth), parseInt(slideHeight));
		slideMatte.style.marginLeft = Math.round((frameWidth - slideWidth)/2) + "px";
		slideMatte.style.marginRight = Math.round((frameWidth - slideWidth)/2) + "px";
		var slideCaption = appendDiv(frame, 'caption');
		slideCaption.style.top = captionTop + "px";
		slideMatte.style.height = frameHeight + "px";
	
		if ( slideIndex == null ) { 	
			// init slideshow and controls
			slideIndex = 0;
			slideshow = new Slideshow(slideIndex, transition);
			initControls();	
			
			initThumbnailPicker(slideIndex);	
			thumbnails.fadeHandler = setTimeout("initThumbFade()",1000);
			hud.fadeHandler = setTimeout("initControlFade()",1000);
			slideshow.playHandler = setTimeout("beginPlay()",1500);

			addEvent(document, 'onkeydown', arrowKeyDown, true);
			addEvent(document, 'onkeyup', arrowKeyUp, true);
			
		}	else {
			// if a slide index is provided, load only the slide image without reflections, controls, or captions
			slideshow = new Slideshow(slideIndex, null);
		}
	
	}
}


function beginPlay() {
	clearInterval(slideshow.playHandler);
	slideshow.playHandler = null;
	slideshow.play();
}

function initThumbFade() {
	thumbnails.fadeHander = null;
	thumbnails.fade(80,0,4000);
}

function initControlFade() {
	hud.fadeHander = null;
	hud.fade(80,0,4000);
}


function initThumbnailPicker(startPoint){

	var thumbnailZone = appendDiv(document.getElementById('frame'), 'thumbnailZone'); 
	var thumbnailPicker = appendDiv(thumbnailZone, 'thumbnailPicker');
	var thumbStrip = appendDiv(thumbnailPicker, 'thumbStrip');
  
  thumbnailZone.style.width = parseInt(frameWidth) + "px";
  thumbnailZone.style.height = parseInt(pickerHeight) + 25 + "px";
  thumbnailPicker.style.width = slideWidth + "px";
  thumbnailPicker.style.height = pickerHeight + "px";
  thumbnailPicker.style.left = Math.round((frameWidth - slideWidth)/2) + "px";
 
  thumbStrip.style.left = '0px';
	setOpacity(thumbnailPicker, 0.8);

	addEvent(thumbnailZone,'onmouseover',thumbnailFadeIn, false);
	addEvent(thumbnailZone,'onmouseout',thumbnailFadeOut, false);

  var results = generateThumbs(startPoint);
  initScroller(startPoint);
  thumbnails = new hoverControls('thumbnailPicker');
}


function initControls() {
	var controlZone = appendDiv(document.getElementById('frame'), 'controlZone');
	var controls = appendDiv(controlZone, 'controls');
	var backButton;
	var forwardButton;
	var playButton;
	var pauseButton;
	
	controlZone.style.top = controlZoneTop + "px";
	if (document.getElementById('matte').style.marginLeft) { 
		controls.style.left = Math.round((slideWidth - 177)/2) + parseInt(document.getElementById('matte').style.marginLeft) + "px";
	} else {
		controls.style.left = Math.round((slideWidth - 177)/2) + parseInt(document.getElementById('matte').offsetLeft) + "px";
	}

	if (slideshow.type != 'ie') {
		backButton = appendImage(controls, baseURL + 'images/arrow_left.png','backbutton');
		playButton = appendImage(controls, baseURL + 'images/play.png','playbutton',null,null,true);
		pauseButton = appendImage(controls, baseURL + 'images/pause.png','pausebutton');
		forwardButton = appendImage(controls, baseURL + 'images/arrow_right.png','forwardbutton');
	} else {
		controls.style.background = 'url(' + baseURL + 'images/controls.gif) center center no-repeat';
		backButton = appendImage(controls, baseURL + 'images/arrow_left.gif','backbutton');
		playButton = appendImage(controls, baseURL + 'images/play.gif','playbutton',null,null,true);
		pauseButton = appendImage(controls, baseURL + 'images/pause.gif','pausebutton');
		forwardButton = appendImage(controls, baseURL + 'images/arrow_right.gif','forwardbutton');
	}
	
	setOpacity(controls, 0.8);
	
	
	addEvent(backButton, 'onmousedown', backClick, false);
	addEvent(backButton, 'onmouseup', previous, false);

	addEvent(playButton, 'onmousedown', playClick, false);
	addEvent(playButton, 'onmouseup', restart, false);

	addEvent(pauseButton, 'onmousedown', pauseClick, false);
	addEvent(pauseButton, 'onmouseup', stop, false);

	addEvent(forwardButton, 'onmousedown', forwardClick, false);
	addEvent(forwardButton, 'onmouseup', next, false);
	
	addEvent(controlZone, 'onmouseover', hudFadeIn);
	addEvent(controlZone, 'onmouseout', hudFadeOut);
	
	hud = new hoverControls('controls');

}



function generateThumbs(startPoint){
   var thumbPicker = document.getElementById('thumbStrip');
		while (thumbPicker.hasChildNodes()) {
  		thumbPicker.removeChild(thumbPicker.lastChild);
  	}
   var thumbWidth = 69; //hardcoded here for now
   var thumbHeight = 69; //hardcoded for now
   var imageScale = .085;
   var hspace;
   var vspace;
   var urlString = "";
   var thumbStyle; 
   
   thumbPicker.style.width = (imgs.length * 89) + "px";
   
   for (var i = 0; i < imgs.length; i++) {
   	imageScale = thumbWidth/imgs[i].width < thumbHeight/imgs[i].height ? thumbWidth/imgs[i].width : thumbHeight/imgs[i].height;
   	hspace = Math.round((thumbWidth -  (imgs[i].width * imageScale))/2) + 7;
   	vspace = Math.round((thumbHeight - (imgs[i].height * imageScale))/2);
   	thumbStyle = i == startPoint ? 'selectedthumb' : 'thumb"';
    urlString = urlString + '<img src="' + addTransformation(imgs[i].src, 'mini') + '" width="' + Math.round(imgs[i].width * imageScale) + '" height="' + Math.round(imgs[i].height * imageScale) + '" class="' + thumbStyle + '" id="thumb' + i + '" hspace="' + hspace + '" vspace="' + vspace + '" onclick="slideshow.resetSlideshow('+i+');" onfocus="blur();">';
    
    // Add visible images immediately, then wait to add others
    if (i<=8) {
    	thumbPicker.innerHTML = thumbPicker.innerHTML + urlString;
    	urlString = "";
    }
   }
   
   // Add any remaining images
   thumbPicker.innerHTML = thumbPicker.innerHTML + urlString;
   return true;
}


function initScroller(startPoint) {
		var thumbZone = document.getElementById('thumbnailPicker');
		var scrollbar = appendDiv(thumbZone, "scrollbar");
		scrollbar.style.top = "84px";
		scrollbar.style.left = "0px";
		scrollbar.style.width = parseInt(slideWidth) - 2 + "px";
		scrollbar.style.height = "15px";
		var bar = appendDiv(scrollbar, "bar");
		bar.style.top = "0px";
		bar.style.left = "0px";
		bar.style.width = "100%";
		bar.style.height = "13px";		
		var dragTool = appendDiv(scrollbar, "dragtool");
		dragTool.style.top = "1px";
		dragTool.style.left = "0px";
		dragTool.style.width = "26px";
		dragTool.style.height = "13px";
		dragTool = appendImage(dragTool, 'http://www.mac.com/1/slideshow/images/dragger.gif', null, 24,13);
		dragTool.setAttribute('hspace','1');
		var ruler = appendDiv(scrollbar, "ruler");
		ruler.style.top = "0px";
		ruler.style.left = "0px";
		scroller = new Scroller();
		
		if (startPoint != null) {
			scroller.jumpTo(startPoint);
		}

		// Make browser-specific adjustments to alignment of scroller
		if (browser.isIE && browser.isWin) {
			scrollbar.style.top = parseInt(scrollbar.style.top) - 2 + 'px';
			bar.style.height = parseInt(bar.style.height) + 2 + 'px';
			scrollbar.style.width = parseInt(scrollbar.style.width) + 2 + 'px';
		} else if (browser.isSafariJaguar) {
			bar.style.width = parseInt(slideWidth) - 3 + 'px';
		}

}

function checkBrowser(screenHeight, screenWidth, slideIndex) {

		var languageinfo = getLanguage(); 
		

		if (browser.isSafari || browser.isFirefox1up || browser.isNS7up || browser.isIE55up || browser.isCamino) {
			//do nothing, browser is supported
			return true;
		} else if (getCookie('browsewarning') == 'true') {
			// do nothing, user has already seen browser warning
			return true;
		} else {
			setCookie('browsewarning','true');
			setCookie('continue',window.location.href);
			// hijack the window and resize to the correct proportions
			if (screen.availHeight < 1050 || slideIndex != null) {
				if (screenWidth > 565 && screenHeight > 425) {
					window.resizeTo(screenWidth, screenHeight);
				} else {
					window.resizeTo(565, 425);
				}
			}
			window.focus();
				
			// redirect to browser warning
				switch (languageinfo) {
					case 'de' :
						window.location = baseURL + 'messaging/4/browser_req.html';
						break;
					case 'fr' :
						window.location = baseURL + 'messaging/3/browser_req.html';
						break;
					case 'ja' :
						window.location = baseURL + 'messaging/2/browser_req.html';
						break;
					default : 
						window.location = baseURL + 'messaging/1/browser_req.html';
					}
				return false;
			}
}


//  Event handlers for controls

function thumbnailFadeIn(evt) {
	try {
	 evt = (evt) ? evt : ((window.event) ? window.event : "");
		if ( checkMouseEnter(document.getElementById("thumbnailZone"), evt) ) {
			 if (!thumbnails.holdFade) {
					scroller.jumpTo(slideshow.imgCount);
					slideshow.pause();
					thumbnails.fade(90,90,0);
				}
		}
	} catch (e) {}
}

function thumbnailFadeOut(evt) {
	try {
	 evt = (evt) ? evt : ((window.event) ? window.event : "");
		if ( checkMouseLeave(document.getElementById("thumbnailZone"), evt) ) {
			if (!thumbnails.holdFade) {
	  			thumbnails.fade(30,0,2000);
					if (slideshow.playHandler == null) {
						slideshow.play(false);
					}
				}
		}
	} catch (e) {}
}
	
function hudFadeIn(evt) {
	try {
	 evt = (evt) ? evt : ((window.event) ? window.event : "");
		if ( checkMouseEnter(document.getElementById("controlZone"), evt) ) {
			hud.fade(80,80,0);
		}
	} catch (e) {}
}
	
function hudFadeOut(evt) {
	try {
	 evt = (evt) ? evt : ((window.event) ? window.event : "");
		if ( checkMouseLeave(document.getElementById("controlZone"), evt) && getOpacity(document.getElementById('controls')) > 5) {
			hud.fade(40,0,2000);
			if (slideshow.playHandler == null) {
				slideshow.play(false);
			}
		}
	} catch (e) {}
}
	
// Fires only when user selects the 'pause' button in the hud.  Play is stopped and will 
// not be automatically resumed in response to mouse events.
function stop() {
	slideshow.pause();
	slideshow.playHandler = -1;
	document.getElementById('playbutton').style.display = '';
	document.getElementById('pausebutton').src = slideshow.type == 'ie' ? baseURL + 'images/pause.gif' : baseURL + 'images/pause.png';
	document.getElementById('pausebutton').style.display = 'none';
	return false;
}

function pauseClick() {
	document.getElementById('pausebutton').src = slideshow.type == 'ie' ? baseURL + 'images/pause_on.gif' : baseURL + 'images/pause_on.png';
	return false;
}


// Fires only when user selects the 'play' button in the hud.  Allows user to resume play after it has been explicitly stopped.
function restart() {
	slideshow.playHandler = null;
	document.getElementById('pausebutton').style.display = '';
	document.getElementById('playbutton').src = slideshow.type == 'ie' ? baseURL + 'images/play.gif' : baseURL + 'images/play.png';
	document.getElementById('playbutton').style.display = 'none';
	if ( getOpacity(document.getElementById('controls')) > 5) hud.fade(90,0,5000);
	slideshow.playHandler = setTimeout("slideshow.play(true)",1500);
	//return false;
}

function playClick() {
	document.getElementById('playbutton').src = slideshow.type == 'ie' ? baseURL + 'images/play_on.gif' : baseURL + 'images/play_on.png';
	return false;
}


function forwardClick() {
	document.getElementById('forwardbutton').src = slideshow.type == 'ie' ? baseURL + 'images/arrow_right_on.gif' :  baseURL + 'images/arrow_right_on.png';
	return false;
}


function next() {
	document.getElementById('forwardbutton').src = slideshow.type == 'ie' ? baseURL + 'images/arrow_right.gif' : baseURL + 'images/arrow_right.png';
	slideshow.skip('next');
	return false;
}

 function backClick() {
	document.getElementById('backbutton').src = slideshow.type == 'ie' ? baseURL + 'images/arrow_left_on.gif' : baseURL + 'images/arrow_left_on.png';
	return false;
}

function previous() {
	document.getElementById('backbutton').src = slideshow.type == 'ie' ? baseURL + 'images/arrow_left.gif' : baseURL + 'images/arrow_left.png';
	slideshow.skip('prev');
	return false;
}

// enables arrow keys to skip through slideshow
function arrowKeyDown(evt) {

	evt = (evt) ? evt : ((window.event) ? window.event : "");
	var keyCode = evt.which ? evt.which : evt.keyCode;
	
	switch (keyCode) {
		case 39:
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			forwardClick();
			break;
		case 34:
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			forwardClick();
			break;
		case 37:
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			backClick();
			break;
		case 33:
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			backClick();
			break;
		case 32 :
		evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			if (slideshow.playHandler == -1) {
				playClick();
			} else {
				pauseClick();
			}
			break;
	}
	
	if ( (slideshow.imgCount * thumbMatte) > (scroller.getContentClipW() - scroller.getContentL()) ) {
		scroller.jumpTo(slideshow.imgCount, 'left');
	} else if ( (slideshow.imgCount * thumbMatte) <  -scroller.getContentL() ) {
		scroller.jumpTo(slideshow.imgCount, 'right');
	} 

}


// enables arrow keys to skip through slideshow
function arrowKeyUp(evt) {

	evt = (evt) ? evt : ((window.event) ? window.event : "");
	var keyCode = evt.which ? evt.which : evt.keyCode;

	switch (keyCode) {
		case 39:
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			next();
			break;
		case 34:
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			next();
			break;
		case 37:
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			previous();
			break;
		case 33:
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			previous();
			break;
		case 32 :
			evt.cancelBubble = true;
			if (evt.stopPropagation) evt.stopPropagation();
			if (slideshow.playHandler == -1) {
				restart();
			} else {
				stop();
			}
			break;
		case 36:
			slideshow.pause();
			slideshow.resetSlideshow(0);
			if (slideshow.playHandler != -1) slideshow.play();
			break;	
		case 35:
			slideshow.pause();
		  slideshow.resetSlideshow(imgs.length - 1);
		  if (slideshow.playHandler != -1) slideshow.play();
		  break;
	}
	
	if ( (slideshow.imgCount * thumbMatte) > (scroller.getContentClipW() - scroller.getContentL()) ) {
		scroller.jumpTo(slideshow.imgCount, 'left');
	} else if ( (slideshow.imgCount * thumbMatte) <  -scroller.getContentL() ) {
		scroller.jumpTo(slideshow.imgCount, 'right');
	} 

}

// calculate window size based on browser type, used for tight crop
function heightOffset(browser) {
 	if (browser.isIE5xMac) {
		return 15;
	} else if (browser.isSafari) {
		return 23;
	} else if (browser.isFirefox && browser.isWin) {
		return 25;	
	} else if (browser.isNS6up && browser.isWin) {
		return 30;
	} else if (browser.isCamino) {
		return 40;
	} else if (browser.isMozilla ) {
		return 42;
	}	else if (browser.isIEWin ) {
		return 49;	
	}	else {
		return 0;
	}
}

// calculate window size based on browser type
function widthOffset(browser) {
	if (browser.isIE5xMac) {
		return 5;
	} else {
		return 0;
	}
}