// JavaScript Document

/*
Class: TestimonyPopUp
2008 Nov 13
It manage the pop-up which show the details of the little testimony module on
cart_product_detail.php
*/
var TestimonyPopUp=function()
{
	//Properties
	this.popUp=null;
	this.tstm_id = null;
	this.processorUrl = null;
	this.product_name = null;
	
	this.muestrame_success = function(o)
	{
		var view = YAHOO.lang.JSON.parse(o.responseText);
		//alert(view[0]["hd"]);
		this.popUp.setHeader(view[0]["hd"]);
		this.popUp.setBody(view[0]["bd"]);
		this.popUp.setFooter(view[0]["ft"]);
		this.popUp.render(document.body);	
		this.popUp.show();
		$(".lightbox").lightbox();
	}
	
	this.muestrame_failure = function()
	{
		alert("Error in muestrame function");	
	}
	
	this.muestrame = function(tstm_id)
	{
	
		var callBack=
		{
			success: this.muestrame_success,
			failure: this.muestrame_failure,
			scope: this
		};
		var postData = "action=pop&tstm_id="+tstm_id;
		//YAHOO.util.Dom.get(this.storedAddressesDiv).innerHTML= ("<p>Loading ...<p>");
		YAHOO.util.Connect.asyncRequest('POST', this.processorUrl, callBack, postData);	
	}
	this.mask_click = function(e, obj)
	{
		this.popUp.hide();
		this.popUp.render(document.body);	
	}
	/*
	Function: init
	it plays the roles of the constructor, but you have to call it explicity.
	*/
	this.init=function()
	{
		//this.tstm_array = eval(resultado);
		//alert(this.tstm_array["tstm_all_testimony"]);
		this.processorUrl =	"../../model/cart_product_detail_wfc_MDL.php";
		this.popUp = new YAHOO.widget.Panel("testimonyWindow_pnl", {
																		width:"620px", 
																		//height:"400px",
																		fixedcenter: true, 
																		underlay:"shadow", 
																		close:true, 
																		visible:false, 
																		draggable:true,
																		modal: true
																	});
		
		//YAHOO.lang.JSON.parse
		YAHOO.util.Event.addListener("testimonyWindow_pnl_mask", "click", this.mask_click, this, true);
		this.popUp.render(document.body);
	}
	
}


/*
	Class: MoreViews, 2008 Apr 18
	It provides all the functions to handle Extra Images of a product.
*/
var MoreViews = function()
{
	//PROPERTIES
	//var firstIndex=0;
	//var superIndex = 1;
	/*
	Variable: thumbnail_arr
	Array of thumbnail views (Views -> Extra Images) of the product.
	*/
	var thumbnail_arr = null;
	/*
	Variable: medium_arr
	Array of medium size views (Views -> Extra Images) of the product.
	*/
	var medium_arr = null;
	/*
	Variable: thumbnail_arr
	Array of primary views (Views -> Extra Images) of the product.
	*/
	var primary_arr = null;
	var site_url = null; 
	var product_id = null;
    var category_id = null;
	var product_url = null;
	this.product_name = null;

	
	/*
	Note: Jan 13 2009
	This function returns the name of the image for the alt property with the extension, underscores and hyphens removed
	*/
	
	this.getOneItemImage_getAlt = function(data_string)
	{
		var alt_string = new String();
		
		alt_string = data_string;
		alt_string = alt_string.replace(/_/g," ");
		alt_string = alt_string.replace(/-/g," ");
		alt_string = alt_string.replace(/.jpg/g,"");
		alt_string = alt_string.replace(/'/g,"&acute;");
		
		return alt_string;
	}
	
	/*
	Note: 2009 JAn 13
	This function returns alt attribute of each images.
	*/
	this.setAltAttribute = function(altImage)
	{
		var result = "";
		if(altImage != "")
		{
			splitResult = unescape(altImage).split ("/");
			result = this.getOneItemImage_getAlt(splitResult[splitResult.length-1]);
		}
		return result;
	}
	
	/*
		Function: rotateViews
		It moves all the views one step to the left.
	*/			
	this.rotateToFirst=function(index)
	{
		this.firstIndex = index;
		if(this.firstIndex==this.thumbnail_arr.length)
			this.firstIndex=0;
		this.placeImages(this.firstIndex);
		this.placeAsMainImage(this.firstIndex);
	}
	/*
		Function: rotateViews
		It moves all the views one step to the left.
	*/			
	this.rotateOneImage=function()
	{
		//if this is the last, we put this.firstIndex in cero because we need to show extra images
		if(this.firstIndex==this.thumbnail_arr.length-1)
			this.firstIndex=0;
		else
			this.firstIndex++;//Here, we move all the Views one step to the left.
		//alert("first index: "+this.firstIndex);
		this.placeImages(this.firstIndex);
		this.placeAsMainImage(this.firstIndex);
	}
	
	/*
	Note: 2009 Jan 21
	This function was created to add loading gif before the true image appears.
	*/
	
	this.waitForImage = function(loadingImage, setImage, alt, stepDuration)
	{
		var loadingImageHTML = YAHOO.util.Dom.get(loadingImage);
		var setImageHTML = YAHOO.util.Dom.get(setImage);
		if(!setImageHTML.complete){
		var _this = this;
		setTimeout(function() { _this.waitForImage(loadingImage, setImage, alt, stepDuration) }, stepDuration);
			//setTimeout("waitForMainImage("+"\""+alt+"\")", 250);
		}
		else
		{
			YAHOO.util.Dom.removeClass(loadingImageHTML.id, 'elementVisible');
			YAHOO.util.Dom.addClass(loadingImageHTML.id, 'elementHidden');
			YAHOO.util.Dom.removeClass(setImageHTML.id, 'elementHidden');
			YAHOO.util.Dom.addClass(setImageHTML.id, 'elementVisible');
			setImageHTML.setAttribute('alt',alt);
		}
	}
	
	this.placeAsMainImage=function(index)
	{
		//var mainImageHTML = "<a href='#'><img id='mainImage'></a>";
		//show specific medium_image fom cart_product_extra_images table and put primary_arr in <a> 
		//note: 2008 jul 25 add jquery lightbox manually
		
		
		

		//var mainImageHTML = "<a rel='lightbox' class='lightbox' style='display:block; width:250px; height:auto; overflow:hidden;' href='"+this.primary_arr[index]+"' >";
		//Note: 2010Mar28 - Style in CSS file
		var mainImageHTML = "<a rel='lightbox' class='lightbox' href='"+this.primary_arr[index]+"' >";
		mainImageHTML += "<img id='loadingMainImage' class='elementVisible' src='../../site_files/FiftyFlowers/ff_images/mozilla_blu.gif' />";
		//mainImageHTML += "<img id='setMainImage' src='"+this.medium_arr[index]+"' class='elementHidden' width='250' /> </a>";
		//Note: 2010Mar28 - Style in CSS file
		mainImageHTML += "<img itemprop='image' id='setMainImage' src='"+this.primary_arr[index]+"' class='elementHidden' /> </a>";
		//alt='"+this.setAltAttribute(this.medium_arr[index])+"' width='250px'
		//Now we place the HTML content inside "moreViews" div.
		this.showMainPicture.innerHTML = mainImageHTML;
		
		var loadingImage = "loadingMainImage";
		var setImage = "setMainImage";
		var alt = this.setAltAttribute(this.medium_arr[index]);
		var stepDuration = 250;
		/*
		Note: 2009 Jan 21
		This section was created to add loading gif before the main image appears.
		*/
		this.waitForImage(loadingImage, setImage, alt, stepDuration);
		
		//this.e.onContentReady('mainImage', this.fadeIn);
		//it's necesary to function lightbox effect
		//Lightbox.init();
		//Slimbox.scanPage();
		//initLightbox();
		//$(".lightbox").lightbox();
		/*
		Note: 2008 august 08
		esta línea es necesaria para que funcione el efecto de lightbox en todas las imágenes incluidas las extra images
		*/
		$(".lightbox").lightbox();
		
	}

	/*
	Function: placeImages
	It inserts three views and the "moreViewsBar" in "moreViews" div.
	*/
	this.placeImages=function(count)
	{
		//Initialize variable
		//add image loader
		var moreViewsHTML="";
		var currentIndex = count;
		var j = 0;
		var superIndex = count;

		this.moreViews.innerHTML = moreViewsHTML;

		//create new div to view images
		if (this.thumbnail_arr.length > 1)
		{
			var altAttribute = 0;
			var rowImages = true;
			moreViewsHTML+="<div id='views'>";
			while(j!=8 && j!=this.thumbnail_arr.length)
			{
				if(rowImages == true)
				{
					moreViewsHTML += "<div class='rowImages'>";
					rowImages = false;
				}

				//With this we assign a custom style for the last imageBox.
				if(j==3 || j== 7)
				{
					moreViewsHTML+="<div id='imageBox_3' class='imageBox lastBox'>";
					rowImages = true;
				}
				else
				{
					moreViewsHTML+="<div id='imageBox_3' class='imageBox'>";
				}
				/*
				Note: 2008 Oct 08
				la siguiente línea es necesaria para el atributo "alt de las imágenes pequeñas"
				*/
				altAttribute = altAttribute+1;
				//add images in views div
				moreViewsHTML+="<a href='javascript:moreViews.rotateToFirst(\""+currentIndex+"\");'>";
				moreViewsHTML+="<img id='loading_image_"+currentIndex+"' class='elementVisible' src='../../site_files/FiftyFlowers/ff_images/mozilla_blu.gif' />";
				moreViewsHTML+="<img id='thumbnail_image_"+currentIndex+"' src='"+this.thumbnail_arr[currentIndex]+"' class='elementHidden' width='54' height='54' />";
				//alt='"+this.setAltAttribute(this.thumbnail_arr[currentIndex])+"'
				this.alt[currentIndex] = this.setAltAttribute(this.thumbnail_arr[currentIndex]);
				
				moreViewsHTML+="</a>";
				moreViewsHTML+="</div>";
				
				
				
				if(rowImages == true)
					moreViewsHTML+="</div>";

						
				//increment currentIndex to show the next element if the array
				 currentIndex++;				
				 j++;
				 if(currentIndex==this.thumbnail_arr.length)
					currentIndex=0;
					
					
				
			};
			
			moreViewsHTML+="</div>";//close rowImages
			if(this.thumbnail_arr.length > 8)
			{
				superIndex++;
				moreViewsHTML+="<div class='moreImagesText'>More Images: "+superIndex+"/"+this.thumbnail_arr.length+" <a href='javascript:moreViews.rotateOneImage();'>>></a></div>";
			}
			
			moreViewsHTML+="</div>";//close views
		}			
		
		moreViewsHTML+="<div id='moreViewsBar'>";	
		
		moreViewsHTML+="<div><a href='"+this.site_url+"/custom.php?name=Email a Friend&amp;id="+this.product_id+"&amp;url="+this.product_url+"' class='emailFriend'>Email</a></div>";
		moreViewsHTML+="<div><a href='javascript:window.print();' class='print'>Print</a></div>";
        //moreViewsHTML += "<div><a href='"+this.site_url+"/cart_login.php?action="+base64_encode("wishlist")+"&amp;p="+base64_encode(this.product_id)+"&amp;c="+base64_encode(this.category_id)+"'><div class='wishlist'></div>Add to Wish List</a></div>";
        moreViewsHTML+= "<div><form method='post' id='wishListForm' name='wishListForm' action='"+this.secureUrl+"/cart_login.php'><input type='hidden' name='wsh_product_id' value='"+base64_encode(this.product_id)+"' /><input type='hidden' name='wsh_category_id' value='"+base64_encode(this.category_id)+"' /><input type='hidden' name='destination' value='wishlist' /><input type='hidden' name='destination_action' value='addToWishlist' /><a href='#' onclick='javascript:moreViews.submitWishListForm(); return false;'><div class='wishlist'></div>Add To Wish List</a></form></div>";
		//Note: 2008 Oct 02 Social book marking
		//moreViewsHTML+="<div id='socialBookmarking'><a href='http://www.addthis.com/bookmark.php' onMouseOver='return addthis_open(this, \"\", \"[URL]\", \"[TITLE]\")' onMouseOut='addthis_close()' onClick='return addthis_sendto()'><img src='../../site_files/FiftyFlowers/ff_images/button1-share.gif' width='125' height='16' border='0' alt='' /></a></div>"; 

		moreViewsHTML+="</div>";
		//Now we palce the HTML contebt inside "moreViews" div.
		this.moreViews.innerHTML = moreViewsHTML;
		
		currentIndex = count;
		var extraImagesLoaded = YAHOO.util.Selector.query('div.rowImages img.elementHidden','leftColumn');
		//var loadingImagesLoaded = YAHOO.util.Selector.query('div.rowImages img.elementVisible','leftColumn');
	
	
		/*
		Note: 2009 Jan 21
		This section was created to add loading gif before the images appear.
		*/
		var loadingImage = "";
		var setImage = "";
		var alt = "";
		var stepDuration = 150;


		for(k=0; k<extraImagesLoaded.length; k++)
		{

			loadingImage = "loading_image_"+currentIndex;
			setImage = "thumbnail_image_"+currentIndex;
			alt = this.alt[currentIndex];
			this.waitForImage(loadingImage, setImage, alt, stepDuration);
			currentIndex++;
			if(currentIndex==this.thumbnail_arr.length)
					currentIndex=0;
		}
		this.placeAsMainImage("0");
	}

	this.addColorImages = function(primary_arr, medium_arr, thumbnail_arr)
	{
		
		this.primary_arr=primary_arr.split(",");
		this.medium_arr=medium_arr.split(",");
		this.thumbnail_arr=thumbnail_arr.split(",");
		//eliminate the last element of the array because this is blank
		this.primary_arr.pop();
		this.medium_arr.pop();
		this.thumbnail_arr.pop();
		//call main function
		this.placeImages(0);
	}

	this.init=function(primary_arr, medium_arr, thumbnail_arr, site_url, product_id, product_url, product_name,category_id)
	{
		//Initialize variables
		this.firstIndex=0;
		this.site_url = site_url;
		this.secureUrl = "https://"+location.hostname;
		this.product_id =  product_id;
		this.product_url = product_url;
		this.product_name = product_name;
        this.category_id = category_id;
		
		this.alt = new Array();
		//this.flag = true;
		
		//alert(primary_arr+", "+medium_arr+", "+thumbnail_arr);
		//split by "," each array 
		this.primary_arr=primary_arr.split(",");
		this.medium_arr=medium_arr.split(",");
		this.thumbnail_arr=thumbnail_arr.split(",");
		//eliminate the last element of the array because this is blank
		this.primary_arr.pop();
		this.medium_arr.pop();
		this.thumbnail_arr.pop();
		//get moreViews Div
		this.moreViews = YAHOO.util.Dom.get('moreViews');
		//get mainPictureDiv
		this.mainPicture = YAHOO.util.Dom.get('mainPicture');
		this.showMainPicture = YAHOO.util.Dom.get('showMainPicture');
		/*
		Note: 2009 Jan 27
		Its neccesary to add this class for show correctly the style of the guarantee_fresh box.
		*/
		var guarantee_fresh = YAHOO.util.Dom.get('guarantee_fresh');
		if(guarantee_fresh)
			YAHOO.util.Dom.addClass(guarantee_fresh, 'box_left_first');
		//this.mainGroup = new YAHOO.util.ImageLoader.group(null, null,1);
		this.placeImages(0);
	}
    
    this.submitWishListForm = function()
	{
		var myForm = document.getElementById("wishListForm");
		if(myForm)
		{
			myForm.submit();
		}
	}

}
/*********************************************************************************************/	

var setItemIdBackup=function(p_oEvent)
{
	try{
		YAHOO.util.Dom.get('item_id_backup').value = this.get("checkedButton").get("value");
		//alert(this.get("checkedButton").get("value"));
		//document.getElementById("item_id_backup").value = this.get("value");
		
	}
	catch(error)
	{
		//alert(""+document.getElementById("item_id_backup").value);	
	}
}
/*
Note: initContainerRight, 2008 jan 31
This function will be triggered when "container_right" is completely loaded.

It makes some initial actions and bind some functions to element events. 
*/
var initContainerRight=function()
{
	/**************** Initializations ***************/
	this.displayBulletOptions = new YAHOO.widget.ButtonGroup("displayBulletOptions");	
	var itemPictureAs=YAHOO.util.Selector.query('div.item div.itemPicture a','container_right');
	var itemPictureTopAs=YAHOO.util.Selector.query('div.item div.itemPictureTop a','container_right');
	var productNames=YAHOO.util.Selector.query('div.item ul li a.productName','container_right');
	var viewAll_links=YAHOO.util.Selector.query('div.item ul li a.viewAll','container_right');
	//To handle the mouse over and mouse out events for "viewAll" links.
	YAHOO.util.Dom.addClass(itemPictureAs, 'itemPictureAOut');
	YAHOO.util.Dom.addClass(itemPictureTopAs, 'itemPictureTopAOut');
	YAHOO.util.Dom.addClass(productNames, 'productNameOut');
	YAHOO.util.Dom.addClass(viewAll_links, 'viewAllOut');
	//alert("length: "+itemPictureAs.length);
	/*************** Delegate events ***************/		
	var items=YAHOO.util.Selector.query('div.item','container_right');
	var l=items.length;
	for(i=0;i<l;i++)
	{
		/*
			Note: addListener, 2008 jan 31
			This method needs 3 parameters: element that will trigger the event, the event name, the function. Moreover,
			you can send an object like an extra parameter to be pass to the function that handles the event.
		*/
		YAHOO.util.Event.addListener(items[i], 'mouseover', item_mouseover, items[i]);
		YAHOO.util.Event.addListener(items[i], 'mouseout', item_mouseout, items[i]);
	}		
	/*************** Delegate events ***************/		
	var items=YAHOO.util.Selector.query('div.item','container_right');
	this.displayBulletOptions.on("click",setItemIdBackup);
}
/*
	Note: item_mouseover, 2008 jan 31
	This function handles the mouseover event for ".item" elements
*/
var item_mouseover=function(e, el)
{
	var itemPictureA=YAHOO.util.Selector.query('div.itemPicture a',el);
	var itemPictureTopA=YAHOO.util.Selector.query('div.itemPictureTop a',el);
	var productName=YAHOO.util.Selector.query('ul li a.productName',el);
	var viewAll=YAHOO.util.Selector.query('ul li a.viewAll',el);
	YAHOO.util.Dom.replaceClass(itemPictureA, 'itemPictureAOut', 'itemPictureAOver');
	YAHOO.util.Dom.replaceClass(itemPictureTopA, 'itemPictureTopAOut', 'itemPictureTopAOver');
	YAHOO.util.Dom.replaceClass(productName, 'productNameOut', 'productNameOver');
	YAHOO.util.Dom.replaceClass(viewAll, 'viewAllOut', 'viewAllOver');
}
/*
	Note: item_mouseover, 2008 jan 31
	This function handles the mouseout event for ".item" elements
*/
var item_mouseout=function(e, el)
{
	var itemPictureA=YAHOO.util.Selector.query('div.itemPicture a',el);
	var itemPictureTopA=YAHOO.util.Selector.query('div.itemPictureTop a',el);
	var productName=YAHOO.util.Selector.query('ul li a.productName',el);
	var viewAll=YAHOO.util.Selector.query('ul li a.viewAll',el);
	YAHOO.util.Dom.replaceClass(itemPictureA, 'itemPictureAOver', 'itemPictureAOut');
	YAHOO.util.Dom.replaceClass(itemPictureTopA, 'itemPictureTopAOver', 'itemPictureTopAOut');		
	YAHOO.util.Dom.replaceClass(productName, 'productNameOver', 'productNameOut');
	YAHOO.util.Dom.replaceClass(viewAll, 'viewAllOver', 'viewAllOut');
}

/****************************************************************
ColorPicker Class
****************************************************************/
var ColorPicker = function()
{
	//Initialize variables
	this.processorUrl =	null;

	this.getAllItemsImage_success = function(return_object)
	{
		var data = [];
		try {
			data = YAHOO.lang.JSON.parse(return_object.responseText);
		}
		catch(x) {
			alert(x);
			return;
		}
		
		var result = "";
		if(data["thumbnail_image"].length > 0)
		{
			var thumbnailElements = YAHOO.util.Selector.query('div.thumbnail',"prod_detail");
			for(i=0;i<thumbnailElements.length;i++)
			{
				/*
				Note: 2009 Jan 02
				Change the size of the images
					Before:
						width='75' height='75'	
				*/
				//alert(i+": "+data["thumbnail_image"][i]+" - Type of: "+ typeof(data["thumbnail_image"][i]));
				/*
				Note: Jan 13 2009
				Code added to get the proper alt info
				*/
				
				if(typeof(data["thumbnail_image"][i]) != "undefined" && data["thumbnail_image"][i] != "")
					YAHOO.util.Dom.get(thumbnailElements[i]).innerHTML = "<img src='http://www.fiftyflowers.com/site_files/FiftyFlowers/Image/Product/"+escape(data["thumbnail_image"][i])+"' alt='" + this.getOneItemImage_getAlt(data["thumbnail_image"][i]) + "' width='54' height='54' />";
				else
					YAHOO.util.Dom.get(thumbnailElements[i]).innerHTML = "<img src='http://www.fiftyflowers.com/site_files/FiftyFlowers/Image/Product/no_image_thumbnail.jpg' alt='' width='54' height='54' />";
			}
			//get and set hiddenItemColorOptions
			var hiddenElements = YAHOO.util.Selector.query('input.hiddenItemColorOptions',"prod_detail");
			//var j=hidden.length;
			for(j=0;j<hiddenElements.length;j++)
			{
				YAHOO.util.Dom.get(hiddenElements[j].id).value = data["item_color_option_id"][j];
			}
			
		}
	}
	
	this.getAllItemsImage_failure = function()
	{
		alert("Fail getItemImages");	
	}

	this.getAllItemsImage = function(product_id, color_id)
	{
			
		var callBack=
		{
			success: this.getAllItemsImage_success,
			failure: this.getAllItemsImage_failure,
			scope: this
		};
		var postData = "action=getAllItemsImage&product_id="+product_id+"&color_id="+color_id;
		YAHOO.util.Connect.asyncRequest('POST', this.processorUrl, callBack, postData);	
		
	}

	
	this.getSelectProductColor = function(htmlObject, product_id, color_id, color_name, allValues)
	{
		//alert(htmlObject.id);
		var colorPickerProductPanel = "colorPickerProduct_pnl_"+product_id;
		var items = YAHOO.util.Selector.query('div.colorPickerRow a.colorPickerProductLink',colorPickerProductPanel);
		//var l=items.length;
		for(i=0;i<items.length;i++)
		{
			YAHOO.util.Dom.removeClass(items[i].id, 'colorSelected');
		}
		YAHOO.util.Dom.addClass(htmlObject.id, 'colorSelected');
		
		var spanColorSelected = YAHOO.util.Dom.get("availableColorsSelected_"+product_id);
		if(spanColorSelected)
		{
			spanColorSelected.innerHTML= color_name;
		}
		
		
		
		//get and set availableColorsSelected
		var spanElements = YAHOO.util.Selector.query('span.availableColorsSelected',"prod_detail");
		//var k=spanElements.length;
		for(k=0;k<spanElements.length;k++)
		{
			YAHOO.util.Dom.get(spanElements[k].id).innerHTML = color_name;
		}
		
		//get and add class colorPickerLink
		var aElements = YAHOO.util.Selector.query('a.colorPickerLink',"prod_detail");
		//var l=aElements.length;
		var element = "";
		var color = "";
		for(l=0;l<aElements.length;l++)
		{
			YAHOO.util.Dom.removeClass(aElements[l].id, 'colorSelected');
			//the id of a element
			element = aElements[l].id;
			/*
				The name of the elements has this name: colorPickerLink_$item_id_$color_id, the last
				postion after "_" is the color. We needd that to compare with color_id selected on the
				product's color picker.
			*/
			color = element.substring(element.lastIndexOf('_')+1);
			if( color == color_id)
				YAHOO.util.Dom.addClass(aElements[l].id, 'colorSelected');
		}
		
		//call function to set all images
		this.getAllItemsImage(product_id, color_id);
		
	}
	
	/*
	Note: Jan 13 2009
	This function returns the name of the image for the alt property with the extension, underscores and hyphens removed
	*/
	
	this.getOneItemImage_getAlt = function(data_string)
	{
		var alt_string = new String();
		
		alt_string = data_string;
		alt_string = alt_string.replace(/_/g," ");
		alt_string = alt_string.replace(/-/g," ");
		alt_string = alt_string.replace(/.jpg/g,"");
		alt_string = alt_string.replace(/'/g,"&acute;");

return alt_string;
	}

	this.getOneItemImage_success = function(return_object)
	{
		var data = [];
		try {
			data = YAHOO.lang.JSON.parse(return_object.responseText);
		}
		catch(x) {
			alert(x);
			return;
		}
		
		var result = "";
		if(data["thumbnail_image"].length > 0)
		{
			/*
			Note: 2009 Jan 02
			Change the size of the images
				Before:
					width='75' height='75'	
			*/
			/*
			Note: Jan 13 2009
			Code added to get the proper alt info
			*/
			if(data["thumbnail_image"][0] != "")
				YAHOO.util.Dom.get("thumbnail_"+return_object.argument.item_id).innerHTML = "<img src='http://www.fiftyflowers.com/site_files/FiftyFlowers/Image/Product/"+escape(data["thumbnail_image"][0])+"' alt='" + this.getOneItemImage_getAlt(data["thumbnail_image"][0]) + "' width='54' height='54' />";
			else
				YAHOO.util.Dom.get("thumbnail_"+return_object.argument.item_id).innerHTML = "<img src='http://www.fiftyflowers.com/site_files/FiftyFlowers/Image/Product/no_image_thumbnail.jpg' alt='' width='54' height='54' />";
		}
	}
	
	this.getOneItemImage_failure = function()
	{
		alert("Fail getItemImage");	
	}

	this.getOneItemImage = function(item_id, color_id)
	{
		var args = {
				item_id: item_id
		};
		
		var callBack=
		{
			success: this.getOneItemImage_success,
			failure: this.getOneItemImage_failure,
			scope: this,
			argument: args
		};
		var postData = "action=getOneItemImage&item_id="+item_id+"&color_id="+color_id;
		YAHOO.util.Connect.asyncRequest('POST', this.processorUrl, callBack, postData);	
	}

	this.getSelectedColor = function(htmlObject, item_id, color_id, color_name, item_color_option_id)
	{
		var colorPickerPanel = "colorPicker_pnl_"+item_id;
		var items=YAHOO.util.Selector.query('div.colorPickerRow a.colorPickerLink',colorPickerPanel);
		var l=items.length;
		for(i=0;i<l;i++)
		{
			YAHOO.util.Dom.removeClass(items[i].id, 'colorSelected');
		}
		YAHOO.util.Dom.addClass(htmlObject.id, 'colorSelected');
		var hiddenColorSelected = YAHOO.util.Dom.get("item_color_options_"+item_id);
		var spanColorSelected = YAHOO.util.Dom.get("availableColorsSelected_"+item_id);
		if(hiddenColorSelected)
		{
			hiddenColorSelected.value = item_color_option_id;
			spanColorSelected.innerHTML= color_name;
			//call function to set all images
			this.getOneItemImage(item_id, color_id);
		}
	}
	
	this.showCollectionSizeBox = function(htmlElement)
	{
		//alert(htmlElement.id);
		//this.collectionSizeBox.setHeader("Collection Size Box"); 
		//this.collectionSizeBox.setBody("<h2>Wedding Flowers in a Box - Packaging and Shipping Details</h2><div><p>The diagram below represents the configuration of a single shipping box and how many pieces fit into it. There are LARGE holes, MEDIUM holes, and SMALL holes. The number of each piece you can order depends on the package you have selected. For example, the 20 package is two shipping boxes stacked together, and so on.</p><div><span>10 Package:</span><span>3 Large</span><span>1 Medium</span><span>6 Small</span></div><div><span>20 Package:</span><span>6 Large</span><span>2 Medium</span><span>12 Small</span></div><div><span>30 Package:</span><span>9 Large</span><span>3 Medium</span><span>18 Small</span></div><div><span>40 Package:</span><span>12 Large</span><span>4 Medium</span><span>24 Small</span></div><div><span>6 Package:</span><span>6 Piece</span><div><span>3 Package Bridal:</span><span>1 Large</span><span>2 Small</span></div></div>");
		//this.collectionSizeBox.setFooter("End of Collection Size"); 
		//this.collectionSizeBox.render(document.body);
		this.collectionSizeBox.show();
	}
	
	this.init = function()
	{
		this.processorUrl =	"../../model/cart_product_detail_wfc_MDL.php";
		
		this.collectionSizeBox = new YAHOO.widget.Panel("collectionSizeBox_pnl", {
															width:"510px",
															height:"432px",
															//context:["show_collection_size","tl","bl"],
															fixedcenter:true,
															//constraintoviewport: true,
															close:true, 
															visible:false,
															draggable:true
															
														});	
		this.collectionSizeBox.render();
		
		/*
		this.colorPickerPopUp = new YAHOO.widget.Panel("coloPicker_pnl", {
															width:"150px",
															//height:"20px",
															//constraintoviewport: true,
															//autofillheight: "body",
															//context:["coloPicker_pnl","tl","bl", ["beforeShow", "windowResize"],
															close:true, 
															visible:false,
															draggable:false
															
														});	
		this.colorPickerPopUp.render(document.body);
		*/
	
	}
	
}

//Copied on August 4th 2010
function base64_encode (data)
{
    // http://kevin.vanzonneveld.net
    // +   original by: Tyler Akins (http://rumkin.com)
    // +   improved by: Bayron Guevara
    // +   improved by: Thunder.m
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Pellentesque Malesuada
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // -    depends on: utf8_encode
    // *     example 1: base64_encode('Kevin van Zonneveld');
    // *     returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='

    // mozilla has this native
    // - but breaks in 2.0.0.12!
    //if (typeof this.window['atob'] == 'function') {
    //    return atob(data);
    //}
        
    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var o1, o2, o3, h1, h2, h3, h4, bits, i = 0, ac = 0, enc="", tmp_arr = [];

    if (!data) {
        return data;
    }

    //data = this.utf8_encode(data+'');
    data = utf8_encode(data+'');
    
    do { // pack three octets into four hexets
        o1 = data.charCodeAt(i++);
        o2 = data.charCodeAt(i++);
        o3 = data.charCodeAt(i++);

        bits = o1<<16 | o2<<8 | o3;

        h1 = bits>>18 & 0x3f;
        h2 = bits>>12 & 0x3f;
        h3 = bits>>6 & 0x3f;
        h4 = bits & 0x3f;

        // use hexets to index into b64, and append result to encoded string
        tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
    } while (i < data.length);
    
    enc = tmp_arr.join('');
    
    switch (data.length % 3) {
        case 1:
            enc = enc.slice(0, -2) + '==';
        break;
        case 2:
            enc = enc.slice(0, -1) + '=';
        break;
    }

    return enc;
}

function utf8_encode ( argString ) {
    // http://kevin.vanzonneveld.net
    // +   original by: Webtoolkit.info (http://www.webtoolkit.info/)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: sowberry
    // +    tweaked by: Jack
    // +   bugfixed by: Onno Marsman
    // +   improved by: Yves Sucaet
    // +   bugfixed by: Onno Marsman
    // +   bugfixed by: Ulrich
    // *     example 1: utf8_encode('Kevin van Zonneveld');
    // *     returns 1: 'Kevin van Zonneveld'

    var string = (argString+''); // .replace(/\r\n/g, "\n").replace(/\r/g, "\n");

    var utftext = "";
    var start, end;
    var stringl = 0;

    start = end = 0;
    stringl = string.length;
    for (var n = 0; n < stringl; n++) {
        var c1 = string.charCodeAt(n);
        var enc = null;

        if (c1 < 128) {
            end++;
        } else if (c1 > 127 && c1 < 2048) {
            enc = String.fromCharCode((c1 >> 6) | 192) + String.fromCharCode((c1 & 63) | 128);
        } else {
            enc = String.fromCharCode((c1 >> 12) | 224) + String.fromCharCode(((c1 >> 6) & 63) | 128) + String.fromCharCode((c1 & 63) | 128);
        }
        if (enc !== null) {
            if (end > start) {
                utftext += string.substring(start, end);
            }
            utftext += enc;
            start = end = n+1;
        }
    }

    if (end > start) {
        utftext += string.substring(start, string.length);
    }

    return utftext;
}