/**
 * Create namespace using YUI for Isabella and Max Rooms.
 *
 * @author Joe Paulsen (joe@paulsenweb.com)
 */
YAHOO.namespace("imr.app");
YAHOO.namespace("imr.dom");

/**
 * Miscellaneous DOM Applications.
 *
 */

/**
 * Launch a new window.
 *
 * @params are the parameters you want the pop up window to have
 *
 */
YAHOO.imr.dom.NewWindow = function(e){

	YAHOO.util.Event.preventDefault(e);
	
	var newWin = window.open(this.href);

}

/**
 * Hide the loading container
 *
 * @param loading The Dom object for the loading page
 * @param timeout The timer to allow data to load
 * @param photoBoxObj The photo display object to start preload
 *
 **/
YAHOO.imr.app.RunPageLoad = function(){

	this.loading = YAHOO.util.Dom.get("loading");
	this.timeout = null;
	this.photoBoxObj = null;
}

/**
 * Fade out the loading image.
 *
 * @see this.loading
 *
 **/
YAHOO.imr.app.RunPageLoad.prototype.hideLoading = function(){
	
	var params = { opacity: { from: 100, to: 0 } };
	
	var scope = this;
	
	var loadingOut = new YAHOO.util.Anim(this.previousImg, params, 1, YAHOO.util.Easing.easeOut);
	loadingOut.onComplete.subscribe(function(){
			YAHOO.util.Dom.setStyle(scope.loading,"display","none");
			scope.preloadData();
		});
	loadingOut.animate();

}

/**
 * Preload the img details.
 *
 **/
YAHOO.imr.app.RunPageLoad.prototype.preloadData = function(){	
	for(var i=1;i<this.photoBoxObj.imgParams.length;i++){
		this.photoBoxObj.loadImgDisplayData(i);
	}
}

/**
 * Initialize the Hide loading container. Wait 2 seconds until you fade it out so images can load. 
 *
 */
YAHOO.imr.app.RunPageLoad.prototype.init = function(){

	var scope = this[1];
	
	scope.photoBoxObj = this[0];
	
	scope.timeout = setTimeout(function(){scope.hideLoading()},1500);

}

/**
 * Photobox application will use Bill Scott's carousel component to YUI along with YUI animation to 
 * display the larger image.
 *
 * @param imgParams The image parameters that will be set on the page level before the Photobox is rendered.
 * @param carousel The thumbnail carousel to be used
 * @param imgId Create unique image ID's using YUI for each image container
 * @param currentDisplayImg The image currently shown
 * @param previousImg The image to be hidden
 * @param currentNum The current displayed number. Used for pre-loading next image
 * @param projects array listing of the images in the project page
 * @param press array listing of the images in the press page
 *
 */
YAHOO.imr.app.Photobox = function(){

	this.imgParams = [];
	this.carousel = null;
	this.imgId = [];
	this.currentDisplayImg = null;
	this.previousImg = null;
	this.currentNum = null;
	
	// Image height can be no larger than 365px. Image width can be no larger than 470px
	// If there is content under the image, you will not be able to save the image at full height.
	this.projects = [
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_1.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_1.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":372
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_2.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_2.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":274
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_3.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_3.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":274
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_4.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_4.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":274
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_5.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_5.jpg",
		"image_description":false,
		"image_height":353,
		"image_width":470
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_6.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_6.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":274
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_7.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_7.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":274
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_8.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_8.jpg",
		"image_description":false,
		"image_height":353,
		"image_width":470
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_19.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_19.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":243
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_20.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_20.jpg",
		"image_description":false,
		"image_height":353,
		"image_width":224
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_12.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_12.jpg",
		"image_description":false,
		"image_height":364,
		"image_width":468
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_13.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_13.jpg",
		"image_description":false,
		"image_height":353,
		"image_width":470
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_14.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_14.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":257
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_15.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_15.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":258
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_16.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_16.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":245
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_17.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_17.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":243
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_18.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_18.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":189
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_9.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_9.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":205
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_10.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_10.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":274
		},
		{
		"thumbnail_url":"/img/portfolio/thumbs/thumb_11.jpg",
		"thumbnail_description":false,
		"image_url":"/img/portfolio/portfolio_11.jpg",
		"image_description":false,
		"image_height":365,
		"image_width":274
		}
	];
	this.press = [
		{
		"thumbnail_url":"/img/press/thumbs/thumb_5.jpg",
		"thumbnail_description":false,
		"image_url":"/img/press/press_5.jpg",
		"image_description":'"Knock, knock, it\'s Nate", O at Home, Winter 2007.',
		"image_height":330,
		"image_width":260
		},
		{
		"thumbnail_url":"/img/press/thumbs/thumb_6.jpg",
		"thumbnail_description":false,
		"image_url":"/img/press/press_6.jpg",
		"image_description":"Janell Beals showcases her daughter's artwork in \"O at Home\".",
		"image_height":350,
		"image_width":440
		},
		{
		"thumbnail_url":"/img/press/thumbs/thumb_7.jpg",
		"thumbnail_description":false,
		"image_url":"/img/press/press_7.jpg",
		"image_description":"\"Powder Room Proud\", HGTV Ideas, 2008.",
		"image_height":365,
		"image_width":278
		},
		{
		"thumbnail_url":"/img/press/thumbs/thumb_8.jpg",
		"thumbnail_description":false,
		"image_url":"/img/press/press_8.jpg",
		"image_description":"Janell's Powder Room Design featured in HGTV Ideas Magazine.",
		"image_height":345,
		"image_width":264
		},
		{
		"thumbnail_url":"/img/press/thumbs/thumb_1.jpg",
		"thumbnail_description":false,
		"image_url":"/img/press/press_1.jpg",
		"image_description":"This master bedroom design was featured on the front page of HGTV.com.",
		"image_height":302,
		"image_width":470
		},
		{
		"thumbnail_url":"/img/press/thumbs/thumb_2.jpg",
		"thumbnail_description":false,
		"image_url":"/img/press/press_2.jpg",
		"image_description":false,
		"image_height":265,
		"image_width":470
		},
		{
		"thumbnail_url":"/img/press/thumbs/thumb_3.jpg",
		"thumbnail_description":false,
		"image_url":"/img/press/press_3.jpg",
		"image_description":"Music Room design featured on the front page of dominomag.com.",
		"image_height":328,
		"image_width":470
		},
		{
		"thumbnail_url":"/img/press/thumbs/thumb_4.jpg",
		"thumbnail_description":false,
		"image_url":"/img/press/press_4.jpg",
		"image_description":"Devine Color's Gretchen Schauffler raves about Janell's designs using Devine Paint.",
		"image_height":310,
		"image_width":360
		}
	];

};

/**
 * This method adds items to the carousel and calls a method to add items to the img container.
 *
 */
YAHOO.imr.app.Photobox.prototype.loadPhotoboxData = function(){
	
	for(var i=0;i<=this.imgParams.length;i++) {
		this.carousel.addItem(i+1, this.buildCarouselListContent(this.imgParams[i]),"thumbnail");
		YAHOO.util.Event.addListener("photo_display-item-" + (i + 1),"click",this.showNewPhoto,i,this);
	}

};

/**
 * This method adds images to the img container.
 *
 * @param num The number of the image to be shown or created and then shown
 *
 */
YAHOO.imr.app.Photobox.prototype.loadImgDisplayData = function(num){
	
	var id = YAHOO.util.Dom.generateId();
	this.imgId[num] = id;
	
	this.currentDisplayImg = id;
	if (!this.previousImg) this.previousImg = id;
	this.currentNum = num;

	var image_container = YAHOO.util.Dom.get("image_container");
	
	var div = document.createElement("div");
	div.id = id;
	//YAHOO.util.Dom.setStyle(div,"height",this.imgParams[num].image_height + "px");
	YAHOO.util.Dom.setStyle(div,"width",(this.imgParams[num].image_width + 8) + "px");
	YAHOO.util.Dom.addClass(div,"mainPhoto");
	
	var img = document.createElement("img");
	img.src = this.imgParams[num].image_url;
	img.alt = this.imgParams[num].thumbnail_description;
	img.height = this.imgParams[num].image_height;
	img.width = this.imgParams[num].image_width;
	
	image_container.appendChild(div);
		div.appendChild(img);
		
	// Add description text if it exists
	if(this.imgParams[num].image_description){
		var description = document.createElement("div");
		YAHOO.util.Dom.addClass(description,"description");
		//YAHOO.util.Dom.setStyle(description,"width",(this.imgParams[num].image_width - 20) + "px");
		
		div.appendChild(description);
			description.appendChild(document.createTextNode(this.imgParams[num].image_description));
	}
	
};

/**
 * This method cobbles LI together HTML for the innerHTML argument.
 *
 * @param oData The object data for the image thumbnail
 * @return the content for the LI
 *
 */
YAHOO.imr.app.Photobox.prototype.buildCarouselListContent = function(oData) {

  	var content = "<img src=\"" + oData.thumbnail_url + "\" width=\"" + 45 + "\" height=\"" + 45 + "\"/>";
  	
  	if (oData.thumbnail_description) content += oData.thumbnail_description;
  
	return content;
	
};

/**
 * Set the carousel and its params.
 */
YAHOO.imr.app.Photobox.prototype.initCarousel = function(){
	
	var scope = this;
	var carouselCfg = {
			numVisible:        6,
			animationSpeed:    0.25,
			scrollInc:         5,
			navMargin:         10,
			prevElement:     "prev-arrow",
			nextElement:     "next-arrow",
			size:              scope.imgParams.length,
			prevButtonStateHandler:   scope.handlePrevButtonState,
			nextButtonStateHandler:   scope.handleNextButtonState
		}
	
	this.carousel = new YAHOO.extension.Carousel("photo_display", carouselCfg);
	this.loadPhotoboxData();
	
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the previous button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: prevButtonStateHandler
 **/
YAHOO.imr.app.Photobox.prototype.handlePrevButtonState = function(type, args) {

	var enabling = args[0];
	var leftImage = args[1];
	if(enabling) {
		leftImage.src = "/img/arrow_back_on.gif";	
	} else {
		leftImage.src = "/img/arrow_back_off.gif";	
	}
	
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the next button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: nextButtonStateHandler
 **/
YAHOO.imr.app.Photobox.prototype.handleNextButtonState = function(type, args) {

	var enabling = args[0];
	var rightImage = args[1];
	
	if(enabling) {
		rightImage.src = "/img/arrow_forward_on.gif";
	} else {
		rightImage.src = "/img/arrow_forward_off.gif";
	}
	
};

/**
 * Change the selected image. If the image has not been created, create it. If it already has, hide
 * the current image and display the selected image.
 *
 * @param num The number of the image to be displayed
 *
 **/
YAHOO.imr.app.Photobox.prototype.changeSelectedImage = function(num){

	if (!this.imgId[num]){
	
		this.loadImgDisplayData(num);
		
	} else {
	
		this.currentDisplayImg = this.imgId[num];
		this.currentNum = num;
	
	}
	
	this.hideImage();
	
}

/**
 * Fade in the full image from the clicked thumbnail. Set the fade out image = current image.
 * Preload the next images.
 *
 * @see this.currentDisplayImg
 * @see this..previousImg
 *
 **/
YAHOO.imr.app.Photobox.prototype.showImage = function(){
	
	var params = { opacity: { from: 0, to: 100 } };
	
	var scope =this;
	
	var animateIn = new YAHOO.util.Anim(this.currentDisplayImg, params, .5, YAHOO.util.Easing.easeOut);
	animateIn.onStart.subscribe(function(){
			YAHOO.util.Dom.setStyle(scope.currentDisplayImg,"display","block");
			YAHOO.util.Dom.setStyle(scope.currentDisplayImg,"visibility","visible");
			scope.previousImg = scope.currentDisplayImg;
		});
	animateIn.onComplete.subscribe(function(){
			scope.preloadImage();
		});
	animateIn.animate();
}

/**
 * Fade out the current image. On complete, call the showImage function to display the next image.
 *
 * @see this..previousImg
 * @see this.showImage()
 *
 **/
YAHOO.imr.app.Photobox.prototype.hideImage = function(){

	var params = { opacity: { from: 100, to: 0 } };
	
	var scope = this;
	
	var animateOut = new YAHOO.util.Anim(this.previousImg, params, .5, YAHOO.util.Easing.easeOut);
	animateOut.onComplete.subscribe(function(){
			YAHOO.util.Dom.setStyle(scope.previousImg,"visibility","hidden");
			YAHOO.util.Dom.setStyle(scope.previousImg,"display","none");
			
			scope.showImage();
		});
	animateOut.animate();

}

/**
 * Preload the next 2 images for the carousel thumbnail
 *
 * @see this.currentNum
 *
 **/
YAHOO.imr.app.Photobox.prototype.preloadImage = function(){

	var nextImg = (this.currentNum + 1);
	
	if (!this.imgId[nextImg] && ((nextImg + 1) <= this.imgParams.length)) this.loadImgDisplayData(nextImg);

}

/**
 * Show the full photo from the clicked thumbnail.
 *
 * @param e The event (click)
 * @param num The number of the photo to be shown.
 *
 **/
YAHOO.imr.app.Photobox.prototype.showNewPhoto = function(e,num){

	if (e === "load"){
	
		this.loadImgDisplayData(num);
		YAHOO.util.Dom.setStyle(this.currentDisplayImg,"display","block");
		YAHOO.util.Dom.setStyle(this.currentDisplayImg,"visibility","visible");
	
	} else {
	
		this.changeSelectedImage(num);
	
	}

}

/**
 * Initialize the Photobox. Use YUI domReady to trigger display 
 *
 */
YAHOO.imr.app.Photobox.prototype.init = function(){

	this.showNewPhoto("load",0);
	this.initCarousel();

};

/**
 * Initialize items global to every page
 *
 */
YAHOO.imr.app.GlobalInit = function(){

	YAHOO.util.Event.addListener("nav_blog", "click", YAHOO.imr.dom.NewWindow);

}

YAHOO.util.Event.onDOMReady(YAHOO.imr.app.GlobalInit);