/*------------------------------------------------------------------------------
Description: JavaScript object for creating JSON Photo Gallery
Website: www.nba.com
Author: Neal Gamradt
Created: 2009.01.14
Version: $Id: nbaPhotoGallery.js,v 1.5 2009/01/19 23:53:33 ngamradt Exp $
------------------------------------------------------------------------------*/

function NBAPhotoGallery(strJsonPath,strInstance) {

	//Set the standard name property
	this.name = "NBAPhotoGallery";

	//Used later to get exact instance
	//Had to do it this way due to IE issues, needs to be the same as the instance variable name
	this.instanceName = strInstance;

	//JSON path and filename
	this.jsonFile = "allStar.html";
	this.jsonPath = strJsonPath;

	//Create an array that will store all the slide information
	this.slides = new Array();
	
	//Max pixel width or height of the image
	this.imageSize = 298;

	//Set up the path to the full gallery
	this.galleryUrl = "/allstar2009/photos/";

	//Set up all of the CSS values
	this.domCaption = "#nbaPhotoContent .nbaPhotoCaption";
	this.domParagraph = "#nbaPhotoContent .nbaPhotoPara";
	this.domParagraphText = "#nbaPhotoContent .nbaPhotoPara span";
	this.domGalleryHeader = "#nbaPhotoHeader .nbaPhotoAll a";
	this.domGalleryReturn = "nbaPhotoCSIReturn";
	this.domImage = "nbaPhotoImage";
	this.domLeftButton = "#nbaPhotoContent .nbaPhotoLeftBtn a";
	this.domRightButton = "#nbaPhotoContent .nbaPhotoRightBtn a";

	//Load the photo gallery
	this.load = function() {

		//Set the location of the gallery
		$$(this.domGalleryHeader)[0].href = this.galleryUrl;

		//Do this process to pass in the parent, needed because some versions of JavaScript cannot automatically determine their parent
		var configData = CSIManager.getInstance().getConfigForId(this.domGalleryReturn);
		configData.parent = this;
		CSIManager.getInstance().setConfigForId(this.domGalleryReturn,configData);		

		try {
			//Load the first slide
			CSIManager.getInstance().call(this.jsonPath + '/' + this.jsonFile,null,this.domGalleryReturn,this.loadAllSlides);
		} catch(e) {
			alert("Error:" + e);
		}

	} 

	//Build the result html (callback)
	this.loadAllSlides = function(objGallery,strDomId,objConfig) {

		//Set the object parent
		var objParent = objConfig.parent;

		//Go through all the slides
		for (var intCount = 0; intCount < objGallery.slides.length; intCount++) {

			//Change the slide number to start from zero
			var intCurr = parseInt(objGallery.slides[intCount].number) - 1;

			//Populate each slide
			objParent.slides[intCurr] = new Object();
			objParent.slides[intCurr].caption = objGallery.slides[intCount].credit;
			objParent.slides[intCurr].paragraph = objGallery.slides[intCount].blurb;
			objParent.slides[intCurr].image = new Image(objGallery.slides[intCount].image.width,objGallery.slides[intCount].image.height);
			objParent.slides[intCurr].image.src = objGallery.slides[intCount].image.url;
			objParent.slides[intCurr].image.alt = objGallery.slides[intCount].headline;
			objParent.slides[intCurr].image.title = objGallery.slides[intCount].headline;

		}

		//Load the default slide
		objParent.loadSlide(0);
	}

	//Load a single slide
	this.loadSlide = function(intSlide) {

		//Set the current slide
		var objCurrSlide = this.slides[intSlide];

		var intSlides = this.slides.length - 1;

		//Set the previous link
		if (intSlide > 0) {
			var intSlidePrev = intSlide - 1;
			$$(this.domLeftButton)[0].href = "javascript:"+this.instanceName+".loadSlide("+intSlidePrev+")";
		} else {
			$$(this.domLeftButton)[0].href = "javascript:"+this.instanceName+".loadSlide("+intSlides+")";
		}

		//Set the next link
		if (intSlide < intSlides) {
			var intSlideNext = intSlide + 1;
			$$(this.domRightButton)[0].href = "javascript:"+this.instanceName+".loadSlide("+intSlideNext+")";
		} else {
			$$(this.domRightButton)[0].href = "javascript:"+this.instanceName+".loadSlide(0)";
		}

		//Set the caption and paragraph
		$$(this.domCaption)[0].innerHTML = "<span>"+objCurrSlide.caption+"</span>";
		
		//Populate and then center the text.  Using offsetHeight and offsetWidth which are supported on all major browsers so will give a great majority of users a better experience.
		//Decided to do this in JavaScript because the CSS hacks to do this are very complex.
		$$(this.domParagraph)[0].style.visibility = "hidden";
		$$(this.domParagraph)[0].innerHTML = "<span>"+objCurrSlide.paragraph+"</span>";
		if ($$(this.domParagraph)[0].offsetHeight) {
			$$(this.domParagraphText)[0].style.position = "relative";
			$$(this.domParagraphText)[0].style.top = ((($$(this.domParagraph)[0].offsetHeight - $$(this.domParagraphText)[0].offsetHeight)/2)-1) + "px";
			$$(this.domParagraphText)[0].style.left = ((($$(this.domParagraph)[0].offsetWidth - $$(this.domParagraphText)[0].offsetWidth)/2)-1) + "px";
		}
		$$(this.domParagraph)[0].style.visibility = "visible";

		//Set up the image
		$(this.domImage).src = objCurrSlide.image.src;
		$(this.domImage).alt = objCurrSlide.image.alt;
		$(this.domImage).title = objCurrSlide.image.title;

		//Calculate the width and height of the image
		this.scaleImage(objCurrSlide.image.width,objCurrSlide.image.height);

		$(this.domImage).style.visibility = "visible";
		$(this.domImage).style.top = (this.imageSize - $(this.domImage).height) + "px";
		$(this.domImage).style.left = ((this.imageSize - $(this.domImage).width)/2) + "px";
		
		//Fade in the image
		fadeIn(this.domImage,0);

	}

	//Scale the image
	this.scaleImage = function(intWidth,intHeight) {

		//Get the default size
		var intSize = this.imageSize;

		//Set the ratio value
		var fltRatio = 0;

		//Depending on the width, decide how to calculate
		if (intWidth == intHeight) {

			$(this.domImage).width = intSize;
			$(this.domImage).height = intSize;

		} else if (intWidth > intHeight) {

			//Calculate the scaling
			fltRatio = intSize/intWidth;
			intHeight = Math.round(fltRatio * intHeight);
		
			$(this.domImage).width = intSize;
			$(this.domImage).height = intHeight;

		} else {

			//Calculate the scaling
			fltRatio = intSize/intHeight;
			intWidth = Math.round(fltRatio * intWidth);
	
			$(this.domImage).width = intWidth;
			$(this.domImage).height = intSize;	
		}
	}
}

//Set the opacity
function setOpacity(strFade,intOpacity) {

	var objFade = document.getElementById(strFade);
	
    intOpacity = (intOpacity == 100)?99.999:intOpacity;

    //Internet Explorer
    objFade.style.filter = "alpha(opacity:"+intOpacity+")";    

    //Firefox, Safari, and Newest Mozilla
    objFade.style.opacity = intOpacity/100;
    
    //Older Firefox and Mozilla
    objFade.style.MozOpacity = intOpacity/100;

    //Konqueror and Old Safari
    objFade.style.KHTMLOpacity = intOpacity/100;
}

//Fade in the image
function fadeIn(strFade,intStart) {

	//Make sure the image isn't fully faded in already
	if (intStart <= 100) {

		//Set the current opacity
        setOpacity(strFade,intStart);

        //Increase the start point
        intStart += 10;

        //Pause before fading in further through recursion
        window.setTimeout("fadeIn('"+strFade+"',"+intStart+")",50);
	}
}