/* Browse page Javascript */

Event.observe(window,'load',function(){	
	/* Code to be run when the page loads */
	csSaveURL();
});

/* QuickLook Code 09-03-08 */

	/* QuickLook Code */
	var ProdId = '';
	var QuickLookBUTTONXPOS = 10;
	var QuickLookBUTTONYPOS = 120;

	var QuickLook = Class.create();
	Object.extend(QuickLook.prototype,{

	initialize: function(){	
		// Initialization
		QuickLook.ItemID = '0';
		QuickLook.oneSizeOnly = false;
     },
	
	load : function ()
	{
		var pid = ProdId;
		// Hide the zoom window before opening a new QuickLook
		$('QuickLookWindowLarge').style.display = 'none';
		$('QuickLookProductImage').src = "http://images.surffanatics.com/partners/surf/misc/blank250x250.gif";
		//  AJAX call to get individual product data for display in QuickLook
		var newRequest = new Ajax.Request('/' + pid + '/product.ashx',
		{
			method:'get', 
            onSuccess: function(transport){ QuickLook.loadData(transport);
				},     
            onFailure: function(){ 
			 QuickLook.loadData('failed');
                } 
		} );
	},
	
	loadData : function (transport)
	{
		// transport = 'fuck it';
		// Don't open the window if we don't get an AJAX response.
		if ( transport != 'failed' )
		{
			ProductData = transport.responseText;
			// alert(ProductData);
			// ProductData = "231816[splitter]Roxy Balboa Brown Juniors Sandal[splitter]Step up your game with these cute Balboa flip flops by Roxy with a mid-height wedge!<br /><ul><li>Wider poly web upper</li><li>Poly-web toe post</li><li>Mid-height EVA wedge</li><li>Contoured dual density insole</li><li>Rubberlon outsole</li><li>Imported</li></ul>[splitter]Roxy[splitter]Clearance[splitter]$29.00[splitter]$29.00[splitter]$29.00[splitter]/_231000/FF_231816_l.jpg[splitter]/_231000/FF_231816_xl.jpg[splitter][section]687320[splitter]6[splitter]true[splitter]687321[splitter]7[splitter]true[splitter]687322[splitter]8[splitter]true[splitter]687323[splitter]9[splitter]true[splitter]687324[splitter]10[splitter]true[splitter][section]/_231000/altImages/FF_231816ALT1_xl.jpg[splitter]/_231000/altImages/FF_231816ALT2_xl.jpg[splitter]/_231000/altImages/FF_231816ALT3_xl.jpg[splitter]/_231000/altImages/FF_231816ALT4_xl.jpg[splitter]/_231000/altImages/FF_231816ALT5_xl.jpg[splitter]/_231000/altImages/FF_231816ALT6_xl.jpg[splitter]";
		}
		else
		{
			alert('Error: Connection could not be made to server.');
			ProductData = "192691[splitter]Smith Optics Polarized Shelter Black-Gray Sunglasses[splitter]With the large frame and sleek design of these Shelter polarized shades by Smith Optics, your eyes will be well-protected in style!<br /><ul><li>100% UVA & UVB Protection</li><li>Polarized lenses achieve 99% efficiency in blocking polarized light waves, providing exceptional glare reduction while maintaining excellent optical clarity</li><li>Large fit/large coverage</li><li>Grilamid TR90 frame</li><li>Megol nose pads</li><li>Carbonic TLT lenses</li><li>8 Base lens curvature</li><li>Comes packaged in a Smith Optics sock that doubles as a cleaning cloth</li><li>Finely crafted in Italy</li><li>Frame measures 61-20-132</li></ul>[splitter]Smith Optics[splitter]$119.00[splitter]/_192000/FF_192691_l.jpg[splitter]/_192000/FF_192691_xl.jpg[splitter][section]485572[splitter]NOSIZE[splitter]true[splitter][section]/_192000/altImages/FF_192691ALT1_xl.jpg[splitter]/_192000/altImages/FF_192691ALT2_xl.jpg[splitter]/_192000/altImages/FF_192691ALT3_xl.jpg[splitter]/_192000/altImages/FF_192691ALT4_xl.jpg[splitter]/_192000/altImages/FF_192691ALT5_xl.jpg[splitter]/_192000/altImages/FF_192691ALT6_xl.jpg[splitter]/_192000/altImages/FF_192691ALT7_xl.jpg[splitter]";
			transport = 'shit!';
		}
		// transport = 'bleh';
		// ProductData = "231816[splitter]Roxy Balboa Brown Juniors Sandal[splitter]Step up your game with these cute Balboa flip flops by Roxy with a mid-height wedge!<br /><ul><li>Wider poly web upper</li><li>Poly-web toe post</li><li>Mid-height EVA wedge</li><li>Contoured dual density insole</li><li>Rubberlon outsole</li><li>Imported</li></ul>[splitter]Roxy[splitter]Clearance[splitter]$29.00[splitter]$29.00[splitter]$29.00[splitter]/_231000/FF_231816_l.jpg[splitter]/_231000/FF_231816_xl.jpg[splitter][section]687320[splitter]6[splitter]true[splitter]687310[splitter]XL[splitter]true[splitter]687321[splitter]7[splitter]true[splitter]687308[splitter]S[splitter]true[splitter]687302[splitter]L/XL[splitter]true[splitter]687322[splitter]8[splitter]true[splitter]687323[splitter]9[splitter]true[splitter]687324[splitter]7 1/4[splitter]true[splitter][section]/_231000/altImages/FF_231816ALT1_xl.jpg[splitter]/_231000/altImages/FF_231816ALT2_xl.jpg[splitter]/_231000/altImages/FF_231816ALT3_xl.jpg[splitter]/_231000/altImages/FF_231816ALT4_xl.jpg[splitter]/_231000/altImages/FF_231816ALT5_xl.jpg[splitter]/_231000/altImages/FF_231816ALT6_xl.jpg[splitter]";
		// Make sure no item is selected.
		QuickLook.ItemID = 0;
		if ( transport != 'failed' )
		{
			var ThreePieces = ProductData.split('[section]');
			// alert(ThreePieces[0]);
			var Data = ThreePieces[0].split('[splitter]');
			var Sizes = ThreePieces[1].split('[splitter]');
			var AltImages = ThreePieces[2].split('[splitter]');
			
			// Trim the extra empty element of the end.
			Data = Data.splice(0, Data.length - 1);
			Sizes = Sizes.splice(0, Sizes.length - 1);
			AltImages = AltImages.splice(0, AltImages.length - 1);
			
			// Load up the item data
			// $('QuickLookWindowTitle').update(Data[1]);
			$('QuickLookBuyTitle').update(Data[1]);
			$('QuickLookDetailsTitle').update(Data[1]);
			$('QuickLookWingowLargeTitle').update(Data[1]);
			$('QuickLookDetailsDescription').update(Data[2]);
			// Data[4] = "Clearance";
			var priceContainerClass = 'ql' + Data[4] + 'PriceContainer';
			$('qlPriceContainerBuy').className = priceContainerClass;
			$('qlPriceContainerDetails').className = priceContainerClass;
			$('regularPriceTargetSize').update(Data[5]);
			$('salePriceTargetSize').update(Data[6]);
			$('clearancePriceTargetSize').update(Data[7]);
			$('regularPriceTargetDetails').update(Data[5]);
			$('salePriceTargetDetails').update(Data[6]);
			$('clearancePriceTargetDetails').update(Data[7]);
			

			// $('QuickLookSizePrice').update(Data[4]);
			// $('QuickLookViewPrice').update(Data[4]);
			$('QuickLookProductImage').src = 'http://images.surffanatics.com/productimages' + Data[8];
			$('QuickLookWindowLargeImage').src = 'http://images.surffanatics.com/productimages' + Data[9];
			
			// Build Sizes
			lenSizes = Sizes.length;
			var SizeOutput = '';
			for ( x=0; x<lenSizes; x=x+3 )
			{
				if ( ( Sizes[x+2] == 'true' ) || ( Sizes[x+2] == 'True' ) )
				{
					SizeStatus = 'optsInStock';
				}
				else
				{
					SizeStatus = 'optsOOStock';
				}
				SizeOutput = SizeOutput + '<div class="' + SizeStatus + '" onclick="QuickLook.UpdateSize(this,' + Sizes[x] + ",'" + Sizes[x+1] + "')" + ';" onmouseover="setHoverState(this);" onmouseout="revertHoverState(this);"><span>' + Sizes[x+1] + '</span></div>\n';
			}
			QuickLook.oneSizeOnly = false;
			if ( lenSizes < 4 )
			{			
				QuickLook.oneSizeOnly = true;
				QuickLook.ItemID = Sizes[0];

			}
			SizeOutput = SizeOutput + '<div id="sizeClear">&nbsp;</div>';
			$('optionsWrapper').update(SizeOutput);
			
			// Build thumbs pane
			lenThumbs = AltImages.length;
			if ( lenThumbs === 0 )
			{
				// Hide thumbs business
				$('QuickLookImageThumbViews').update('<span style="display: none;">No Thumbs</span>');
				$('QuickLookImageThumbViews').style.display = "none";
			}
			else
			{
				var ThumbOutput1 = '';
				var ThumbOutput2 = '';
				for ( x=0; x<lenThumbs; x++ )
				{
					ThumbOutput1 = ThumbOutput1 + '<div class="QuickLookImageThumbView"><img alt="' + Data[1] + '" src="http://images.surffanatics.com/productimages' + AltImages[x] + '" /></div>\n';
					ThumbOutput2 = ThumbOutput2 + '<div class="productImageThumbView"><img alt="' + Data[1] + '" src="http://images.surffanatics.com/productimages' + AltImages[x] + '" /></div>\n';
				}
				$('QuickLookImageThumbViews').update(ThumbOutput1);
				$('productImageThumbViews').update(ThumbOutput2);
				$('QuickLookImageThumbViews').style.display = "block";
			}
			
			
			// disable the add to bag button.
			$('addToBagBtn').src = "http://images.surffanatics.com/partners/surf/quicklook/add_disabled.jpg";
			// If it's a one-size item, change size functionality if so..
			QuickLook.CheckSizes();
			// Hide the check inventory box in case it's showing..
			$('QuickLookInventoryCheck').style.display = "none";
			// Hide the size note in case it's showing.
			$('QuickLookNoSize').style.display = "none";
			// Add hover effect to thumbs
			QuickLook.SetHoverImages();
			// Make sure the size tab is always the one showing when the box opens.
			QuickLook.swapTab('QuickLookBuyContentContainer','QuickLookDetailsContentContainer')
			// Set the Quantity to 1.
			$('options').value = '1';
			$('prdCSOption').update('');
			// Show box
			QuickLook.show('QuickLook','QuickLookWindowNew');
			// track that AJAX request
			var prodName = Data[1].replace(/ /g, '_');
			var host = String(window.location.host).split('.')[0];
			if ( String(window.location.host).split('.')[0] == 'www' )
			{
				var trackAjaxURL = '/' + prodName + '/' + Data[0] + '/quicklook';
				// pageTracker._trackPageview(trackAjaxURL);
			}
		}
	},
	
	show: function(srcElm, elmName)
	{
		var ci = $(elmName);
		if ( ci.style.display === '' )
		{
			ci.style.display = 'none';
		}
		// fancy Appear effect
		
		var newAppear = new Effect.Appear(elmName, {duration:0.7});
		// set positioning of box
		var computeBox = QuickLook.calcBox(elmName);
		var top = computeBox[0];
		var left = computeBox[1];
		var topPx = top + 'px';
		var leftPx = left + 'px';
		$(ci).setStyle({'top' : topPx, 'left' : leftPx});
		// QuickLook.CheckSizes(oneSizeOnly);
	},
	
	hide: function(elmName) {
		// Hide the box.
		var newFade = new Effect.Fade(elmName, {duration:0.7});
	},
	
	calcBox : function(elmName) {

		var box = $(elmName);
		var luckyNumbers = [];
		var boxWidth = box.getWidth();
		var boxHeight = box.getHeight();
		var windowWidth = document.viewport.getWidth();
		var windowHeight = document.viewport.getHeight();
		var offsets = document.viewport.getScrollOffsets();
		var frameOffset = Position.cumulativeOffset($('surfFrame'));
		luckyNumbers[0] = ( ( windowHeight - boxHeight ) / 2 ) + offsets[1] - frameOffset[1];
		luckyNumbers[1] = ( ( windowWidth - boxWidth ) / 2 ) + offsets[0] - frameOffset[0];
		if ( boxHeight > windowHeight )
		{
			luckyNumbers[0] = offsets[1];
		}
		// -18 is for the scroll bar width
		if ( boxWidth > windowWidth )
		{
			luckyNumbers[1] = windowWidth - boxWidth - 18 + offsets[0];
		}
		return luckyNumbers;
	},
	
	showQuickLookBtn : function(targetImg, QuickLookDiv) {
	 	// handle the quicklook button
		var handles = $$('div.quickLookHandle');
		var qlHandle = handles[0];
		// Position the check it button relatice to the image it will float over.
		var pos = Position.cumulativeOffset($(targetImg));
		var offset = Position.cumulativeOffset($('surfFrame'));
		// Each check it button provides us with the Product ID.
		// alert(handle);
		// handle.id = 'wtf';
		// alert(handle.id);
		ProdId = targetImg.replace(/prodImg/, '');
		var id = targetImg.replace(/Img/, 'QLB');
		// qlHandle.id = id;
		
		// handle.id = 'wtf2';
		// alert((qlHandle.id);
		qlHandle.writeAttribute('id', id);
		// alert(handle.id);
		qlHandle.setStyle({'top' : pos[1] - offset[1] + QuickLookBUTTONYPOS + 'px', 'left' : pos[0] - offset[0] + QuickLookBUTTONXPOS + 'px'});
		qlHandle.show();
	},	  	

	hideQuickLookBtn : function(e,QuickLookDiv) {
		if(e) {
			var ele = e.target || e.fromElement;
			Position.cumulativeOffset(ele);
			Element.getDimensions(ele);
			if(Position.within(ele, Event.pointerX(e), Event.pointerY(e)))
			{
				return;
			}
		}
		var handles = $$('div.quickLookHandle');
		var qlHandle = handles[0];
		qlHandle.hide();
	},	  	

	setBtnImgSrc: function (id, src) {	
		// Button hover effects
		var ciImg = $(id);
		ciImg.src = src;
	},
	  
	swapTab : function (show, hide) {
		// This function will display the contents of the different tabs and change the appearance of the tabs.
		// show is the id of the new tab we want to show.
		$(hide).style.display = 'none';
		$(show).style.display = 'block';
		var newHeight = $(show).getHeight() + 15;
		// alert(newHeight);
		if ( newHeight < 315 )
		{
			newHeight = 315;
		}
		new Effect.Morph('QuickLookWindowRightContainer', { style: { minHeight: newHeight + 'px' }, duration: 0.3 } );
		var hideTab = hide.replace(/ContentContainer/, "Tab");
		$(hideTab).extend;
		$(hideTab).removeClassName('enabled');
		$(hideTab).addClassName('disabled');
		var showTab = show.replace(/ContentContainer/, "Tab");
		$(showTab).extend;
		$(showTab).removeClassName('disabled');
		$(showTab).addClassName('enabled');
		$('QuickLookNoSize').style.display = "none";
		
	},
	
	UpdateSize : function (obj, selectedID, selsize)
	{
		//Clear sizes
		var sizeElements = $('optionsWrapper').childElements();
		var curSize = Element.extend(obj);
		
		//  When selecting a size, this will highlight that size and put it's text above it.
		if (!curSize.hasClassName('optsOOStock'))
		{
			for (i=0;i<sizeElements.length;i++)
			{ 
				var size = Element.extend(sizeElements[i]);
				size.removeClassName('optsSelected');
			}
			if (curSize.hasClassName('optsInStock'))
			{
				curSize.removeClassName('optsInStock');
			}
			if (curSize.hasClassName('optsOOStock'))
			{
				curSize.removeClassName('optsOOStock');
			}
			curSize.addClassName('optsSelected');
			$('addToBagBtn').src = "http://images.surffanatics.com/partners/surf/quicklook/add.jpg";
			if(document.all){
				$('prdCSOption').innerText = selsize;
			} else{
				$('prdCSOption').textContent = selsize;
			}
			QuickLook.ItemID = selectedID;
			$('QuickLookNoSize').style.display = "none";
		}
	},
	
	AddToCart : function (style)
	{
		// Basic check to see if a size is selected, calls inventory check.
		if (QuickLook.ItemID == 0)
		{
			// QuickLook.swapTab('QuickLookSizeContent','QuickLookOverviewContent');
			$('QuickLookNoSize').style.display = "block";
			// alert('Please select a size.');
		}
		else
		{
			var qty = $('options').value;	
			QuickLook.CheckInventory(qty, style);
		}
	},

	
	CheckInventory : function (qty, style)
	{
		// AJAX call to determine if the quantity reqested is more that we have. Displays user notification.
		$('QuickLookInventoryCheck').style.display = "block";
		var ran_number=Math.floor(Math.random()*10000);
		
		var newRequest = new Ajax.Request('/' + QuickLook.ItemID + '/' + qty + '/' + ran_number + '/inventory.ashx',   
		{ 
			method:'get', 
			onSuccess: function(transport){ QuickLook.RefreshQty(transport, qty, style); },     
			onFailure: function(){ 
				//alert('Something went wrong...  ' ) ;
				}   
				
		} ); 
		
		// transport = 1;
		// QuickLook.RefreshQty(transport, qty);
	},
	
	RefreshQty : function (transport, qty, style)
	{
	 	// AJAX response for inventory query.
		var bQtyIsValid = false;
		var qtyLeft = transport.responseText;
		// alert(qtyLeft);
		if ( qtyLeft > -1 )
		{
		 	if ( qtyLeft == 0 )
			{
		 		var message = "We apologize, but that item is currently out of stock.";
				alert(message);
			}
			else
			{
				var message = "We apologize, but we only have " + qtyLeft + " of that particular product and size in stock.";
				alert(message); 
				$('options').value = qtyLeft;
			}
		}
		else
		{
			bQtyIsValid = true;
		}
		$('QuickLookInventoryCheck').style.display = "none";
		if (bQtyIsValid)
		{
		 	// old non-minibag style
			// var newURL = window.location.protocol + "//" + window.location.host + "/car/add/item/" + QuickLook.ItemID + "/qty/" + qty;
			// window.location.replace(newURL);
			// We have enough product, add quantity to cart
			QuickLook.hide('QuickLookWindowNew');
			MBag.addMinibag(QuickLook.ItemID, qty, style)
			
			// MBag.addToBag(QuickLook.ItemID, qty, style);
		}
	},
	
	CheckSizes : function() {
		// Check to see if only one size is available.  If so, hide that one size display one-size statement, click that size behind the scenes.
		// if ($('optionsWrapper').childElements().length == 1)
		// alert(oneSizeOnly);
		if ( QuickLook.oneSizeOnly )
		{
			$('MultiSizeWrapper').style.display = "none";
			$('OneSizeWrapper').style.display = "block";
			// QuickLook.ClickControl($('optionsWrapper').childElements()[0]);
			QuickLook.OneSizeCheck();
		}
		else
		{
			$('MultiSizeWrapper').style.display = "block";
			$('OneSizeWrapper').style.display = "none";
		}
	},
	
	ClickControl : function(obj)
	{
		// Clicking the size.
		var fireOnThis = obj;
		if( document.createEvent ) {
 			var evObj = document.createEvent('MouseEvents');
  			evObj.initEvent( 'click', true, false );
			//alert("hello");
  			fireOnThis.dispatchEvent(evObj);
		} 
		else if( document.createEventObject ) 
		{
  			fireOnThis.fireEvent('onclick');
		}
	},
	
	OneSizeCheck : function()
	{
	 	// alert('oneSizeCheck');
		$('addToBagBtn').src = "http://images.surffanatics.com/partners/surf/quicklook/add.jpg";
		var sizesListed = $('optionsWrapper').childElements();
		var oneSizeOption = sizesListed[0];
		var sizeOnClick = oneSizeOption.readAttribute('onclick');
		var sizePieces = sizeOnClick.split(',');
		// alert(sizePieces[1]);
		// alert(sizeOnClick);
		// alert(sizePieces[1]);
		// QuickLook.ItemID = sizePieces[1];
		$('QuickLookNoSize').style.display = "none";
	},
	
	SetHoverImages : function ()
	{
		var detailImage = $('QuickLookWindowLargeImage');
		var viewImageElements = $$('div.productImageThumbView');
		for (var i = 0; i < viewImageElements.length; i++) {
			viewImageElements[i].onmouseover = function() {
				var thumb = this.getElementsByTagName("img")[0];
				if (detailImage) {
					detailImage.src = thumb.src.replace(/\_tb\./, "_xl.");
				}
			};
		}
		var detailImage2 = $('QuickLookProductImage');
		var viewImageElements2 = $$('div.QuickLookImageThumbView');
		for (var i = 0; i < viewImageElements2.length; i++) {
			viewImageElements2[i].onmouseover = function() {
				var thumb2 = this.getElementsByTagName("img")[0];
				if (detailImage2) {
					detailImage2.src = thumb2.src.replace(/\_tb\./, "_xl.");
				}
			};
		}
		
	}


	});
	
	QuickLook = new QuickLook();
	/*End QuickLook code */

function hideFilterCheck()
{
 	var filterCount = $('browseFilterWrapper').childElements().length;
	if ( filterCount == 0 )
	{
		$('browseFilterTarget').style.display = "none";
	}
}
// Minibag JS 04/06/09
var miniBag = Class.create();
Object.extend(miniBag.prototype,{
	initialize : function()
	{	
		// Length of time it takes in seconds to scroll to the top and start the show
		this.scrollDuration = .1;
		// Width in pixels of the HTML container because IE can't seem to measure it.
		this.containerWidth = 313;
		// Length of time in seconds for the minibag to slide down.
		this.minibagAppearDuration = .75;
		// Length of time in seconds for the minibag to fade away
		this.minibagFadeDuration = 1.0;
		// Length of time in seconds before the minibag closes on it's own.
		this.minibagCloseTimer = 10;
		// Switch - Whether or not the minibag fades away after X seconds. fade = true
		this.minibagCloseTimerSwitch = true;

		this.style = 'browse';
		// Non-variable variables
		this.disappearTimeout = null;
		this.closeFunction = 'MBag.closeMinibag()';
		this.showFunction = 'MBag.showMinibag()';
		this.showCartFunction = 'MBag.showCartItems()';
	},
	
	addMinibag : function(prodId, qty, style)
	{
	 	if ( qty != 0 )
		{
			this.style = style;

			// make ajax call to add item
			var newRequest = new Ajax.Request('/' + prodId + '/' + qty + '/minibag.ashx',
			{
				method:'get', 
					onSuccess: function(transport){
						MBag.loadData(transport); },     
					onFailure: function(){ 
						MBag.loadData('failed'); } 
			} );
			
			// MBag.loadData('failed');
		}	
	},
	
	loadData : function(transport)
	{
		// process ajax response
		if ( transport != 'failed' )
		{
			// successful ajax request
			bagData = transport.responseText;
			// alert(bagData);
		}
		else
		{
			// failed ajax request
			// Example Good data
			// bagData = "success[splitter]5[splitter]$102.00[~split~]Hurley Natural One & Only Echo Premium T-shirt[splitter]/_191000/FF_191180_s.jpg[splitter]Hurley_Natural_One_&_Only_Echo_Premium_T-shirt[splitter]M[splitter]1[splitter]$22.00[splitter]191180[splitter]491355[~itemsplit~]Hurley Brown One & Only T-Shirt[splitter]/_190000/FF_190314_s.jpg[splitter]Hurley_Brown_One_&_Only_T-Shirt[splitter]L[splitter]1[splitter]$20.00[splitter]190314[splitter]491337[~itemsplit~]O'Neill Military Symphony Slim Fit T-shirt[splitter]/_200000/FF_200505_s.jpg[splitter]O'Neill_Military_Symphony_Slim_Fit_T-shirt[splitter]M[splitter]1[splitter]$20.00[splitter]200505[splitter]556370[~itemsplit~]O'Neill Military Symphony Slim Fit T-shirt[splitter]/_200000/FF_200505_s.jpg[splitter]O'Neill_Military_Symphony_Slim_Fit_T-shirt[splitter]L[splitter]1[splitter]$20.00[splitter]200505[splitter]556371[~itemsplit~]Rip Curl White Degenerate T-shirt[splitter]/_201000/FF_201780_s.jpg[splitter]Rip_Curl_White_Degenerate_T-shirt[splitter]M[splitter]1[splitter]$20.00[splitter]201780[splitter]501500[~itemsplit~]";
			bagData = "fail[splitter]Something didn't work.";
			// success[splitter]3[splitter]$117.00[~split~]Hurley Navy Blue Captain EO T-shirt[splitter]/_190000/FF_190046_s.jpg[splitter]Hurley_Navy_Blue_Captain_EO_T-shirt[splitter]L[splitter]1[splitter]$20.00[splitter]190046[splitter]491346[~itemsplit~]Gift Certificate[splitter]/_0/FF_-1_s.jpg[splitter]Gift_Certificate[splitter][splitter]1[splitter]$75.00[splitter]-1[splitter]-1[~itemsplit~]Hurley Natural One & Only Echo Premium T-shirt[splitter]/_191000/FF_191180_s.jpg[splitter]Hurley_Natural_One_&_Only_Echo_Premium_T-shirt[splitter]M[splitter]1[splitter]$22.00[splitter]191180[splitter]491355[~itemsplit~]
			// success[splitter]6[splitter]$237.00[~split~]
			// Hurley Navy Blue Captain EO T-shirt[splitter]/_190000/FF_190046_s.jpg[splitter]Hurley_Navy_Blue_Captain_EO_T-shirt[splitter]L[splitter]1[splitter]$20.00[splitter]190046[splitter]491346[~itemsplit~]Gift Certificate[splitter]/_0/FF_-1_s.jpg[splitter]Gift_Certificate[splitter][splitter]1[splitter]$75.00[splitter]-1[splitter]-1[~itemsplit~]Hurley Natural One & Only Echo Premium T-shirt[splitter]/_191000/FF_191180_s.jpg[splitter]Hurley_Natural_One_&_Only_Echo_Premium_T-shirt[splitter]M[splitter]1[splitter]$22.00[splitter]191180[splitter]491355[~itemsplit~]Gift Certificate[splitter]/_0/FF_-1_s.jpg[splitter]Gift_Certificate[splitter][splitter]1[splitter]$50.00[splitter]-1[splitter]-1[~itemsplit~]Gift Card[splitter]/_0/FF_-2_s.jpg[splitter]Gift_Card[splitter][splitter]1[splitter]$50.00[splitter]-2[splitter]-2[~itemsplit~]Hurley Brown One & Only T-Shirt[splitter]/_190000/FF_190314_s.jpg[splitter]Hurley_Brown_One_&_Only_T-Shirt[splitter]L[splitter]1[splitter]$20.00[splitter]190314[splitter]491337[~itemsplit~]
			transport = 'blah';
		}
		
		if ( transport != 'failed' )
		{
			// successful ajax request
			var bagPieces = bagData.split('[~split~]');
			var bagInfo = bagPieces[0];
			var bagInfoPieces = bagInfo.split('[splitter]');
			var addStatus = bagInfoPieces[0];
			if ( addStatus == 'success' )
			{
				// Add to bag was successful
				var cartItemCount = bagInfoPieces[1];
				var cartTotal = bagInfoPieces[2];
				var itemData = bagPieces[1];
				var itemPieces = itemData.split('[~itemsplit~]');
				var displayCount = itemPieces.length - 1;
				var itemArray = new Array();
				for ( var i = 0; i < displayCount; i++ )
				{
					itemArray[i] = itemPieces[i].split('[splitter]');
				}
				// itemArray[] becomes a multi-dimensional array of item data. Ex: itemArray[1][3] is the size of the second item
				// First, update cart specific info
				$('cartCountTotal').update(cartItemCount);
				$('minibagHeaderCartCountTotal').update(cartItemCount);
				$('cartAmountTotal').update(cartTotal);
				$('minibagHeaderCartAmountTotal').update(cartTotal);
				$('minibagCartTotal').update(cartTotal);
				// Second, build HTML for item display
				// Example Cart Item
				// <div class="minibagItem">
				// 	<img src="http://images.surffanatics.com/productimages/_189000/FF_189536_s.jpg" width="59" />
				// 	<div class="minibagItemDetails">
				// 		<div class="minibagItemTitle">
				// 			<a href="">Hurley Purple Heather One & Only Premium Fit T-shirt</a>
				// 		</div>
				// 		<div class="minibagItemBottomRow">
				// 			<div class="minibagItemSize">
				// 				Size:&nbsp;<span class="value">9/10</span>
				// 			</div>
				// 			<div class="minibagItemQty">
				// 				Qty:&nbsp;<span class="value">99</span>
				// 			</div>
				// 			<div class="minibagItemTotal">
				// 				Total:&nbsp;<span class="value">$200.00</span>
				// 			</div>
				// 		</div>
				// 	</div>
				// </div>
				// OR
				// <div class="minibagItem"><img src="http://images.surffanatics.com/productimages/_189000/FF_189536_s.jpg" width="59" /><div class="minibagItemDetails"><div class="minibagItemTitle"><a href="">Hurley Purple Heather One & Only Premium Fit T-shirt</a></div><div class="minibagItemBottomRow"><div class="minibagItemSize">Size:&nbsp;<span class="value">9/10</span></div><div class="minibagItemQty">Qty:&nbsp;<span class="value">99</span></div><div class="minibagItemTotal">Total:&nbsp;<span class="value">$200.00</span></div></div></div></div>
				var itemHTML = this.buildItemHTML(itemArray,displayCount);

				// Write itemHTML to itemContainer
				$('minibagItemsContainer').update(itemHTML);
				this.delayMinibag();
				// Start a timer to hide the minibag in X number of seconds
				if ( this.minibagCloseTimerSwitch )
				{
					var time = this.scrollDuration + this.minibagAppearDuration + this.minibagCloseTimer * 1000;
					var funct = this.closeFunction;
					this.disappearTimeout = setTimeout(funct, time);
				}
			}
			else
			{
				// Add to bag failed
				var failMessage = bagInfoPieces[1];
				alert('We were not able to add this item to your shopping cart. Please contact customer service.');
				// alert(failMessage);
			}
		}
	},
	
	delayMinibag : function()
	{
		// scroll to the top
		new Effect.ScrollTo('surfTopTag', {
			duration:  this.scrollDuration
		});
		// show the minibag after we scroll
		var time = this.scrollDuration * 1000;
		var funct = this.showFunction;
		setTimeout(funct, time);
	},
	
	showMinibag : function()
	{
		// Calculate height and width for overlay
		var bodyWidth = $('body').getWidth();
		var scrollHeight = $('body').getHeight();
		// Show overlay (It's invisible)
		$('minibagOverlay').setStyle({
			display: 'block',
			width: bodyWidth + 'px',
			height: scrollHeight + 'px'
		});
		// Find out how tall the minibag is while full of stuff
		$('minibagOutsideContainer').setStyle({
			height: 'auto',
			display: 'block'
		});
		$('minibagMovementTarget').setStyle({
			position: 'static'
		});
		var height = $('minibagOutsideContainer').getHeight();
		$('minibagOutsideContainer').setStyle({
			display: 'none'
		});
		// Hide the minibag contents above the minibag frame
		$('minibagMovementTarget').setStyle({
			position: 'absolute',
			top: '-' + height + 'px',
			left: '0px',
			zindex: '200'
		});
		
		// Find out exactly where the minibag frame should be
		var offsets = $('surfFrame').cumulativeOffset();
		var topOffSet = offsets[1];
		var leftOffSet = offsets[0] + $('surfFrame').getWidth() - this.containerWidth - 2;

		// Show the minibag frame (It's invisible too!)
		$('minibagOutsideContainer').setStyle({
			display: 'block',
			top: topOffSet + 'px',
			left: leftOffSet + 'px',
			opacity: '1.0',
			height: height + 'px'
		});
		// Slide the minibag contents into the minibag frame from above
		new Effect.Morph('minibagMovementTarget', {
			style: {
				top: '0px'
			}, 
			duration: this.minibagAppearDuration
		});
		//  Show the cart and checkout buttons that we hid earlier.
		var funct = this.showCartFunction;
		var time = this.minibagAppearDuration * 1000;
		// setTimeout(funct, time);
	},
	
	showCartItems : function()
	{
		new Effect.Appear('headerCartContainer', {
			duration: this.cartItemAppearDuration
		});
		$('headerCartContainer').setStyle({
			'z-index': '400'
		});
		
	},
	/*
			Hurley Navy Blue Captain EO T-shirt[splitter]/_190000/FF_190046_s.jpg[splitter]Hurley_Navy_Blue_Captain_EO_T-shirt[splitter]L[splitter]1[splitter]$20.00[splitter]190046[splitter]491346[~itemsplit~]
			Gift Certificate[splitter]/_0/FF_-1_s.jpg[splitter]Gift_Certificate[splitter][splitter]1[splitter]$75.00[splitter]-1[splitter]-1[~itemsplit~]
			Hurley Natural One & Only Echo Premium T-shirt[splitter]/_191000/FF_191180_s.jpg[splitter]Hurley_Natural_One_&_Only_Echo_Premium_T-shirt[splitter]M[splitter]1[splitter]$22.00[splitter]191180[splitter]491355[~itemsplit~]
			Gift Certificate[splitter]/_0/FF_-1_s.jpg[splitter]Gift_Certificate[splitter][splitter]1[splitter]$50.00[splitter]-1[splitter]-1[~itemsplit~]
			Gift Card[splitter]/_0/FF_-2_s.jpg[splitter]Gift_Card[splitter][splitter]1[splitter]$50.00[splitter]-2[splitter]-2[~itemsplit~]
			Hurley Brown One & Only T-Shirt[splitter]/_190000/FF_190314_s.jpg[splitter]Hurley_Brown_One_&_Only_T-Shirt[splitter]L[splitter]1[splitter]$20.00[splitter]190314[splitter]491337[~itemsplit~]
	*/
	buildItemHTML : function(items,count)
	{
	 	// Build the HTML content for the minibag display. Make modifications to the output to pretty
		// up no size items and gift cards.
		var html = '';
		for  ( var i = 0; i < count; i++ )
		{
			if ( ( items[i][3] == 'NOSIZE' ) || ( items[i][3] == '' ) )
				items[i][3] = '-';
			if ( items[i][1] == '/_0/FF_-1_s.jpg' )
			{
			 	// Item is a gift Certificate
			 	html += '<div class="minibagItem"><a href="/gift_certificate"><img src="http://images.surffanatics.com/partners/surf/gift_cards/GC_cart_productImage.gif" width="59" /></a><div class="minibagItemDetails"><div class="minibagItemTitle"><a href="/gift_certificate">' + items[i][0]  + '</a></div><div class="minibagItemBottomRow"><div class="minibagItemSize">Size:&nbsp;<span class="value">' + items[i][3]  + '</span></div><div class="minibagItemQty">Qty:&nbsp;<span class="value">' + items[i][4]  + '</span></div><div class="minibagItemTotal">Total:&nbsp;<span class="value">' + items[i][5]  + '</span></div></div></div></div>';
			}
			else if ( items[i][1] == '/_0/FF_-2_s.jpg' )
			{
			 	// item is a gift card
			 	var cardAmount = items[i][5];
				cardAmount = parseInt(cardAmount.replace(/\$/,''));
				html += '<div class="minibagItem"><a href="/gift_card"><img src="http://images.surffanatics.com/partners/surf/gift_cards/SF_giftcard_' + cardAmount + '_xs.jpg" width="59" /></a><div class="minibagItemDetails"><div class="minibagItemTitle"><a href="/gift_card">' + items[i][0]  + '</a></div><div class="minibagItemBottomRow"><div class="minibagItemSize">Size:&nbsp;<span class="value">' + items[i][3]  + '</span></div><div class="minibagItemQty">Qty:&nbsp;<span class="value">' + items[i][4]  + '</span></div><div class="minibagItemTotal">Total:&nbsp;<span class="value">' + items[i][5]  + '</span></div></div></div></div>';
			}
			else
			{
				html += '<div class="minibagItem"><a href="/cat/pro/' + items[i][2]  + '"><img src="http://images.surffanatics.com/productimages/' + items[i][1]  + '" width="59" /></a><div class="minibagItemDetails"><div class="minibagItemTitle"><a href="/cat/pro/' + items[i][2]  + '">' + items[i][0]  + '</a></div><div class="minibagItemBottomRow"><div class="minibagItemSize">Size:&nbsp;<span class="value">' + items[i][3]  + '</span></div><div class="minibagItemQty">Qty:&nbsp;<span class="value">' + items[i][4]  + '</span></div><div class="minibagItemTotal">Total:&nbsp;<span class="value">' + items[i][5]  + '</span></div></div></div></div>';
			}
		}	 
	 	return html;
	},
	
	closeMinibag : function()
	{
		clearTimeout(this.disappearTimeout);
		$('minibagOverlay').setStyle({
			display: 'none',
			width: '0px',
			height: '0px'
		});
		Effect.Fade('minibagOutsideContainer', { duration: this.minibagFadeDuration });
		$('minibagMovementTarget').setStyle({
			top: '0px'
		});
	}
});
MBag = new miniBag();