/**************************************************************************\
* Copyright 2006-2009 myShape Inc.                                         *
* --------------------------------------------                             *
* who to blame: Ryan Day =P                                                *
* --------------------------------------------                             *
*  This code is proprietary software; you cannot redistribute it           *
*  without the express written consent of myShape Inc.                     *
\**************************************************************************/

if(!myshape){
	var myshape = {}
};

if(!myshape.gadgets) {
	myshape.gadgets = {};
}

//lazyload constructor
myshape.lazyload = function(htmlServer,ajaxData,totalChunks,resultContainerSelector,nodeSelector){
	if(typeof(this.init) !== 'function'){//functional instantation
		return new this(htmlServer,ajaxData,totalChunks,resultContainerSelector);
	} else {//standard instantiation
		this.totalChunks = totalChunks || 0;
		this.htmlServer = htmlServer || '';
		this.ajaxData = ajaxData || {};
		this.selector = resultContainerSelector;//wherre you want the results to go
		this.nodeSelector = nodeSelector;//a selector that will match only result nodes
		this.init();
	}
};

//lazyload prototype
myshape.lazyload.prototype = {
	chunks:1,//we assume the first page of results has been loaded by default
	loadedChunks:[],
	chunkHeight:0,
	totalChunks:0,
	isLoading:0,
	perChunk:0,
	selector:false,
	nodeSelector:false,
	htmlServer:false,
	ajaxData:{},
	loadBeforeCollision:800,
	init:function(){
		var z = this;
		if(z.selector && $(z.selector).length && z.htmlServer){
			var holder = $(z.selector)[0];
			//get height of first chunk
			z.chunkHeight = $(holder).height();
			//create all chunk containers

			var chunk_template =$(document.createElement('div')).addClass('chunk').addClass('clearfix').height(z.chunkHeight)[0];
			/*add first chunk
				- clone chunk template
				- remove and append each style to chunk template
				- append chunk template to browse
				- remove height from the added template as a filled template should not have a hardset height
				- foreach not loaded chunk add a template clone to the container along with chunk id
			*/

			var first_chunk = $(chunk_template).clone().attr('data-chunkid',0)[0];

			//console.log($(holder).children(),holder.childNodes);
			$(holder).children().each(function(){
				$(first_chunk).append($(this).remove());
			});

			$(holder).append(first_chunk);

			var i = 1;
			while(i < z.totalChunks){
				$(chunk_template).clone().attr('data-chunkid',i).appendTo(holder);
				i++;
			}

			z.calculateChunks(holder);

			//check browse history for last chunk viewed before leaving
			//window.scroll(0,0);

			$(window).scroll(function(){
				//tag the currently visible chunk
				z.loadMoreResults();
			});

			return true;
		}
		return false;
	},
	loadMoreResults:function fn(){
		if(!fn.hit)fn.hit=0;
		var z = this;
		if(this.totalChunks > this.chunks){
			var i = (++fn.hit);
			setTimeout(function(){
				if(i == fn.hit){
					var toLoad = z.getChunksInView();
					z.queueRequests(toLoad);
				}
			},300);
		}
	},
	queue:[],
	queuedIds:{},
	queueRequests:function(requests){
		//NOTE REQUESTS MUST BE IN LOWEST TO HIGHEST PRIORITY SORT
		
		if(requests.length){
			while(requests.length){
				var ch = requests.shift();
				if(!this.queuedIds[ch.id]){
					this.queuedIds[ch.id] =1;
					this.queue.unshift(ch);//add new chunks to the beginning
					//TODO make sure this can splice off too many pending chunks and remove their loaded flag
				} else {
					//TODO splice out this key from the pending and unshift it
				}
			}
			this.executeRequest();//kick it off if its not already
		}
	},
	executeRequest:function fn(){
		if(!fn.executing && this.queue.length){
			
			var toLoad = this.queue.shift();			
			var z = this;
			fn.executing = true;
			$.post(z.htmlServer, $.extend({'chunk-id':toLoad.id+1},z.ajaxData), function(html){
				$(toLoad.chunk).html(html);
				z.chunkLoaded(toLoad.chunk);

				fn.executing = false;
				delete z.queuedIds[toLoad.id];//cleanup

				z.executeRequest();//keep processing queue if needed
			}, 'html');
		}
	},
	getChunksInView:function(){
		var z = this;
		var window_top = $(window).scrollTop();
		var window_bottom = $(window).height()+window_top;

		//find the current chunk/s in view

		var toLoad = [];

		$.each(z.loadedChunks,function(k,v){
			if(!v.loaded){
				
				window_bottom_p = window_top + z.loadBeforeCollision;
				window_top_p = window_top - z.loadBeforeCollision;
				
				if(window_bottom_p < chunk_top){
					return false;//break
				}
				
				var chunk_top = v.top;
				var chunk_bottom = chunk_top+z.chunkHeight;
				var show = 0;

				//if the chunk is sticking into the window from the bottom
				// and the bottom of the chunk is not above the window
				if(chunk_top < window_bottom_p && chunk_bottom > window_top_p){
					show = 1;
				}
				
				if(show){
					v.loaded = 1;
					var chunk = $(".chunk").eq(k)[0];
					z.addLoadingImages(chunk);
					
					var win_h = $(window).height();

					var diff = chunk_bottom-window_top;
					if(diff > win_h){
						diff = window_bottom-chunk_bottom;
					}
					
					var diff_t = window_bottom-chunk_top;
					if(diff_t > win_h){
						diff_t = chunk_top-window_top;
					}
					
					diff = (diff*100)/win_h;
					
					diff_t = (diff_t*100)/win_h;
					
					toLoad.push($.extend({chunk:chunk,id:k,d:diff>diff_t?diff:diff_t},v));
				}
			}
		});
		if(toLoad.length){
			toLoad.sort(function(a,b){
				return a.d-b.d;
			});
			
			//var c_chunk = toLoad[toLoad.length-1];
			//var h = myshape.getGadget('viewHistory');
			//h.setBrowseChunk(c_chunk.chunk,$(window).scrollTop());
		}
		return toLoad;
	},
	calculateChunks:function(holder){
		var i = 0;
		var z = this;
		$(holder).find('.chunk').each(function(){
			var data = z.loadedChunks[i] || {};
			if($(this).children().length){
				data.loaded = 1;
			}
			data.top = $(this).top();
			
			z.loadedChunks[i] = data;
			i++;
		});
	},
	addLoadingImages:function(chunk){
		var imageHeight = 320;
		var numImages = Math.floor(this.chunkHeight/imageHeight);
		var img = $(myshape.util.loadingImageBig()).css({display:'block'})[0];

		while(numImages > 0){
			$(chunk).append($(img).clone());
			numImages--;
		}
	},
	chunkLoaded:function(chunk){
		var chunk_id = $(chunk).dataset('chunkid');
		if(chunk_id){
			var top = $(chunk).css({height:''}).top();
			this.loadedChunks[chunk_id].loaded = 1;
			this.loadedChunks[chunk_id].top = top;
			this.chunks++;
		}
	},
	saveChunk:function(){
	
	},
	checkClearHistory:function(){
	
	}
};

/*************************
* gadgetTalkDebug
*	this listens to all gadget speak and logs it to the console
*/


myshape.gadgets.gadgetTalkDebug = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.gadgetTalkDebug();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.gadgetTalkDebug.prototype = {
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
		this.listen('*',function(el,key,data){ z.hearGadget(el,key,data)});
	},
	hearGadget:function(el,key,data){
		$(el).log('gadget talked: '+key);
	}
};
/**************************/

myshape.gadgets.textRoll= function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.textRoll();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.textRoll.prototype = {
	rollInterval:2,
	hovered:0,
	animating:0,
	init:function(){
		this.rollHoverable();
		this.startRoll();
	},
	rollHoverable:function(){
		var z = this;
		$(".text-roll-gadget").liveHover(function(){
			z.hovered = 1;
		},
		function(){
			z.hovered = 0;
			z.startRoll();
		});
	},
	startRoll:function(){
		var z = this;
		if($(".text-roll-gadget > div").length > 1 && !this.hovered && !this.animating){
			this.animating = 1;
			$(".text-roll-gadget div").eq(0).animate({height:'0px'},1000,function(){
				var el = this;
				$(el).parent().append(this);
				$(el).css("height","");
				setTimeout(function(){
					z.animating = 0;
					//i do not clear animating untill after the delay otherwise hover outs durring the delay will cause more animating loops
					z.startRoll();
				},z.rollInterval*1000);
			});
		}
	}

};

/**************************
* Live chat link gadget
*
*/
myshape.gadgets.liveChat = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.liveChat();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.liveChat.prototype = {
	gadgetSelector:".live-chat-link",
	init:function(){
		this.inherit = myshape.gadget.inherit;
		this.inherit(myshape.gadget);
		this.clickable();
	},
	clickable:function(){
		var z = this;
		$(z.gadgetSelector).live('click',function(){
			z.doState(this,'click');
			return false;
		});
	},
	states:{
		click:function(el,oldState){
			lpButtonCTTUrl = 'https:/'+'/server.iad.liveperson.net/hc/91480167/?cmd=file&file=visitorWantsToChat&site=91480167&imageUrl=https:/'+'/www.myshape.com/images/main/static/liveperson&referrer='+escape(document.location);
			try{
				lpButtonCTTUrl = (typeof(lpAppendVisitorCookies) != 'undefined' ? lpAppendVisitorCookies(lpButtonCTTUrl) : lpButtonCTTUrl);
			} catch (e){}

			window.open(lpButtonCTTUrl,'chat91480167','width=472,height=320,resizable=yes');

			return false;
		}
	}
};

/*************************
* bag gadget
*
*/
myshape.gadgets.bag = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.bag();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.bag.prototype = {
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);

		z.hoverable();
		z.itemsRemoveable();
		z.bagUpdateable();

		this.counterValue = z.getCounterValue();
	},
	gadgetSelector:".my-bag-dropdown",
	counter:".my-bag-counter-value",
	counterValue:0,
	lastCounterValue:0,//the counter value at the last time the drop down was rendered
	conterText:'',
	dropDownSelector:".my-bag-dropper, #myBag",
	bagData:false,
	dropDown:false,
	lastCount:false,
	clickProxy:false,
	changeCounter:0,//this counts how many changes have been made in the drop down
	updateCounter:function(val){
		$(this.counter).html(val);
		this.counterValue = +(val);
	},
	getCounterValue:function(){
		if(this.counter && $(this.counter).length){
			return +(($(this.counter).html() ||''));
		} 
		return "";
	},
	getCounter:function(){
		return $(this.counter);
	},
	hoverable:function(){
		var z = this;
		var popHovered = false;
		var buttonHovered = false;
		$(this.dropDownSelector).liveHover(function(ev){
			buttonHovered = true;
		},function(ev){

			buttonHovered = false;
			if(!popHovered && !myshape.debug.popLocked){
				z.closeDropDown();
			}

		},{on:0,off:200}).live('click',function(){
			if(!z.dropDown){
				var appearUnder = this;//$(this).parent()[0];
				z.openDropDown(appearUnder);
			} else {
				z.closeDropDown();
			}
			return false;
		});

		$(".my-bag-dropdown").liveHover(function(ev){
			popHovered = true;
		},function(ev){
			popHovered = false;
			if(!buttonHovered && !myshape.debug.popLocked){
				z.closeDropDown();
			}
		},{on:0,off:1200});

		$(document).click(function(){
			if(!buttonHovered && !popHovered){
				z.closeDropDown();
			}
		});
	},
	bagUpdateable:function(){
		var z = this;
		$(".my-bag-update-link").live('click',function fn(){
			if(!fn.loading){
				if(z.changeCounter && z.dropDown){
					//get removed
					var remove = [];
					$(z.dropDown).find(".my-bag-item-remove:checked").each(function(){
						var item = $(this).parents(".my-bag-item");
						remove.push($(item).attr('key'));
					});

					//get quantity changes
					var quantity = {};
					$(z.dropDown).find(".my-bag-item-quantity.changed").each(function(){
						var item = $(this).parents(".my-bag-item");
						quantity[$(item).attr('key')] = $(this).val();
					});

					//send this sukka off
					fn.loading = true;
					myshape.ajax.updateBagContents(remove,quantity,function(data){
						if(z.dropDown){
							z.changeCounter = 0;
							z.valueUnchanged();
							fn.loading = false;
							z.updateCounter(data.count);
							z.reloadNodes($(z.dropDown).find('.my-bag-contents')[0],data);
						}
					});
				}
			}
			return false;
		});
	},
	itemsRemoveable:function(){
		var z = this;
		$(".my-bag-contents .my-bag-item-remove").live('click',function(){
			var item = $(this).parents(".my-bag-item");
			if($(this).is(":checked")){
				z.valueChanged();
				$(item).find(".my-bag-item-remove-flag").show();
				$(item).find(".my-bag-item-image").addClass('opacity-50');
			} else {
				z.valueUnchanged();
				$(item).find(".my-bag-item-remove-flag").hide();
				$(item).find(".my-bag-item-image").removeClass('opacity-50');
			}
		});
	},
	states:{
		closed:function(el){
			return true;
		},
		opened:function(el){
			return true;
		}
	},
	openDropDown:function(under){
		var z = this;
		if(z.dropDown) z.closeDropDown(true);

		z.dropDown = z.dropDownTemplate();
		contents = $(z.dropDown).find(".my-bag-contents")[0];
		$(contents).html(myshape.util.loadingImage());

		var dims = $(under).getDims();
		var winDims = $(window).getDims();
		var left = dims.x-(200<dims.w?dims.w-200:200-dims.w);

		if(left < 0) left = 0;
		if(left+200 > winDims.w) left -= (left+200)-winDims.w;

		setTimeout(function(){
			$(z.dropDown).appendTo("body").left(left).top(dims.y+dims.h);
			var h = $(z.dropDown).height();
			$(z.dropDown).height(0);
			$(z.dropDown).animate({height:h+'px'},'fast',function(){
				$(z.dropDown).css('height','');
			});

			z.getContents(function(data){
				if(z.dropDown){
					$(z.contents).css({'overflow-y':'scroll'});
					z.reloadNodes(contents,data);
					$(z.dropDown).find(".my-bag-subtotal").html('$'+myshape.util.money(data.subtotal));
				}
			});
		},0);

		/*this.clickProxy = $.overlayClickProxy(function(){
			z.closeDropDown();
		})[0];*/
	},
	closeDropDown:function(now){
		if(!this.dropDown) return;

		if(this.clickProxy){
			$(this.clickProxy).remove();
			this.clickProxy = false;
		}

		if(now){
			$(this.dropDown).remove();
		} else {
			$(this.dropDown).animate({height:'0px'},'fast',function(){
				$(this).remove();
			});
		}

		this.dropDown = false;
	},
	getContents:function(cb){
		var z = this;
		if(!z.bagData || z.lastCounterValue != z.counterValue){
			z.lastCounterValue = z.counterValue;
			myshape.ajax.getBagContents(function(data){
				z.bagData = data;
				cb(data);
			});
		} else {
			cb(this.bagData);
		}
	},
	reloadNodes:function(el,data){
		this.changeCounter = 0;
		if(data.contents && !data.contents.length){
			$(el).html(this.emptyBagMessageTemplate());
		} else {
			$(el).html('');
			$(this.getNode(el)).find(".my-bag-checkout-link").show();
			this.buildNodes(el,data);
		}
	},
	buildNodes:function(el,data){
		var z = this;
		$.each(data.contents,function(k,v){
			var node = z.itemTemplate();
			$(node).attr('key',v.key);
			$(node).find("img.my-bag-item-image")
				.attr('src',myshape.util.imagePath('thumb',v.image))
				.attr('alt',v.name);
			$(node).find(".my-bag-item-title").html(v.name);
			$(node).find(".my-bag-item-size").html("Size: "+v.size);
			$(node).find(".my-bag-item-color").html("Color: "+v.color);
			$(node).find(".my-bag-item-styleid").html("Style ID: "+v.styleID);
			if(v.wishlistRecipient){
				$(node).find(".my-bag-wishlist-recipient").html('for <span style="color:#C87FBD;font-weight:bold;">'+v.wishlistRecipient+'</span>');
			}

			//style-popup-quick
			$(node).find("input[name=styleID]").val(v.styleID);

			$(node).find(".my-bag-item-designer").html(v.designerName);
			$(node).find(".my-bag-item-price").html('$'+myshape.util.money(v.price));
			$(node).find(".my-bag-item-quantity").val(v.quantity).attr('originalvalue',v.quantity).bind('keypress',function(){
				var el = this;
				setTimeout(function(){
					var val = $(el).val().replace(/[^0-9]/g,'');
					var orig = $(el).attr('originalvalue').replace(/[^0-9]/g,'');

					if(val != orig){
						if(!$(el).hasClass('changed')){
							$(el).addClass('changed').css({border:'1px solid orange'});
							z.valueChanged();
						}
					} else {
						$(el).removeClass('changed').css({border:''});
						z.valueUnchanged();
					}
				},10);
			});
			$(el).append(node);
		});
	},
	valueChanged:function(){
		var z = this;
		if(z.dropDown){
			if(!z.changeCounter){
				$(z.dropDown).find(".my-bag-update-link").fadeIn();
			}

			z.changeCounter++;
		}
	},
	valueUnchanged:function(){
		var z = this;
		if(z.dropDown){

			if(z.changeCounter) z.changeCounter--;

			if(!z.changeCounter){
				$(z.dropDown).find(".my-bag-update-link").fadeOut();
			}
		}
	},
	dropDownTemplate:function(){
		return $("#bag-dropdown-template .my-bag-dropdown").clone()[0];
	},
	itemTemplate:function(){
		return $("#bag-dropdown-template .my-bag-item").clone()[0];
	},
	emptyBagMessageTemplate:function(){
		return $("#bag-dropdown-template .my-bag-empty-message").clone()[0];
	}
};


myshape.gadgets.wishlister = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.bag();
	} else {
		this.init();
		return this;
	}
};
//TODO
myshape.gadgets.wishlister.prototype = {
	gadgetSelector:"a.add-wishlist",
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
	},
	clickable:function(){
		
	}
}

/********************************
style gadget

this gadget represents the product on the page
*/

myshape.gadgets.style = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.style();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.style.prototype = {
	selectorNode:".product img",
	selectorClickable:".product img, .product .product-name a",
	imageSelector:".product-image img",
	isInit:false,
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);

		z.clickable();

		z.ears();
		z.isInit = true;
	},
	clickable:function(){
		var z = this;
		var clickFn = function(){
			z.doState(this,'activated');
			$(this).removeClass('jqhover');
			return false;
		};

		$(".style-popup-quick").live('click',clickFn)
		$(this.selectorClickable).live('click',clickFn);
	},
	ears:function(){
		var z = this;
		z.listen('stylePopup.wishlister.state.added',function(el,key,data){
			var details = $(".product input[value="+data.data.styleID+"]").parents(".product").find(".product_details div:last")[0];
			if(details){
				$(details).html('<a href="/shop/wishlist"><div class="wishlist_product_view"/></a>');
			}
		});
	},
	states:{
		node:function(){},
		activated:function(el,oldState){
			el.state = 'node';//reset
			return true;
		}
	},
	//overload+extension!
	doState:function(node,state,data){

		//reset the element accociated with this state change to the container
		el = $(node).parents(".product")[0];
		if(!el){
			if($(node).hasClass('style-popup-quick')){
				el = node;
			} else {
				el = $(node).parents(".product")[0];
			}
		}
		if(el){
			data = $.extend(data,{
				styleID:this.getStyleID(el),
				wishlistID:this.getWishlistID(el),
				wishlistItemID:this.getWishlistItemID(el),
				cartString:this.getCartString(el),
				color:myshape.util.colorFromSrc($(this.getImage(el)).attr('src'))
			});
			this.parent.doState.call(this,el,state,data);
		}
	},
	getStyleID:function(el){
		var styleid =  $(el).find("input[name=styleID]").val();
		if(!styleid){
			return $(el).attr('data-styleid');
		}
		return styleid;
	},
	getWishlistID:function(el){
		return $(el).find("input[name=wishlist_id]").val() || false;
	},
	getWishlistItemID:function(){
		return $(el).find("input[name=wishlist_item_id]").val() || false;
	},
	getCartString:function(el){
		return $(el).find("input.add_to_cart_checkbox").val() || false;
	},
	/*getItemID:function(el){
		var id = false;
		var str = this.getCartString(el);
		if(str){
			var str = str.split(',');
			if(str[4] && str[4].length){
				id = str[4];
			}
		}
		return id;
	},*/
	getNext:function(el){
		return $(el).next('.product')[0];
	},
	getPrevious:function(el){
		return $(el).prev('.product')[0];
	},
	getImage:function(el){
		return $(el).find(this.imageSelector)[0];
	},
	getByStyleID:function(styleID){
		return $(".product input[value="+styleID+"]").parents(".product")[0];
	},
	//this should be an extentsion of style gadget or on its own or somthing ... doesnt fit arch
	activateQuickPops:function(){
		/*var z = this;
		var popit = function(){
			var styleID = $(this).find("input[name=styleID]").val();
			if(styleID){
				z.showPopupFromData({styleID:styleID});
			}
			return false;
		};

		$(".style-popup-quick").liveHover(popit,function(){},{on:1500});

		$(".style-popup-quick").live('click',popit);*/
	}
};


myshape.gadgets.stylePage = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.stylePage();
	} else {
		this.init();
		return this;
	}
}

myshape.gadgets.stylePage.prototype = {
	gadgetSelector:".style-page",
	thumbGadegt:false,
	colorSizePicker:false,
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
		
		this.colorSizePicker = myshape.getGadget('colorSizePicker');
		
		z.activateShareThis();
		z.zoomable();
		z.imageUnclickable();

		z.prepareThumbs();
		z.prepareMostViewed();
		z.prepareOutfits();

		
		z.activateSizePicker();
		z.ears();
		
		z.addToBaggable();

	},
	ears:function(){
		var z = this;
		z.listen('thumbCarousel.state.thumbChanged',function(el,key,data){
			if($(el).parents(z.gadgetSelector).length){
				z.manageThumbChange(el);
			}
		});
		
		z.listen('colorSizePicker.state.changed',function(el,key,data){
			var page = z.getNode(el);

			var colorSize = z.colorSizePicker.getColorSize(el);

			z.thumbGadget.clickColor(page,colorSize.color);
		});
	},
	imageUnclickable:function(){
		//do not follow link to zoom
		$(this.gadgetSelector+" .zoomable-image-gadget").live('click',function(){
			return false;
		});
	},
	zoomable:function(){

		$(this.gadgetSelector+" .zoomable-image-gadget").liveHoverZoom(function(ev,conf){
			$(conf.zoomtarget).next().hide();
			$(conf.zoomtarget).show();
		},function(ev,conf){
			$(conf.zoomtarget).hide();
			$(conf.zoomtarget).next().show();
		},{zoomtarget:this.gadgetSelector+" .style-zoom-cont",zoomloading:function(){
			return $("<div>").html(myshape.util.loadingImage()+' loading...')[0];
		}});//.removeAttr('target').removeAttr('href');
	},
	activateShareThis:function(){
		$(window).bind('load',function(){
			setTimeout(function(){
				myshape.util.shareThis.load(STYLE_JSON_DATA.styleData.shareTitle);
			},100);
		});
	},
	prepareThumbs:function(){
		var z = this;
		z.thumbGadget = myshape.getGadget('thumbCarousel');
		var tgs = z.gadgetSelector+" .thumb-gadget";
		
		var tg = $(tgs)[0];
		
		if(STYLE_JSON_DATA.styleData.thumbs.length > 4){
			$(tg).find(".next").removeClass('disabled');
		}
		
		$(tg).find(".items").css({width:''});//remove noscript width
		
		z.thumbGadget.doActivateScroll(tgs);
		
		var thumb = $(tg).find(".carousel-thumb[data-color="+STYLE_JSON_DATA.defaults.color+"]")[0];
		if(!thumb){
			$(tg).find(".carousel-thumb img").each(function(){
				if(myshape.util.baseName($(this).attr('src')) == STYLE_JSON_DATA.defaults.image){
					thumb = $(this).parents(".carousel-thumb")[0];
					return false;
				}
			});
		}

		if(thumb){
			z.thumbGadget.setActiveThumb(thumb);
		}
	},
	prepareMostViewed:function(el){
		var node = this.getNode(el);
		el = $(node).find(".members-also-considered-gadget")[0];
		if(!$(el).hasClass('activated-scroll')){
			$(el).addClass('activated-scroll');

			if($(el).find(".members-also-item").length>1) {
				$(el).find(".next").removeClass('disabled');
			}
			
			$(el).jToolsScrollable({
				size:1,
				items:".membersalso",
				api:true,
				clickable:false
			});
		}
	},
	prepareOutfits:function(el){
		var node = this.getNode(el);
		el = $(node).find(".complete-the-look-gadget")[0];
		numItems = $(el).find(".style-outfit").length;
		if(numItems > 2){
			$(el).find(".next").removeClass('disabled');
			$(el).find(".prev").removeClass('disabled');
			$(el).jToolsScrollable({
				size:2,
				items:".complete-the-look",
				api:true,
				clickable:false
			});
		}
	},
	activateSizePicker:function(){
		var n = this.getNode();
		var data = STYLE_JSON_DATA;
		var style = data.styleData;
		
		var colorpicker = this.colorSizePicker.build(n,{
			sizes:style.sizes,
			colors:style.colors,
			sizesToColors:style.sizesToColors,
			colorsToSizes:style.colorsToSizes,
			quantity:style.quantity,
			size:data.defaults.size,
			suggestedSize:data.defaults.suggestedSize,
			defaultColor:data.defaults.color,
			message:data.defaults.message,
			swatches:style.swatches
		});
		
		this.colorSizePicker.activateSelectables(n);

	},
	states:{
		node:function(){}
	},
	manageThumbChange:function(thumbElement){
		var z = this;
		//get image gadget and switch main image;
		var thumbImg = $(z.thumbGadget.getActiveThumb(thumbElement)).find('img')[0];
		
		var baseName = myshape.util.baseName($(thumbImg).attr('src'));
		
		var src = myshape.util.imagePath('large',baseName);
		var zoomSrc = myshape.util.imagePath('zoom',baseName);
		var colorID = $(thumbImg).attr('data-color');

		var node = z.getNode(thumbElement);
		
		z.colorSizePicker.doSelectColor(node,colorID);

		$(z.gadgetSelector+" .zoomable-image-gadget").dataset('zoomsrc',zoomSrc).find('img').attr('src',src);
	},
	addToBaggable:function(){
		var z = this;
		var page = $(z.gadgetSelector)[0];
		var toomanymessage = "";

		var submit = true;
		$(".style-selections form").bind("submit",function(){
			if(!submit) {
				return false;
			}
		});

		$(".add-to-bag-button").live('click',function(){
			var colorSize = z.colorSizePicker.getColorSize(page);
			var quantity = z.colorSizePicker.getQuantity(page);
			var toomany = z.enforceQuantity(quantity,page);

			//console.log('ADDTOBAG',colorSize,quantity,toomany);
			//return false;
		});

		$(".add-wishlist").live('click',function(){
			submit = false;
			var colorSize = z.colorSizePicker.getColorSize(page);
			z.addToWishlist(this,colorSize,function(){
				submit = true;
			});
			return false;
		});

	},
	enforceQuantity:function(quantity,page){
		var toomanymessage = '';
		try{
			if(STYLE_JSON_DATA.styleData.enforce_quantity){
				var maxQuantity = (+STYLE_JSON_DATA.styleData.quantity[colorSize.color+'-'+colorSize.size]) || 0;
				if(maxQuantity && (maxQuantity-quantity) < 0){
					quantity = maxQuantity;
					z.colorSizePicker.getQuantityInput(page).val(quantity || 1);
					toomanymessage = "We only have "+quantity+" item"+(quantity == 1?"":"s")+" of this style, size and color left. We have added the available item"+(quantity == 1?"":"s")+" to your bag.";
				}
			}
		}catch(e){}
		return toomanymessage;
	},
	enforceQuantityHTML:function(toomanymessage){
		toomanymessage = "<div style='color:#D7BF23;font-weight:bold;'>This item has been added to your bag</div>"+toomanymessage;
		return "<div style='background:#fff;border:1px solid #d4d4d4;padding:8px;' class='border-radius'>"+toomanymessage+"</div>";
	},
	addToBag:function fn(colorSize,quantity,toomanymessage){
		if(fn.loading) return;
		
		var styleID = STYLE_JSON_DATA.styleData.id;
		
		var completeFunction = function(data){
			fn.loading = false;

			if(data.push) data = data[0];
			$(loadingBox).hide();

			if(data.error){
				$(button).fadeBox(myshape.util.errorBox(data.error),4000,popup);
				myshape.util.googleTrack('/stylepage/bagerror1/'+styleID+'-'+colorSize.color);
			} else {
				if (data.redirectTo) {
					if(window.stopUnload)stopUnload();
					location.href = data.redirectTo;
				} else {
					if(!data.data) data.data = {};
					myshape.getGadget('bag').updateCounter(data.data.cartCount);
					var user_msg = '';
					var time = 4000;
					myshape.util.googleTrack('/stylepage/bagadd/'+styleID+'-'+colorSize.color);
					
					if(!toomanymessage.length){
						user_msg = myshape.util.successBox("This item has been added to your bag");
					} else {
						time = 6000;
						user_msg = z.enforceQuantityHTML(toomanymessage);
					}
					$(button).fadeBox(user_msg,time,popup);
				}
			}
		};

		fn.loading = true;
		
		if(!cartString.length){
			myshape.ajax.addToBag(styleID,colorSize.color,colorSize.size,quantity,completeFunction);
		} else {

			var data =  z.parseCartString(cartString);
			
			data.color = colorSize.color;
			data.size = colorSize.size;
			json = JSON.stringify(data);
			
			myshape.ajax.addManyToBag([json],function(data){
				completeFunction(data[0]?data[0]:data.data);
			});
		}
	},
	addToWishlist:function fn(button,colorSize,cb){
		if(fn.loading) return;
		var styleID = STYLE_JSON_DATA.styleData.id;
		fn.loading = true;
		var loadingBox = $(myshape.util.loadingImage()).popup({position:'top right',element:button,overlay:false})[0];
		myshape.ajax.addToWishlist(styleID,colorSize.color,colorSize.size,function(data){
			fn.loading = false;
			$(loadingBox).remove();
			loadingBox = null;
			if(cb) cb(data);
			if(data.error){
				$(button).fadeBox("<div style='background:#fff;padding:5px;font-weight:bold;color:#999;width:300px' class='error-border border-radius'>"+data.error+"</div>",3000);
			} else {
				$(button).fadeBox("<div style='background:#fff;padding:5px;font-weight:bold; border:2px solid #80e0f9;color:#999;' class='border-radius'><img src = '/modules/shop/tpl/default/images/nbs/wishlist-added.png' /><br />This item has been added to your wish list.</div>",3000);

				myshape.util.googleTrack('/stylepopup/wishlist/'+styleID+'-'+colorSize.color);
			}
		});
	},
	showLoading:function(){
	
	}
}

/********************************
stylePopup gadget


$("<div id='test' class='product' style='width:200px;height:200px;background:purple;'><input type='hidden' value='13528' name='styleID'/></div>").appendTo('body').top(200).left(100);

this gadget is the popup product detail
*/

myshape.gadgets.stylePopup = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.stylePopup();
	} else {
		this.init();
		return this;
	}
}

myshape.gadgets.stylePopup.prototype = {
	nodeSelector:".style-expanded",
	gadgetSelector:".style-expanded",
	activeSelector:".style-expanded.active",
	cacheSelector:"#style-expanded-cache",
	templateSelector:"#style-expanded-template",
	loadingSelector:".style-expanded-loading",
	bodySelector:".style-expanded-body",
	tabContentSelector:".style-info-tab-cont",
	popLocked:false,
	commentsFound:false,
	currentPopupContext:false,
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
		z.ears();

		z.escapeCloseable();

		z.zoomable();

		z.closeable();
		z.tabsClickable();
		z.outfitsPoppable();

		z.swappable();
		z.addToGadgets();

		z.styleGadget = myshape.getGadget('style');
		z.thumbGadget = myshape.getGadget('thumbCarousel');
		z.colorSizeGadget = myshape.getGadget('colorSizePicker');
	},
	hoverable:function(){
		var z = this;
		//$(z.activeSelector).liveHover(function(){},function(){
		//	if(!z.popLocked){
		//		z.doState(this,'closed');
		//	}
		//},{off:900});
	},
	escapeCloseable:function(){
		var z = this;
		$(window).bind('keypress',function(ev){
			if(ev.keyCode == 27){
				var popup = z.getActive();
				if(popup){
					z.doState(popup,'closed');
				}
			}
		});
	},
	zoomable:function(){
		try{
		$(this.gadgetSelector+" .zoomable-image-gadget").liveHoverZoom(function(ev,conf){
			$(conf.zoomtarget).next().hide();
			$(conf.zoomtarget).show();
		},function(ev,conf){
			$(conf.zoomtarget).hide();
			$(conf.zoomtarget).next().show();
		},{zoomtarget:this.activeSelector+" .style-zoom-cont",zoomloading:function(){
			return $("<div>").html(myshape.util.loadingImage()+' loading...')[0];
		}}/*,{on:800}*/);//cannot make intent work right now
		} catch(e){
			console.warn('exception:'+e.message);
		}
	},
	closeable:function(){
		var z = this;
		$(z.activeSelector+" .close-link").live('click',function(){
			z.doState($(this).parents(z.activeSelector),'closed');
		});
	},
	swappable:function(){
		var z = this;
		$(this.activeSelector+" .members-also-item-item").live('click',function(){
			var imageColor = myshape.util.colorFromSrc($($(this).find('img')[0]).attr('src'));
			var styleID = $(this).find("input[name=styleID]").val();

			var guide = $(this).find("span[name=guide]").html();
			if(guide){//the guide rank is the presented baynote order of styles 
				var num = 0;
				$(this).parents(".membersalso").find("input[name=styleID]").each(function(){
					num++;
					if($(this).val() == styleID){
						return false;
					}
				});
				z.doState(this,'mostViewedClicked',{styleID:styleID,rank:num,guide:guide});
			}

			z.showPopupFromData({styleID:styleID,color:imageColor});
		});
	},
	getStyleIDFromPopup:function(popup){
		var p = this.getNode(popup);
		if(p) return $(p).find(".style-id.holder").html();
		return false;
	},
	addToGadgets:function(){
		var z = this;

		$(z.nodeSelector+" .add-mybag").live('click',function fn(){
			if(fn.loading){
				return false;
			}

			fn.loading = true;

			var button = this;

			var loadingBox = $(this).parents(z.nodeSelector).find(".mybag-loading")[0];
			$(loadingBox).show();

			var popup = z.getActive();

			var styleID = $(popup).find(".style-id.holder").html();
			var cartString = $(popup).find(".cart-string").html() || '';

			var wishlistID = z.currentPopupContext.wishlistID;
			var wishlistItemID = z.currentPopupContext.wishlistItemID;

			if(!cartString.length && wishlistID && wishlistItemID){
				cartString = z.generateCartString(z.currentPopupContext);
			}

			var colorSize = z.colorSizeGadget.getColorSize(popup);
			
			
			var toomanymessage = "";
			var quantity = z.colorSizeGadget.getQuantity(popup);
			try{
				if(z.resultCache[styleID].styleData.enforce_quantity){
					var maxQuantity = (+z.resultCache[styleID].styleData.quantity[colorSize.color+'-'+colorSize.size]) || 0;
					if(maxQuantity && (maxQuantity-quantity) < 0){
						quantity = maxQuantity;
						z.colorSizeGadget.getQuantityInput(popup).val(quantity || 1);
						toomanymessage = "We only have "+quantity+" item"+(quantity == 1?"":"s")+" of this style, size and color left. We have added the available item"+(quantity == 1?"":"s")+" to your bag.";
					}
				}
			}catch(e){}

			fn.loading = false;

			var completeFunction = function(data){
				if(data.push) data = data[0];
				$(loadingBox).hide();
				fn.loading = false;
				if(data.error){
					$(button).fadeBox(myshape.util.errorBox(data.error),4000,popup);
					myshape.util.googleTrack('/stylepopup/bagerror1/'+styleID+'-'+colorSize.color);
				} else {
					if (data.redirectTo) {
						if(window.stopUnload)stopUnload();
						location.href = data.redirectTo;
					} else {
						if(!data.data) data.data = {};
						myshape.getGadget('bag').updateCounter(data.data.cartCount);
						var user_msg = '';
						var time = 4000;
						myshape.util.googleTrack('/stylepopup/bagadd/'+styleID+'-'+colorSize.color);
						if(!toomanymessage.length){
							user_msg = myshape.util.successBox("This item has been added to your bag");
						} else {
							time = 6000;
							toomanymessage = "<div style='color:#D7BF23;font-weight:bold;'>This item has been added to your bag</div>"+toomanymessage;
							user_msg = "<div style='background:#fff;border:1px solid #d4d4d4;padding:8px;' class='border-radius'>"+toomanymessage+"</div>";
						}
						$(button).fadeBox(user_msg,time,popup);
					}
				}
			};

			if(!cartString.length){
				myshape.ajax.addToBag(styleID,colorSize.color,colorSize.size,quantity,completeFunction);
				//myshape.ajax.addToCart(styleID,colorSize.color,colorSize.size,quantity,completeFunction);
			} else {

				var data =  z.parseCartString(cartString);

				data.color = colorSize.color;
				data.size = colorSize.size;

				json = JSON.stringify(data);
				
				myshape.ajax.addManyToBag([json],function(data){
					completeFunction(data[0]?data[0]:data.data);
				});
			}
		});

		$(z.nodeSelector+" .add-wishlist").live('click',function(){
			if($(this).hasClass('pending-request')){
				return false;
			}
			$(this).addClass('pending-request');

			var button = this;

			var loadingBox = $(this).parents(z.nodeSelector).find(".mybag-loading")[0];
			$(loadingBox).show();

			var popup = z.getActive();
			var styleID = $(popup).find(".style-id.holder").html();
			var colorSize = z.colorSizeGadget.getColorSize(popup);

			myshape.ajax.addToWishlist(styleID,colorSize.color,colorSize.size,function(data){
				$(loadingBox).hide();
				$(button).removeClass('pending-request');
				if(data.error){
					$(button).fadeBox("<div style='background:#fff;padding:5px;font-weight:bold;color:#999;width:300px' class='error-border'>"+data.error+"</div>",3000,popup);
				} else {
					$(button).fadeBox("<div style='background:#fff;padding:5px;font-weight:bold; border:2px solid #80e0f9;color:#999;'><img src = '/modules/shop/tpl/default/images/nbs/wishlist-added.png' /><br />This item has been added to your wish list.</div>",3000,popup);

					myshape.util.googleTrack('/stylepopup/wishlist/'+styleID+'-'+colorSize.color);
				}
			});
		});
	},
	parseCartString:function(str){
		var parts = str.split(',');
		return {styleID:parts[0],style:parts[0],color:parts[1],size:parts[2],quantity:parts[3] || 1,wishlistItemID:parts[4],wishlistID:parts[5]}
	},
	generateCartString:function(data){
		return (data.styleID || '')+','+(data.colorID || '')+','+(data.size || '')+','+(data.quantity || '0')+','+(data.wishlistItemID || '')+','+(data.wishlistID || '');
	},
	tabsClickable:function(){
		var z = this;
		$(z.tabContentSelector+" .tab-link").live('click',function(){
			ref = $(this).attr('href').split('#');

			if(ref.length > 1){
				ref = ref[1];
				$(this).parents(".tab-container").find(".htab").removeClass('selected');
				$(this).find(".htab").addClass('selected');

				$(z.activeSelector+" .tab-content.active").removeClass('active');
				$(z.activeSelector+" .tab-content."+ref).addClass('active');
			}
			return false;
		});
	},
	outfitsPoppable:function(){
		var z = this;
		$(this.gadgetSelector+" .style-outfit img").live('click',function(){
			myshape.getGadget('outfitPopup').open($(this).parents().find("input").val(),z.getNode(this));
			return false;
		});
	},
	ears:function(){
		var z = this;
		z.listen('style.state.activated',function(el,key,data){
			z.deletePopups();
			z.showPopupFromStyle(el,data.data || {});
		});

		z.listen('outfitPopup.state.beforeOpen',function(el,key,data){
			z.deletePopups();
		});

		z.listen('thumbCarousel.state.thumbChanged',function(el,key,data){
			var activePop = $(el).parents(z.activeSelector)[0];
			if(!activePop) return false;

			z.manageThumbChange(activePop,el);
		});

		z.listen('colorSizePicker.state.changed',function(el,key,data){
			var activePop = $(el).parents(z.activeSelector)[0];
			if(!activePop) return false;
			var colorSize = z.colorSizeGadget.getColorSize(el);

			z.thumbGadget.clickColor(activePop,colorSize.color);

			$(activePop).windowUncolide();
		});

		z.listen('comments.state.commentDataChanged',function(el,key,data){
			var talkData = data.data;
			if(talkData && talkData.styleID){
				var styleID = talkData.styleID;
				if(z.cachedNodes[styleID]){
					z.cachedNodes[styleID] = false;
				}
			}
		});
	},
	manageThumbChange:function(activePop,thumbElement){
		var z = this;
		//get image gadget and switch main image;

		var thumbImg = $(z.thumbGadget.getActiveThumb(thumbElement)).find('img')[0];

		var baseName = myshape.util.baseName($(thumbImg).attr('src'));

		var src = myshape.util.imagePath('large',baseName);
		var zoomSrc = myshape.util.imagePath('zoom',baseName);
		var colorID = $(thumbImg).attr('colorid');

		z.colorSizeGadget.doSelectColor(activePop,colorID);
		
		$(activePop).find(".zoomable-image-gadget").dataset('zoomsrc',zoomSrc).find('img').attr('src',src);

	},
	//state change gadget talk is fired after your state function so past tense names makes sense
	states:{
		closed:function(el,oldState){
			$(el).remove();
			this.currentPopupContext = false;
			$.overlay('remove');
			return true;
		},
		beforeOpen:function(el,oldState){
			return true;
		},
		//anything you do to the element when you "hear" this state will be cached
		building:function(el,oldState){
			return true;
		},
		fromcache:function(el,oldState,data){
			myshape.getGadget('comments').activate(el);

			this.manageThumbChange(el,this.thumbGadget.getNode(el));
		},
		opened:function(el,oldState){

			this.thumbGadget.doActivateScroll(el);

			this.completeTheLookScrollable(el);
			this.mostViewedScrollable(el);

			this.colorSizeGadget.activateSelectables(el);
			$(el).windowUncolide();//often content forces the box to strech unpredictably

			myshape.util.googleTrack('/stylepopup/opened/'+ $(el).find(".style-id.holder").html());

			return true;
		},
		errored:function(el,oldState,data){
			$.overlay('remove');
			return true;
		},
		mostViewedClicked:function(el,oldState,data){
			return true;
		}
	},
	showPopupFromStyle:function(el,styleData){
		var popup = this.getPopup(el,styleData);
		this.showPopup(popup,el);
	},
	showPopupFromData:function(styleData){
		var popup = this.getPopupFromData(styleData);
		this.showPopup(popup);
	},
	showPopup:function(popup,el){
		var z = this;
		$(popup).appendTo($("body")[0]);
		z.doState(popup,'beforeOpen');

		var z = this;
		
		$.overlay('create',function(){
			z.close();
		});
		//this is a hack because the overlay hides select boxes for ie6 users as they poke through the overlay
		$(popup).find('select').css('visibility','visible');

		//if a popup is showing use the popup container
		if($(this.activeSelector).length > 0){
			var css = $(this.activeSelector).attr('style');
			$(popup).attr('style',css);
			$(this.activeSelector).remove();
			$(popup).show();
			if(this.fromCache === true){
				this.doState(popup,'opened');
			}
		} else {
			$(popup).css({zIndex:1001,display:'none'});
			$(popup).center(window).fadeIn('fast',function(){
				if(z.fromCache === true){
					z.doState(popup,'opened');
				}
			});
		}
		$(popup).addClass('active');

		return popup;
	},
	getPopup:function(el,styleData){
		var styleImage = styleData.image;
		// i return a node from cache or a new node
		return this.getPopupFromData(styleData);
	},
	getPopupFromData:function(styleData){
		var popup = this.getFromCache(styleData.styleID);
		//this is used to hold the data related to the style on the page that was used to activate
		this.currentPopupContext = styleData;
		this.fromCache = true;
		if(!popup){
			this.fromCache = false;

			styleImage = styleData.image || false;

			popup = this.getNewPopup();
			$(popup).find(".loading-image").html(myshape.util.loadingImage());
			this.showLoading(popup);
			this.getStyleData(popup,styleData);
		} else {
			this.doState(popup,'fromcache',styleData);
		}
		return popup;
	},
	getNewPopup:function(el){
		return $(this.templateSelector).find("div").eq(0).clone();
	},
	cachedNodes:{},
	getFromCache:function(styleID){
		if(this.cachedNodes[styleID]){
			var node = $(this.cachedNodes[styleID]).clone();
			return node;
		}
		return false;
	},
	lastResponse:{},
	resultCache:{},
	getStyleData:function(popup,styleData){
		var z = this;
		var styleID = styleData.styleID;

		myshape.ajax.getSuperAction(styleData,function(data){
			if(data.error){
				z.doState(popup,'errored',data);
				$(popup).remove();
				z.cachedNodes[styleID] = '<div>Error: unable to load style.<div>';
				return;
			}
			z.lastResult = data;
			z.resultCache[styleID] = data;
			z.processData(popup,styleData);
		});
		
	},
	processData:function(popup,styleData){
		this.doState(popup,'building');

		var data = this.lastResult;

		var styleImage = data.defaults.image;//(styleImage?(typeof styleImage == 'object'?$(styleImage).attr('src'):styleImage):this.lastResult.style.image);

		this.buildGadgets(popup,styleImage,this.lastResult,styleData);

		//HACK - another image source hardset
		var thumbPath = myshape.util.mediaSource()+myshape.util.imagePaths.thumb;

		// Write various HTML for the hover tabs
		this.writeStyleText(popup);

		this.writeMostViewed(popup);
		
		this.writeCompleteTheLook(popup);
		
		//complete the process by dropping the loading and caching
		this.hideLoading(popup);

		this.cachedNodes[styleData.styleID] = this.resetPopup($(popup).clone()[0]);

		this.doState(popup,'opened');
	},
	writeMostViewed:function(popup){

		var z = this;
		var style = z.lastResult.styleData;

		var container = $(popup).find(".membersalso")[0];

		var mostViewedHTML = document.createDocumentFragment();

		var template = $(container).find(".members-also-item").remove()[0];

		var items = 0;
		(function(){
		for(var i=0;i < style.mostViewed.length;i+=4){
			var chunk = style.mostViewed.slice(i,4+i);
			if(chunk.length){
				var rowTemplate = $(template).clone()[0];
				var nodeTemplate = $(rowTemplate).find(".members-also-item-item").remove()[0];
				$.each(chunk,function(k,item){
					items++;
					$(rowTemplate).append(z.buildMostViewedHTMLBlock(item,$(nodeTemplate).clone()[0]));
				});
				mostViewedHTML.appendChild(rowTemplate);
			}
		}
		})();

		if (!items){
			$(popup).find(".membersalso").parents(".related-items-cont").hide();
		} else {
			container.appendChild(mostViewedHTML);
		}

	},
	buildMostViewedHTMLBlock:function(item,template){
		$(template).find("input").val(item.style_id);
		$(template).find("img").attr('src',item.products_image_path);
		if(item.guide){
			$(template).append("<span style='display:none !important;' name='guide'>"+item.guide+"</span>")
		}
		return template;
	},
	mostViewedScrollable:function(el){
		var node = this.getNode(el);
		el = $(node).find(".members-also-considered-gadget")[0];
		if(!$(el).hasClass('activated-scroll')){
			$(el).addClass('activated-scroll');
			$(el).jToolsScrollable({
				size:1,
				items:".membersalso",
				api:true,
				clickable:false
			});
		}
	},
	writeCompleteTheLook:function(popup){
		var z = this;
		var style = this.lastResult.styleData;
		var foundOutfits = false;

		var completeTheLookCont = $(popup).find(".complete-the-look");
		var template = $(completeTheLookCont).find(".list-item")[0];

		$(completeTheLookCont).html('');

		if (style.completeTheLook.length){
			$(popup).find(".complete-the-look-gadget").show();
			$.each(style.completeTheLook,function(k,outfit){;
				foundOutfits = true;
				var cloneTemplate = $(template).clone();
				z.buildCompleteTheLookNode(outfit,cloneTemplate);
				$(cloneTemplate).appendTo(completeTheLookCont);
			});
		}
	},
	buildCompleteTheLookNode:function(outfit,template){
		$(template).find("input[name=styleID]").val(outfit.id);
		$(template).find("img").attr('src',myshape.util.imagePath('browse',outfit.image));
	},
	completeTheLookScrollable:function(el){
		var node = this.getNode(el);
		el = $(node).find(".complete-the-look-gadget")[0];
		numItems = $(el).find(".style-outfit").length;
		if(numItems > 2){
			$(el).jToolsScrollable({
				size:2,
				items:".complete-the-look",
				api:true,
				clickable:false
			});
		} else {
			$(el).find(".next").addClass('disabled');
			$(el).find(".prev").addClass('disabled');
		}
	},
	writeStyleText:function(popup){
		var style = this.lastResult.styleData;

		$(popup).find(".mybag-loading.holder").html(myshape.util.loadingImage());
		$(popup).find(".wishlister-gadget-loading").html(myshape.util.loadingImage());

		$(popup).find(".shapes.holder .shape").each(function(){
			var shape = $(this).html();
			var found = false;
			$.each(style.shapes,function(k,v){
				if(v == shape){
					return found = true;
				}
			});
			if(!found){
				$(this).hide().parent().hide();
			}
		});

		$(popup).find(".style-name.holder").html(style.designer);
		$(popup).find(".style-title.holder").html(style.name);


		//update all of the text n stuff
		if (style.price > 0) {
			if (style.salePrice){
				$(popup).find(".style-price.holder").html('<span class="on_sale">$'+myshape.util.money(style.price)+'</span><br /><span class = "sale_price">$'+myshape.util.money(style.salePrice)+'</span>');
			} else {
				$(popup).find(".style-price.holder").html("$"+myshape.util.money(style.price));
			}
		}

		if(style.description){
			if(style.description.length){
				$(popup).find(".style-description-cont").show();
				$(popup).find(".style-description.holder").html(style.description);
			}
		}

		$(popup).find(".style-id.holder").html(style.id);
		var cleanDescription = [];

		$.each(style.extendedDescription,function(k,v){
			if(v && v.length){
				cleanDescription[cleanDescription.length] = v;
			}
		});
		var txt = '';
		if(cleanDescription.length){
			txt = '<ul><li>'+cleanDescription.join('</li><li>')+'</li></ul>';
		}
		$(popup).find(".style-extended-description.holder").html(txt);

		$(popup).find(".fabric-content.holder").html(style.content);
		if(style.care.length){
			$(popup).find(".fabric-care.holder").html(style.care);
		} else {
			$(popup).find(".fabric-care.holder").hide();
		}
	},
	buildGadgets:function(popup,image,data,styleData){

		//right now the only id that is passed with the request is the current shop id if you have no shop this is blank
		if(!(+data.commentData.shopViewerID)){
			this.hideWishlistLink(popup);
		}

		var style = data.styleData;

		//this cart string is passed up from the styleGadget
		if(styleData.cartString){
			if(styleData.cartString.length){
				$(popup).append("<span style='display:none;' class='cart-string'>"+styleData.cartString+"</span>");
			}
		}

		colors_len = 0;
		for(var i in style.colors){
			colors_len++;
		}

		if(!colors_len){
			style.sizes.label = {id:'',name:'Sold Out'};
			$(popup).find(".add-to-bag-button").hide();
		}

		var colorpicker = this.colorSizeGadget.build(popup,{
			sizes:style.sizes,
			colors:style.colors,
			sizesToColors:style.sizesToColors,
			colorsToSizes:style.colorsToSizes,
			quantity:style.quantity,
			size:data.defaults.size,
			suggestedSize:data.defaults.suggestedSize,
			defaultColor:data.defaults.color,
			message:data.defaults.message,
			swatches:style.swatches
		});


		//thumb gadget
		var mainColor = myshape.util.colorFromSrc(image);
		if(!style.colors[mainColor] && data.defaults.color){
			//console.warn('setting color from main color based on image '+mainColor+' to default color '+data.defaults.color)
			mainColor = data.defaults.color;
		}

		var thumbs = [];

		var mainColorHasThumb = false;
		
		$.each(style.thumbs,function(k,thumbData){
			
			if(thumbData.color == mainColor){
				mainColorHasThumb = true;
			}
			if(style.colors[thumbData.color]){
				thumbData.colorName = style.colors[thumbData.color].name;
				thumbs[thumbs.length] = thumbData;
			}
			if(thumbData.file == image){
				thumbData.main = image;
			}
		});

		if(!thumbs.length && !style.colors.length){
			thumbs = style.thumbs;
		}

		this.thumbGadget.build(popup,thumbs,(mainColorHasThumb?mainColor:(thumbs.length?data.defaults.color:false)),4);
		//end thumb gadget

		//comments gadget
		if(data.commentData.shopViewerID){

			myshape.getGadget('comments').build(popup,data.styleData.id,data.commentData);
	
			// Default to comments tab / content if in friend mode
			if(data.commentData.allowComments){
				$(popup).find(".commentsTab").click();
			}
		} else {
			//if you are not logged in you cannot see the comments tab
			$(popup).find(".commentsTab").parents(".tab").hide();
		}
	},
	showLoading:function(popup){
		$(popup).find(this.bodySelector).hide().prev(this.loadingSelector).show();
	},
	hideLoading:function(popup){
		$(popup).find(this.loadingSelector).hide().next(this.bodySelector).show();
	},
	deletePopups:function(){
		var z = this;
		$("body > "+this.nodeSelector).each(function(){
			z.doState(this,'closed');
		});
	},
	resetPopup:function(popup){
		return $(popup).removeAttr('style').removeClass('active')[0];
	},
	getActive:function(){
		return $(this.activeSelector)[0] || false;
	},
	close:function(){
		var popup = this.getActive();
		if(popup){
			this.doState(popup,'closed');
		}
	},
	hideWishlistLink:function(el){
		var node = this.getNode(el);
		//hide wishlist add link
		var wlli = $(node).find(".add-wishlist").parents("li")[0];
		if(wlli){
			$(wlli).remove();
		}
	}
};

/*
the myshape comments gadget powers friend comments in the style popup but can be used anywhere
*/
myshape.gadgets.comments = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.comments();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.comments.prototype = {
	gadgetSelector:".comments-gadget",
	//activeClass
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);

		z.saveable();
	},
	saveable:function(){
		var z = this;
		var loading = false;
		$(z.gadgetSelector+" .add-comment").live('click',function(){
			var button = this;

			if(loading){
				return false;
			}

			loading = true;


			var node = z.getNode(button);
			var loadingBox = $(node).find(".comments-loading")[0];
			$(loadingBox).show();

			var styleID = z.styleID(node);
			var shopID = z.shopID(node);

			var comment = $(node).find("textarea.comments-input").val();
			if(comment.length > 0){

				myshape.ajax.addComment(shopID, styleID, comment,function(data){

					$(loadingBox).hide();	
					loading = false;

					if(data.error){
						$(button).fadeBox(myshape.util.errorBox(data.error),false,node);
					} else {
						var comment = data.data;
						$(button).fadeBox("<div class='border-radius' style='background:#fff;padding:5px;font-weight:bold; border:2px solid #80e0f9;color:#999;'>Your comment has been added</div>",false,node);

						z.writeComment(node,comment);
						z.doState(node,'commentDataChanged',comment);
						$(node).find("textarea.comments-input").val("");
					}
				});

			} else {
				loading = false;
				$(button).fadeBox(myshape.util.errorBox('Please type a comment'),false,node);
			}
		});
	},
	states:{
		node:function(){
			return true;
		},
		commentDataChanged:function(){
			//fired when a new comment is made =)
			return true;
		}
	},
	build:function(el,styleID,commentData){

		var z = this;

		/*
case1
	i have no shop
		*/

		var noShop = (!commentData.shopID && commentData.shopViewerID? true:false);

		//var myShop = (commentData.shopID == commentData.shopViewerID? true:false);

		var allowComments = commentData.allowComments;
		var comments = commentData.comments;
		var shopID = commentData.shopID;

		var node = z.getNode(el);

		if(noShop){
			$(node).find(".no-comments .li-comment center").each(function(){
				if($(this).hasClass('swf-no-shop')){
					$(this).show();
				} else {
					$(this).hide();
				}
			});
		}

		$(node).find(".comments-loading").html(myshape.util.loadingImage());

		if(node && styleID){

			z.styleID(node,styleID);
			z.shopID(node,shopID);

			if (shopID){
				if(allowComments){
					$(node).find("div.comments-input").show();
				}
				if (comments){
					$.each(comments,function(k,comment){
						z.writeComment(node,comment);
					});
				}
			}
		}
		this.activate(node);
	},
	//this gadget requires non live event handlers so must be initalized post build and on every reload
	activate:function(el){
		this.activateTextarea(el);
		this.activateInviteLink(el);
	},
	activateTextarea:function(el){
		var node = this.getNode(el);
		$(node).find("textarea").parents(".comments-input").textAreaLimit({counterSelector:'.comments-counter'});
	},
	activateInviteLink:function(el){
		var node = this.getNode(el);
		$(node).find(".no-comments .li-comment .swf-shop a").nyroModal(); // Add nyro modal to invite link in comments section.
	},
	writeComment:function(el,comment){
		var node = this.getNode(el);
		/*var comment = {
			name: this.lastResult.style.currentViewer, 
			date: this.lastResult.style.currentDate, 
			comment: commentText
		};*/

		var commentHTML = this.buildCommentHTMLBlock(comment);

		if (!this.haveComments(node)){
			//clear no comments message if exists
			$(this.getCommentsCont(node)).html("");
		}
		// Prepend the new comment
		$(this.getCommentsCont(node)).prepend(commentHTML);
	},
	haveComments:function(node){
		return $(this.getCommentsCont(node)).find(".no-comments").length == 0;
	},
	getCommentsCont:function(el){
		return $(this.getNode(el)).find(".comments-cont")[0];
	},
	buildCommentHTMLBlock:function(comment){
		html  = '<div class="list-item">';
		html += '<div class="clearfix"><div class="li-user-name holder left">'+comment.name+'&nbsp;</div><div class="right">'+comment.date+'</div></div>';
		html += '<div class="li-comment">'+comment.comment+'</div>';
		html += '</div>';
		return html;
	},
	styleID:function(el,styleID){
		var node = this.getNode(el);
		if(!styleID){
			return $(node).attr('styleID');
		}
		$(node).attr('styleID',styleID);
		return styleID;
	},
	shopID:function(el,shopID){
		var node = this.getNode(el);
		if(!shopID){
			return $(node).attr('shopID');
		}
		$(node).attr('shopID',shopID);
		return shopID;
	}
};

/********************************
thumbCarousel gadget

this gadget should be used to opperate all carouseled thumbs on the site
*/
myshape.gadgets.thumbCarousel = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.thumbCarousel();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.thumbCarousel.prototype = {
	gadgetSelector:".thumb-gadget",
	thumbSelector:".carousel-thumb",
	thumbTemplateSelector:".thumb-template",
	thumbScrollableSelector:".scrollable",
	thumbContainerSelector:".scrollable .items",
	//activeClass
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
		z.clickable();

	},
	clickable:function(){
		var z = this;
		$(this.thumbSelector+' img').live('click',function(){
			z.activateThumb(this);
		});
		
		$(this.thumbSelector+' a').removeAttr('target').removeAttr('href').live('click',function(){
			return false;//if thumbs have links dont follow them
		});
	},
	clickColor:function(el,newColor){
		var node = this.getNode(el);
		var colorID = this.getActiveColor(node);
		
		if(newColor != colorID){
			$(node).find(this.thumbSelector+" img[data-color="+newColor+"]").eq(0).trigger('click');
		}
	},
	doActivateScroll:function(el){
		el = this.getNode(el);
		this.activateScroll(el);
	},
	activateScroll:function(el){
		if(!$(el).hasClass('activated-scroll')){
			$(el).addClass('activated-scroll');
			$(el).jToolsScrollable({
				size:4,
				api:true,
				clickable:false
			});
		}
	},
	setupScroll:function(scrollable,visibleThumbs){
		scrollable.visibleThumbs = visibleThumbs || 4;

		var thumbs = $(scrollable).find(this.thumbSelector);
		
		if(thumbs.length <= visibleThumbs){
			$(scrollable).next('.next').addClass('disabled');
		} else {
			$(scrollable).next('.next').removeClass('disabled');
		}
	},
	// i require a main flag
	build:function(el,thumbs,mainColor,visibleThumbs){
		var node = this.getNode(el);

		if(!node){
			return false;
		}

		var thumbContainer = $(node).find(this.thumbContainerSelector);
		var template = $(node).find(this.thumbTemplateSelector).clone().removeClass('thumb-template').addClass('carousel-thumb')[0];
		var mainRendered = false;

		var mainSpecified = false;
		$.each(thumbs,function(k,v){
			if(v.main){
				mainSpecified = v.file;
				return false;
			}
		});

		if(!mainColor){
			if(thumbs[0]){
				mainColor = thumbs[0].color;
			}
		}

		$.each(thumbs,function(k,thumbData){

			var newNode = $(template).clone()[0];
			newNode.colorID = thumbData.color;
			newNode.colorName = thumbData.colorName;

			$(newNode).show().find("img").attr({
				src:myshape.util.mediaSource()+myshape.util.imagePaths.thumb+'/'+thumbData.file,
				alt:thumbData.colorName,
				title:thumbData.colorName,
				'data-color':thumbData.color
			});

			if(thumbData.color == mainColor){
				if(mainRendered){
					$(newNode).insertAfter(mainRendered);
					mainRendered = newNode;
				} else {
					$(newNode).prependTo(thumbContainer);
				}

				if(!mainRendered){
					if(mainSpecified){
						if(mainSpecified == thumbData.file){

							mainRendered = newNode;

						}

					} else if(myshape.util.typeFromSrc(thumbData.file) == 'main') {

						mainRendered = newNode;

					}
				}
			} else {
				$(newNode).appendTo(thumbContainer);
			}
		});

		this.activateColor(node,mainColor);
		this.setupScroll($(node).find(this.thumbScrollableSelector)[0],visibleThumbs);
	},
	load:function(el,visibleThumbs){
		var node = this.getNode(el);
		if(node){
			//.find('.scrollable')
			this.setupScroll($(node)[0],visibleThumbs);
			return true;
		}
		return false;
	},
	states:{
		node:function(){return true},
		thumbChanged:function(el,oldState){
			return true
		}
	},
	activateColor:function(el,colorID){
		var z = this;
		var node = z.getNode(el);
		if(!node){
			return false;
		}

		$(node).find(z.thumbContainerSelector+" "+z.thumbSelector).each(function(){
			if(this.colorID == colorID){
				z.activateThumb(this);
				return false;//break
			}
		});
		return true
	},
	activateThumb:function(thumb){

		this.setActiveThumb(thumb)

		this.doState($(thumb).parents(this.gadgetSelector)[0],'thumbChanged');
	},
	setActiveThumb:function(thumb){
		var img = thumb;
		if(thumb.nodeName.toLowerCase() != 'img'){
			$(thumb).addClass('active');
			img = $(thumb).find('img')[0];
		}

		if($(img).hasClass('active-image')){
			return;
		}

		var gadget = $(img).parents(this.gadgetSelector)[0];

		$(gadget).find("img.active-image").removeClass('active-image');

		$(gadget).find(".carousel-thumb.active").removeClass('active');

		$(img).addClass('active-image').parents(".carousel-thumb").addClass('active');
	},
	getActiveThumb:function(node){
		return $(node).find(this.thumbSelector+".active")[0];
	},
	getActiveColor:function(node){
		return $(this.getActiveThumb(node)).attr('colorID');
	}
};

/*****
* colorSize picker gadget
*/
myshape.gadgets.colorSizePicker = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.colorSizePicker();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.colorSizePicker.prototype = {
	gadgetSelector:".size-and-color-picker-gadget",
	sizeInputSelector:"select.sizes",
	colorInputSelector:"select.colors",
	quantityInputSelector:"input.quantity",
	swatchHolderSelector:".swatch-image-holder",
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);

	},
	//because this is not a live event we call it after the select elements are built
	activateSelectables:function(el){
		var z = this;
		$.each($(el).find(this.gadgetSelector),function(k,node){
			z.selectable($(node).find(z.sizeInputSelector));
			z.selectable($(node).find(z.colorInputSelector));
			z.reset(node);
		});
	},
	doSelectColor:function(el,color){

		var selectNode = $(this.getNode(el)).find(this.colorInputSelector)[0];

		this.doSelectSwatch(el,color);

		return this.doSelect(selectNode,color,this.selectColor);
	},
	doSelectSwatch:function(el,color){
		//var node = this.getNode(el);
		var cont = $(this.getNode(el)).find(this.swatchHolderSelector)[0];
		if(cont){
			$(cont).find("img").hide();
			var haveColor = $(cont).find("img[data-color="+color+"]").show().length;
			if(haveColor){
				$(cont).show();
			} else {
				$(cont).hide();
			}
		}
	},
	doSelectSize:function(el,size){
		var selectNode = $(this.getNode(el)).find(this.sizeInputSelector)[0];
		return this.doSelect(selectNode,size,this.flagColorSizeIntersection);
	},
	doSelect:function(el,key,cb){
		var newVal = $(el).find("option[key="+key+"]").eq(0).val();
		if(newVal){
			$(el).val(newVal);
			this.cb = cb;
			this.cb(el,key);
			return true;
		}
		return false;
	},
	getGadget:function(el){
		return $(el).parents(this.gadgetSelector)[0];
	},
	states:{
		node:function(){return true;},
		changed:function(el,oldState,data){

			this.flagColorSizeIntersection(el);
			this.checkSizeRec(el);

			var colorsize = this.getColorSize(el);
			this.doSelectSwatch(el,colorsize.color);

			return true;
		}
	},
	checkSizeRec:function(el){
		var node = this.getNode(el);
		var recSize = this.getRecSize(node);

		if(recSize){
			var selectedSize = this.getColorSize(node).size;
			if(recSize != selectedSize){
				this.showMessageBox(node);
			} else {
				this.hideMessageBox(node);
			}
		}
	},
	writeMessageBox:function(el,title,message){
		var box = this.getMessageBox(el);
		if(box){
			$(box).html('<span class="title">'+title+'</span><br /><br />'+message);
		}
	},
	hideMessageBox:function(el){
		$(this.getMessageBox(el)).removeClass('visible');
	},
	showMessageBox:function(el){
		$(this.getMessageBox(el)).addClass('visible');
	},
	getMessageBox:function(el){
		var node = this.getNode(el);
		return $(node).find(".style-expanded-messaging")[0];
	},
	getRecSize:function(node){
		return $(this.getNode(node)).find("input[name=recSize]").val();
	},
	setRecSize:function(node,size){
		return $(this.getNode(node)).find("input[name=recSize]").val(size);
	},
	build:function(node,data){


		//$.log('USE QUANTITY',data.quantity);
		/*var sample = {
			sizes:{SROL:{id:1,name:'sample size 1'},SROM:{id:2,name:'sample size 2'}},
			colors:{CLR1:{id:3,name:'sample color 1'},CLR2:{id:4,name:'sample color 2'}},
			sizesToColors:{SROL:['CLR1','CLR2'],SROM:['CLR1']},
			colorsToSizes:{CLR1:['SROL','SROM'],CLR2:['SROL']},
			defaultSize:'SROL',
			defaultColor:'CLR1',
			message:' you do not have the default size selected'
		};

		data = sample;*/

		var el = this.getNode(node);
		el.defaultSize = data.size;
		el.suggestedSize = data.suggestedSize;// || data.size
		el.defaultColor = data.defaultColor;

		//populate the shapematch rec

		var opt = $("<option/>")[0];

		var sizeSelect = $(el).find(this.sizeInputSelector).html('')[0];

		var numSizes = 0;

		//default size comes back with a value even if that size is no longer in stock
		var haveDefaultSize = false;

		$.each(data.sizes,function(k,v){
			numSizes++;
			var size = $(opt).clone();
			$(sizeSelect).append(size);

			if (k == data.size) {//|| (k == 'label' && !data.size)
				$(size).val(k=='label'?"":(k || '')).html(v.name||'').attr({key:k,selected:'selected'}).addClass('base-size');
				haveDefaultSize = true;
			} else {
				$(size).val(k=='label'?"":k).html(v.name).attr('key',k);
			}
			//sizeless dressing requires a special message for out of stock in color size combo
			if(v.stockmessage){
				$(size).attr('stockmessage',v.stockmessage);
			}

			if(data.sizesToColors[k]){
				$.each(data.sizesToColors[k],function(k,v){
					$(size).addClass('color-'+v);
				});
			}
		});

		if(numSizes <=1){
			$(sizeSelect).css({background:'#f0f0f0'});
		}

		var colorSelect = $(el).find(this.colorInputSelector).html('')[0];
		var numColors = 0;
		var firstColor = false;


		$.each(data.colors,function(k,v){
			if(v){
				if(numColors == 0){
					firstColor = k;
				}
				numColors++;
				var color = $(opt).clone();
				$(colorSelect).append(color);

				if (k == data.defaultColor) {
					$(color).val(k).html(v.name).attr('key',k).attr('selected', 'selected');
				} else {
					$(color).val(k).html(v.name).attr('key',k);
				}

				if(data.colorsToSizes[k]){
					$.each(data.colorsToSizes[k],function(k,v){
						$(color).addClass('size-'+v);
					});
				}
			}
		});

		if(numColors <=1){
			//$(colorSelect);
		} else {
			$(colorSelect).removeAttr('disabled');
		}

		this.buildSwatches(el,data.swatches);

		//non default size message
		if(data.message && data.message.length){
			this.writeMessageBox(el,'ShapeMatch® Recommendation',data.message);
			if(!haveDefaultSize || el.suggestedSize != el.defaultSize){
				this.showMessageBox(el);
			}
			this.setRecSize(el,el.suggestedSize);
		}

		var z = this;
		setTimeout(function(){
			z.flagColorSizeIntersection(el);
		},0);

		return el;
	},
	setIntersectionAttrs:function(el){
		var n = z.getNode(el);
		
	},
	reset:function(el){
		el = this.getNode(el);
		$(el).val($(el).find("option.base-size").attr('selected','selected').val());
	},
	flagColorSizeIntersection:function(el){
		//$.log('flagging intersection');
		//colorize the 
		var z = this;
		var node = z.getNode(el);
		var colorSelect = $(node).find(this.colorInputSelector);
		var sizeSelect = $(node).find(this.sizeInputSelector);
		if($(sizeSelect).val().length && $(colorSelect).val()){
			var colorOption = $(colorSelect).find("option[value="+$(colorSelect).val()+"]")[0];
			
			var sizeOption = $(sizeSelect).find("option[value="+$(sizeSelect).val()+"]")[0];
	
			z.selectColor(node,$(colorOption).attr('key'));

			z.selectSize(node,$(sizeOption).attr('key'));
	
			var colorInvalid = $(colorOption).hasClass('intersection-invalid');
			var sizeInvalid = $(sizeOption).hasClass('intersection-invalid');
	
			if(colorInvalid || sizeInvalid){
				//$.log('color invalid: '+(colorInvalid?1:0)+', size invalid: '+(colorInvalid?1:0));

				var sizeText = $(sizeOption).html();
				var stockMessage = $(sizeOption).attr('stockmessage');
				if(stockMessage && stockMessage.length){
					sizeText = stockMessage;
				}
				$(node).find(".not-available-messaging").html("Sorry, the color "+$(colorOption).html()+" is sold out in "+sizeText+".").fadeIn(2000);
				return;
			}
		}
		$(node).find(".not-available-messaging").hide();
	},
	selectColor:function(el,color){
		var classKey = (color == 'label'?false:'color-'+color);
		return this.selectBase($(this.getNode(el)).find(this.sizeInputSelector)[0],classKey);
	},
	selectSize:function(el,size){
		var classKey = (size == 'label'?false:'size-'+size);
		return this.selectBase($(this.getNode(el)).find(this.colorInputSelector)[0],classKey);
	},
	selectBase:function(el,classKey){
		if(classKey){
			$(el).find("option").css({color:'#FF8484'}).addClass('intersection-invalid')
	
			$(el).find("option."+classKey).css({color:''}).removeClass('intersection-invalid');

			$(el).find("option[key=label]").css({color:''}).length;
		} else {
			$(el).find("option").css({color:''});
		}
	},
	selectable:function(el){
		var z = this;
		$(el).change(function(){
			// this is here for when we enable the auto update for out of stock size in color
			var preval = $(el).val();
			$(this).removeClass('error-border');
			//try{
			z.doState(z.getNode(this),'changed');
			//}catch(e){}
			return true;
		});
	},
	getColorSize:function(el){
		el = this.getNode(el);
		var color = this.getSelectValue(el,this.colorInputSelector);
		var size = this.getSelectValue(el,this.sizeInputSelector);
		if(size == 'label') size = '';
		return {color:color,size:size};
	},
	getSelectValue:function(el,selector){
		selectNode = $(el).find(selector)[0];
		if(selectNode){
			return $(selectNode).find("option[value="+$(selectNode).val()+"]").attr('key');
		}
		return false;
	},
	getQuantity:function(el){
		el = this.getNode(el);
		return this.getQuantityInput(el).val();
	},
	getQuantityInput:function(el){
		return $(el).find(this.quantityInputSelector);
	},
	buildSwatches:function(node,swatches){
		if(swatches && swatches.length && node){
			var cont = $(node).find(this.swatchHolderSelector)[0];
			$.each(swatches,function(i,v){
				$(cont).append("<img data-color='"+v.color+"' src='"+myshape.util.imagePath('swatch',v.file)+"' alt='' style='display;none;'/>");
			});
		}
	}
};

/******
* base gadget object for color search gadgets
*/
myshape.gadgets.colorSearchBase = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.colorSearchBase();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.colorSearchBase.prototype = {
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
	},
	getColors:function(el){
		var colors = [];
		var node = this.getNode(el);
		if(node){
			$(node).find(this.colorsSelector+" .color-node").each(function(){
				var rgb  = $(this).attr('rgb');
				if(rgb){
					colors[colors.length] = rgb;
				}
			});
		}
	},
	addColor:function(node,containerSelector,rgbString){
		if(!this.findColor(node,containerSelector,rgbString)){
			var color = this.buildColorNode(rgbString);
			$(containerSelector).append(color);
			return true;
		}
		return false;
	},
	removeColor:function(node,containerSelector,rgbString){
		var color = this.findColor(node,containerSelector,rgbString);
		if(color){
			$(color).remove();
			return true;
		}
		return false;
	},
	findColor:function(el,containerSelector,rgbString){
		var node = this.getNode(el);
		return $(node).find(containerSelector+" .color-node[rgb="+rgbString+"]")[0];
	},
	buildColorNode:function(rgbString){
		return $(".color-search-gadget .color-node-template").eq(0).clone().removeClass('color-node-template').addClass('color-node').attr('rgb',rgbString).css({background:'rgb('+rgbString+')',height:'20px',width:'20px'}).show()[0];
	}
};

/*****
* colorSearchLink gadget - the color search popup "opener" that shows selected colors
*/
myshape.gadgets.colorSearchLink = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.colorSearchLink();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.colorSearchLink.prototype = {
	gadgetSelector:".color-search-link-gadget",
	linkSelector:".color-search-link-gadget-link",
	colorsSelector:".color-search-link-gadget-colors",
	searchpalette:"",
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.getGadget('colorSearchBase'));

		$(z.gadgetSelector).show();

		z.clickable();
		z.ears();
	},
	ears:function(){
		var z= this;
		z.listen("colorSearch.state.colorAdded",function(el,key,data){
			$(z.gadgetSelector).each(function(){
				z.addColor(this,z.colorsSelector,data.data.rgb);
			});
		});
		z.listen("colorSearch.state.colorRemoved",function(el,key,data){
			$(z.gadgetSelector).each(function(){
				z.removeColor(this,z.colorsSelector,data.data.rgb);
			});
		});
	},
	states:{
		node:function(){return true},
		activated:function(){return true}
	},
	clickable:function(){
		var z = this;
		$(z.gadgetSelector).live('click',function(){
			z.doState(z.getNode(this),'activated');
		});
	},
	addOnSearchHandler:function(el,fn){
		var node = this.getNode(el);
		node.onSearch = fn;
	}
}

/*****
* colorSearch gadget - the color selector popup
*/
myshape.gadgets.colorSearch = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.colorSearch();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.colorSearch.prototype = {
	gadgetSelector:".color-search-gadget",
	gadgetTemplateSelector:"#color-search-gadget-template",
	colorsSelector:".selected-color-holder",
	searchpalette:"",
	lastSearch:[],
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.getGadget('colorSearchBase'));

		z.colorSearchLinkGadget = myshape.getGadget('colorSearchLink');

		z.lastSearch = z.getColorMatchSearch();

		z.loadDefaultPalette();
		z.ears();
		z.closeable();
		z.colorsInteractable();
		z.submitable();
	},
	ears:function(){
		var z = this;
		z.listen('colorSearchLink.state.activated',function(el,key,data){
			var gadget = z.getTemplate();
			var elDims = $(el).getDims();

			if(typeof el.onSearch == 'function'){
				gadget.onSearch = el.onSearch;
			}

			$(gadget).appendTo("body").eq(0).hide().css({zIndex:499}).top(elDims.y).left(elDims.x).fadeIn('fast');
			//get colors form the colorSearchLink if any
			//add em to the selected colors box
		});
	},
	//TODO add the abillity to fire a submit function passed from the colorLink gadget
	submitable:function(){
		var z = this;
		$(".color-search-gadget-submit").live('click',function(){
			var rgb = [];
			var node = z.getNode(this);
			$(node).find(".selected-color-holder .color-node").each(function(){
				var rgbString = $(this).attr('rgb');
				if(rgbString.length){
					rgb[rgb.length] = rgbString;
				}
			});
			if(node.onSearch){
				if(node.onSearch(rgb)){
					$(this).find(".close-link").click();
				}
			} else {
				if(rgb.length > 0){
					rgb = rgb.join('-');
					var search = location.search;
					var newColorMatch = 'colorMatch='+rgb;
					if(z.lastSearch.length > 0){
						search = search.replace('colorMatch='+z.getColorMatchString(),newColorMatch);
					} else {
						search += (location.search.length> 0?'&':'')+newColorMatch;
					}
					location.search = search;
				} else {
					var search = location.search;
					if(z.lastSearch.length > 0){
						search = search.replace('colorMatch='+z.getColorMatchString(),'');
					}

					if(search[search.length-1] == '&'){
						search[search.length-1] = '';
					}

					location.search = search;
				}
			}
		});
	},
	getColorMatchSearch:function(){
		var search = this.getColorMatchString();
		if(search.length){
			return search.split('-');
		}
		return [];
	},
	getColorMatchString:function(){
		if(location.search.length > 0){
			if(location.search.indexOf('colorMatch=') != -1){
				return location.search.split('colorMatch=')[1].split('&')[0];
			}
		}
		return '';
	},
	closeable:function(){
		var z = this;
		$(".color-search-gadget .close-link").live('click',function(){
			$(z.gadgetTemplateSelector).html($(this).parents(z.gadgetSelector).remove());
		});
		$(".color-search-gadget").liveHover(function(){},function(){
			$(z.gadgetTemplateSelector).html($(this).remove());
		},{on:0,off:800});
	},
	colorsInteractable:function(){
		var z = this;
		$(".color-holder .color-node").live('click',function(){

			var rgb = $(this).attr('rgb');
			if(z.addColor(this,z.colorsSelector,rgb)){
				z.removeColor(this,".color-holder",rgb);

				z.doState(this,'colorAdded',{rgb:rgb});
			}
			return false;
		});

		$(".selected-color-holder .color-node").live('click',function(){
			var rgb = $(this).attr('rgb');
			var node = z.getNode(this);
			if(z.removeColor(this,z.colorsSelector,rgb)){
				//color is removed so it is no longer related to the parent node
				z.addColor(node,".color-holder",rgb);
				z.doState(node,'colorRemoved',{rgb:rgb});
			}
			return false;
		});
	},
	states:{
		node:function(){return true},
		colorAdded:function(){return true},
		colorRemoved:function(){return true}
	},
	loadDefaultPalette:function(){
		var z = this;
		$(".color-search-gadget").each(function(){
			var colorGadget = this;
			var colors = $(colorGadget).find("input[name=default-palette]").val().split('-');
			if(z.lastSearch.length > 0){
				var filteredColors = colors;
				$.each(colors,function(k,rgbString){
					var pass = true;
					$.each(z.lastSearch,function(k,searchedRGB){
						if(searchedRGB == rgbString){
							pass = false;
							return false;//break;
						}
					});
					if(pass){
						filteredColors[filteredColors.length] = rgbString;
					}
				});
				colors = filteredColors;
			}
			$.each(colors,function(k,rgbString){
				z.addColor(colorGadget,".color-holder",rgbString);
			});
			if(z.lastSearch.length > 0){
				$.each(z.lastSearch,function(k,rgbString){
					if(rgbString){
						z.addColor(colorGadget,".selected-color-holder",rgbString);
					}
				});
			}
		});
	},
	getTemplate:function(){
		return $(this.gadgetTemplateSelector+" "+this.gadgetSelector).clone()[0];
	}
}

myshape.gadgets.quickBrowse = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.quickBrowse();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.quickBrowse.prototype = {
	gadgetSelector:".quick-browse-gadget",
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
		z.closeable();

		//z.colorSearchLinkGadget = myshape.getGadget('colorSearchLink');
	},
	//main api function
	create:function(params){
		var template = this.getTemplate();
		if(template){
			this.addParams(template,params);
			this.doState(template,'created');
		}
		return template;
	},
	//live event binders
	closeable:function(){
		var z = this;
		$(this.gadgetSelector+" .close-icon").live('click',function(){
			var node = z.getNode(this);
			if(node){
				z.doState(node,'closed');
			}
		});
	},
	states:{
		created:function(el,oldState){
			var z = this;
			if($(el).find(".results .scrollable").length == 0){
				$(el).find(".results").append("<div class='scrollable' style='position:relative;overflow: hidden;width:100%;height:100%;'><div class='browse-items' style='width:20000px;position:relative;'></div></div>");
			}
			z.addFilter(el);
			z.startLoading(el);
			this.getResults(el,function(data){
				var resultCount = 0;
				$.each(data,function(){
					resultCount++;
				});
				z.stopLoading(el,resultCount);
			});
			return true;
		},
		//when i update the internal filters to change the result set
		newResults:function(el){
			var z = this;
			z.startLoading(el);
			z.emptyResults(el);
			var hits = new Number($(el).attr('hits') || 0);
			$(el).attr('hits',++hits);
			//reset the scroller to the beginning

			z.getResults(el,function(data){
				if($(el).attr('hits') == hits){
					var resultCount = 0;
					z.emptyResults(el);//if you are a quick category switcher we need to empty again
					$.each(data,function(){
						resultCount++;
					});
					z.stopLoading(el,resultCount);
				}
			});
			return true;
		},
		//when the "page" changes by scrolling near the end
		moreResults:function(el){
			if(!el.resultsComplete){

				if(!el.isLoading){
					var z = this;
					el.isLoading = true;
					el.params.page++;

					z.getResults(el,function(data){
						el.isLoading = false;
						var resultCount = 0;
						$.each(data,function(){
							resultCount++;
						});
						if(resultCount == 0){
							el.resultsComplete = 1;
						}
					});
					return true;
				}
			}
			return false;
		},
		resultsLoaded:function(el,oldState,data){
			var z = this;
			$.each(data,function(k,v){
				z.addResult(el,v);
			});
			$(el).find(".scroll-nav").removeClass("scroll-link-disabled");

			if(!$(el).find(".results-cont").hasClass('added-scrollable')){
				$(el).find(".results-cont").jToolsScrollable({
					disabledClass:"scroll-link-disabled",
					next:'.no-next',//must be overidden
					prev:'.no-prev',//must be overidden
					nextPage:".next",
					prevPage:".prev",
					items:".browse-items",
					keyboard:false,
					clickable:false,
					size:3, //the desired behavior is 3 at a time
					onBeforeSeek:function(){
						var leftToScroll = $(this.getRoot()).find(".quick-browse-style").length - (this.getIndex()+3);
						if(leftToScroll < 20 && !el.isloading){
							z.doState(el,'moreResults');
						}
					}
				}).addClass('added-scrollable');
			} else {
				var api = $(el).find(".results-cont").jToolsScrollable({api:true}).reload();
				///HACK this assumes that the browse max result set returned in one request is going to be 20 items - should be configureable
				if($(el).find(".results-cont .quick-browse-style").length <= 20){
					api.reset();
				}
			}
			return true;
		},
		closed:function(el,oldState,data){
			$(el).remove();
			return true;
		}
	},
	emptyResults:function(el){
		$(el).find(".results-cont").hide().find(".quick-browse-style").remove();
	},
	reloadAllResults:function(){
		$(".quick-browse-gadget .category-filter").change();
	},
	addFilter:function(el){
		var z = this;
		var params = this.getParams(el);
		if(params.categoriesID){
			$(el).find(".quick-browse-inner-filter").html($("#quick-browse-filter-templates .quick-browse-category-filter").clone()[0]);
			$(el).find(".quick-browse-category-filter select").val(params.categoriesID).change(function(){
				el.params.categoriesID = $(this).val();
				z.doState(el,'newResults');
			});
		}

		/*z.colorSearchLinkGadget.addOnSearchHandler($(el).find(".quick-browse-color-filter")[0],function(rgb){
			alert(rgb);
		});*/
	},
	getTemplate:function(){
		var template = $("#quick-browse-gadget-template "+this.gadgetSelector).clone()[0];
		if(template){
			return $(template).clone()[0];
		}
		return false;
	},
	getResults:function(el,cb){
		var z = this;
		var params = z.getParams(el);

		myshape.ajax.browse(params.categoriesID,params.page+1,function(data){
			if(typeof(cb) == 'function'){
				cb(data);
			}
			z.doState(el,'resultsLoaded',data);
		});
	},
	addParams:function(el,params){
		el.params = params;
	},
	getParams:function(el){
		var params = el.params || {};
		if(!params.page){
			params.page = 0;
		}
		el.params = params;
		return el.params;
	},
	startLoading:function(el){
		$(el).find(".no-results").hide();
		$(el).find(".style-container .loading").html(myshape.util.loadingImage()).show();
	},
	stopLoading:function(el,resultCount){
		$(el).find(".style-container .loading").hide();
		if(resultCount || $(el).find(".results .quick-browse-style").length > 0){
			$(el).find(".results-cont").show();
		} else {
			$(el).find(".no-results").show();
		}
	},
	clearResults:function(){

	},
	addResult:function(el,data){
		var template = this.getResultTemplate();

		template.data = data;

		var src = data.image;
		//if the image does not have http/s already
		if(data.image.indexOf(location.protocol) == -1){
			src = myshape.util.imagePath('browse',data.image);
		}

		$(template).find("img").attr('src',src);

		$(el).find(".results .browse-items").append(template);
	},
	getResultTemplate:function(){
		return $("#quick-browse-style-template .quick-browse-style").clone()[0];
	}
};


myshape.gadgets.outfit = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.outfit();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.outfit.prototype = {
	gadgetSelector:".outfit-gadget",
	quickGadgetSelector:".outfit-gadget-quick",
	isInit:false,
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
		z.hoverable();
		z.clickable();
		z.ears();

		z.isInit = true;
	},
	states:{
		node:function(){},
		activated:function(el,oldState){
			return true;
		}
	},
	hoverable:function(){
		/*var z = this,speed = false;
		var settings = myshape.getGadget('popupSettings');
		if(z.isInit){
			$(this.gadgetSelector).dieHover();
			z.clickable();
		}
		switch(settings.getHoverSetting()){
			case "hs":
				speed = 2500;
			case "hf":
				speed = speed || 1300;
				$(this.gadgetSelector).liveHover(function(){
					if($(this).hasClass(z.quickGadgetSelector)) return false;
		
					z.doState(this,'activated',{id:z.getOutfitID(this)});
				},function(){},{on:speed});
		}*/

	},
	clickable:function(){
		var z = this;
		$(z.gadgetSelector).live('click',function(){
			z.doState(this,'activated',{id:z.getOutfitID(this)});
			$(this).removeClass('jq-hover');//cancels any hover state triggers that have not been fired yet
			return false;
		});
	},
	getOutfitID:function(el){
		var node = this.getNode(el);
		return $(node).find("input[name=styleID]").val();
	},
	ears:function(){
		var z = this;
		//z.listen('popupSettings.state.settingChanged',function(el,key,data){
		//	z.hoverable();//reset hoverable
		//});
	}
};

myshape.gadgets.outfitPopup = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.outfitPopup();
	} else {
		this.init();
		return this;
	}
};

myshape.gadgets.outfitPopup.prototype = {
	gadgetSelector:".outfit-detail-popup",
	activeSelector:".outfit-detail-popup.active",
	styleNodeSelector:".outfit-component",
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);

		z.escapeCloseable();
		z.closeable();
		z.imageZoomable();
		z.tabsClickable();
		z.componentAddToBagable();
		z.stylesPoppable();
		z.addToBagable();

		z.colorSizeGadget = myshape.getGadget('colorSizePicker');

		z.ears();
	},
	ears:function(){
		var z = this;
		z.listen('outfit.state.activated',function(el,key,data){
			z.open(data.data.id,el);
		});
		z.listen('stylePopup.state.beforeOpen',function(el,key,data){
			z.close();
		});
	},
	states:{
		node:function(){},
		building:function(el,oldState,data){
			var z = this;

			var outfitData = data;

			var src = myshape.util.imagePath('large',outfitData.image);
			var zoomSrc = myshape.util.imagePath('zoom',outfitData.image);

			//this.imageGadget.load(el,src,zoomSrc);

			$(el).find(".zoomable-image-gadget").dataset('zoomsrc',zoomSrc).find('img').attr('src',src);

			var desc = '<span style="text-align:center;color:#d4d4d4;">No description available at this time.</span>';

			if(outfitData.description){
				if(outfitData.description.length){
					desc = outfitData.description;
				}
			}

			$(el).find(".outfit-text.holder").html(desc);
			$(el).find(".style-id.holder").html(outfitData.styleID);
			
			var styleCont = $(el).find(".tab-content.styles .components")[0];
			var template = $(styleCont).find(".line-item.outfit-component")[0];

			$(styleCont).html("");

			$.each(outfitData.components,function(k,v){
				if(v.colors && v.colors[v.defaultColor]){

					var node = $(template).clone()[0];

					z.colorSizeGadget.build(node,v);
					$(node).find(".designer-name").html(v.designer);
					var price = myshape.util.money(v.price) || '';
					if(v.salePrice){
						var priceHolder = $(node).find(".sale-price-holder").show()[0];
						$(priceHolder).find("strike").html('$'+price.split('.')[0]);
						$(priceHolder).find(".sale-price").html('$'+myshape.util.money(v.salePrice));
						price = '';
					} else {
							price = '$'+price.split('.')[0];
					}
					$(node).find(".price-holder").eq(0).html(price);

					$(node).find("img").attr('src',myshape.util.imagePath('browse',v.image));
					$(node).find("input[name=styleID]").val(v.id);
					$(node).appendTo(styleCont);

				}
			});

			z.colorSizeGadget.activateSelectables(el);

			z.activateScrollable(el);
			
			return true;// i am run only when i get the inital data
		},
		fromCache:function(el){

			//this.imageGadget.reload(el);
			this.colorSizeGadget.activateSelectables(el);
			this.activateScrollable(el);
			return true;
		},
		opened:function(el,oldState,data){
			$(el).css({opacity:''});//there seems to be a bug where the popup sometimes does not finish fading in
			return true;// i am run every time i become visible even if i have not been loaded yet
		},
		beforeOpen:function(el){
			return true;//self documenting
		},
		errored:function(){
			return true;
		}
	},
	stylesPoppable:function(){
		var z = this;
		$(this.gadgetSelector+" .outfit-component img").live('click',function(){
			var imageColor = myshape.util.colorFromSrc($(this).attr('src'));
			myshape.getGadget('stylePopup').showPopupFromData({styleID:$(this).parents(".outfit-component").find("input").val(),color:imageColor});
			return false;
		});
	},
	imageZoomable:function(){
		$(this.gadgetSelector+" .zoomable-image-gadget").liveHoverZoom(function(ev,conf){
			$(conf.zoomtarget).next().hide();
			$(conf.zoomtarget).show();
		},function(ev,conf){
			$(conf.zoomtarget).hide();
			$(conf.zoomtarget).next().show();
		},{zoomtarget:this.activeSelector+" .zoom-target",zoomloading:function(){
			return $("<div>").html(myshape.util.loadingImage()+' loading...')[0];
		}});
	},
	popLocked:false,
	escapeCloseable:function(){
		var z = this;
		$(window).bind('keypress',function(ev){
			if(ev.keyCode == 27){
				z.close();
			}
		});
	},
	hoverable:function(){
		/*var z = this;
		$(this.gadgetSelector).liveHover(function(){},function(){
			if(!z.popLocked){
				z.close();
			}
		},{off:900});*/
	},
	closeable:function(){
		var z = this;
		$(this.gadgetSelector+" .close-link").live('click',function(){
			z.close();
			return false;
		});
	},
	tabsClickable:function(){
		var z = this;
		$(this.gadgetSelector+" .tab a").live('click',function(){
			var tab = $(this).parents(".tab")[0];
			if(!$(tab).hasClass('active')){
				var node = z.getNode(this);
				var tabHolder = $(node).find(".tab-holder");

				$(tabHolder).find(".tab").removeClass('active');

				$(tab).addClass('active');

				var parts = $(this).attr('href').split('#');
				var cls = parts[1] || '';

				var tabs = $(node).find(".tab-content");

				if(cls){
					//check for tabs that are only supposed to show up if na particular tab is selected
					$(tabHolder).find(".conditional-tab").hide().filter(".tab-"+cls).show();
				}

				$(tabs).removeClass('active');
				var tabContent = $(node).find(".tab-content."+cls)[0];

				$(tabContent).addClass('active');

				$(node).windowUncolide();
			}
			return false;
		});
	},
	cache:{},
	currentPopup:false,
	open:function(id,el){

		var z = this;
		var template;
		var cached = false;
		if(!z.isCached(id)){
			template = z.buildTemplate(id);
		} else {
			cached = true;
			template = z.getFromCache(id);
		}

		//this is ugly but i need to get the dims of the passed element before the "beforeOpen" state change
		var dims = {x:0,y:0};
		if(el){
			var dims = $(el).getDims();
		}

		z.close();
		//set the current popup and flag all created popups as "active" meaning not the orig hidden template
		z.currentPopup = $(template).addClass('active')[0];

		z.doState(this,'beforeOpen');

		$.overlay('create',function(){
			z.close();
		});

		//this is a hack because the overlay hides select boxes for ie6 users as they poke through the overlay
		$(template).appendTo($("body")[0]).find("select").css('visibility','visible');

		$(template).hide().css({zIndex:1000}).fadeIn('fast',function(){
			$(this).center(window);
			if(cached){
				z.doState(this,'prepare');
			}
			z.doState(this,'opened');
		});

		//if(el){
		//	$(template).top(dims.y).left(dims.x);
		//} else {
			$(template).center(window);
			
		//}

	},
	close:function(){
		if(this.currentPopup){
			$.overlay('remove');
			$(this.currentPopup).remove();
			this.currentPopup = null;
		}
	},
	getFromCache:function(id){
		if(this.isCached(id)){
			var template = this.cache[id];
			//this.stopLoading(template); should already be stopped
			template = $(template).clone(true)[0];
			this.doState(template,'fromCache');
			return template;
		}
		return false;
	},
	isCached:function(id){
		return this.cache[id]?true:false;
	},
	buildTemplate:function(id){
		var z = this;
		var template = this.getTemplate();

		z.startLoading(template);

		myshape.ajax.getOutfitDetails(id,function(data){
			var uncolide = 0;
			if(!data.error){
				z.doState(template,'building',data.data);
				z.stopLoading(template);
				uncolide = 1;
			} else {
				z.doState(template,'errored',data);
				$(template).find(".loading").html('error loading outfit: '+data.error);
			}
			z.cache[id] = $(template).clone(true)[0];
			if(uncolide) {
				$(template).windowUncolide();
			}
		});

		return template;
	},
	getTemplate:function(){
		return $("#outfit-detail-popup-template "+this.gadgetSelector).clone()[0];
	},
	activateScrollable:function(node){
		scrollableCont = $(node).find(".tab-content.styles").jToolsScrollable({
			disabledClass:'scroll-nav-disabled',
			clickable:false,
			items:".components",
			size:3
		})[0];

		if($(scrollableCont).find(".line-item").length > 3){
			$(scrollableCont).find(".next").removeClass('scroll-nav-disabled');
		}
	},
	startLoading:function(template){
		$(template).find(".loading").show().find(".loading-image").html(myshape.util.loadingImage());
		$(template).find(".popup-content").hide();
	},
	stopLoading:function(template){
		$(template).find(".loading").hide();
		$(template).find(".popup-content").show();
	},
	addToBagable:function(el){
		var z = this;
		$(z.gadgetSelector+" .add-mybag").live('click',function(){
			z.addToBag(z.getNode(this));
		});
	},
	componentAddToBagable:function(){
		$(this.gadgetSelector+" input.add-single-mybag").live('click',function(){
			var z = this;
			if($(z).hasClass('pending-request')) return;

			var comp = $(z).parents(".outfit-component")[0];
			var colorSize = myshape.getGadget('colorSizePicker').getColorSize(comp);
			var styleID = $(comp).find("input[name=styleID]").val();
			if(colorSize.color && colorSize.size){

				
				var loadingBox = $(myshape.util.loadingImage()).insertAfter(z)[0];

				//this logic is duplicated from the style pop!
				$(z).addClass('pending-request')
				myshape.ajax.addToBag(styleID,colorSize.color,colorSize.size,1,function(data){
					$(loadingBox).remove();
					$(z).removeClass('pending-request');
					if(data.error){
						$(z).fadeBox("<div style='background:#fff;padding:5px;font-weight:bold;color:#999;' class='error-border'>"+data.error+"</div>");
					} else {
						if (data.redirectTo) {
							if(window.stopUnload)stopUnload();
							location.href = data.redirectTo;
						} else {
							myshape.getGadget('bag').updateCounter(data.data.cartCount);
							$(z).fadeBox("<div style='background:#fff;padding:5px;font-weight:bold; border:1px solid green;color:#999;'>This item has been added to your bag</div>");
						}
					}
				});
			} else {
				$(this).fadeBox("<div style='background:#fff;padding:5px;font-weight:bold;color:#999;' class='error-border'>Please select a color and size before adding to bag.</div>");
			}
		});
	},
	addToBag:function(node){
		var z = this;
		var styles = [];
	 	var components = {};
		var error = 0;
		$(node).find(".outfit-component").each(function(){
			var styleID = $(this).find("input[name=styleID]").val();
			var colorSize = z.colorSizeGadget.getColorSize(this);
			components[styleID] = {component:this, error:true};
			if(colorSize.color && colorSize.size){
				styles[styles.length] =	styleID +','+(colorSize.color || '')+','+(colorSize.size || '');
			} else {
				$(this).find('select').not(":disabled").each(function(){
					if(!$(this).val() || !$(this).val().length){
						$(this).addClass('error-border');
					}
				});
				error++;
			}
				
		});
		var bag = $(node).find(".add-mybag")[0];
		if(styles.length && !error){
			if(!$(bag).hasClass('loading')){

				$(bag).addClass('loading');
				var loader = $(myshape.util.loadingImage()).insertBefore(bag)[0];

				myshape.ajax.addManyToBag(styles,function(data){
					if(data.data.push) data = data.data;
					if(loader){
						$(loader).remove();
					}
					$(bag).removeClass('loading');

					var maxCount = 0;
					$.each(data,function(k,response){
						var obj = response.data;
						var styleID = false;

						if(obj.item){
							styleID = obj.item.styleID;
						} else if (response.style) {
							styleID = response.style;
						} else if(response.currentStyle.split(',')[0].length > 0){
							styleID = response.currentStyle.split(',')[0];
						}

						if(obj.cartCount > maxCount){
							maxCount = obj.cartCount;
						}

						if(styleID){
							var component = $(node).find("input[value="+styleID+"]").parents(".outfit-component")[0];
							if(component){
								if(!response.error){
									components[styleID].error = false;
								} else {
									components[styleID].error = response.error;
								}
							}
						}
					});

					myshape.getGadget('bag').updateCounter(maxCount);

					var message = z._addToBagMessage(components);

					$(bag).fadeBox(message,6000,node);

				});
			}

		} else {
			var msg = '';

			if(styles.length >= 0){
				msg = "Some items in this outfit could not be added to your bag.";
			} else {
				msg = "The items in this outfit could not be added to your bag.";
			}
			msg = msg+" Please check size of items outlined in red."
			$(bag).fadeBox(myshape.util.errorBox(msg),8000,node);
		}
	},
	_addToBagMessage:function(components){
		var message = "",error = [],noerrored = 0;
		$.each(components, function(styleID, data){
			if(data.error){
				error.push(data.error);
				$(data.component).find('select').not(":disabled").addClass('error-border');
			} else {
				noerrored++;
			}
		});
		
		if(error.length){
			message = error.length+" of the items in this outfit just sold out in the size selected. Refresh to update availabillity.";
			message = myshape.util.errorBox(message);

		} else {
			message = myshape.util.successBox("Ouftit was added to bag");
		}
		return message;
	},
	//TODO
	selectTab:function(el,tab){
		var node = this.getNode(el);

	}
};

myshape.gadgets.searchBox = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.searchBox();
	} else {
		this.init();
		return this;
	}
}

myshape.gadgets.searchBox.prototype = {
	searchRedirect:true,//set this to true to make it so the top search box redirects to the search page
	gadgetSelector:"#style-search",
	defaultText:"search...",
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);

		z.activateWatermark();
		z.submitable();

		z.ears();

		z.checkHash();
	},
	loading:false,
	checkHash:function(){
		var hash = location.hash;
		if(hash.length){
			hash = hash.substr(1);//remove #
			queryString = myshape.util.parseQueryString(hash);
			if(queryString.search){
				var styleID = queryString.search;

				/*/remove search key from the queryString object
				delete queryString.search;
				queryString = $.param(queryString);
				//update the hash without the queryString
				location.hash = "#"+(queryString || '');*/

				if(styleID.length){
					$(this.gadgetSelector).val(styleID);
					this.doSearch(styleID);
				}
			}
		}
	},
	ears:function(){
		var z = this;

		var errorDetected = function(el,key,data){
			if(z.loading){
				myshape.getGadget(z.loading).close();
				z.loading = false;
				if(data.data.error){
					z.showError(data.data.error);
				} else {
					z.showError('Unknown error processing ID');
				}
			}
		};

		var loadingOff = function(el,key,data){
			z.loading = false;
		};

		z.listen('stylePopup.state.errored',errorDetected);
		z.listen('outfitPopup.state.errored',errorDetected);

		z.listen('stylePopup.state.opened',loadingOff);
		z.listen('outfitPopup.state.opened',loadingOff);
	},
	activateWatermark:function(){
		$(this.getInput()).watermark(this.defaultText);
	},
	submitable:function(){
		var z = this;
		$(this.gadgetSelector).submit(function(){
			try{
				var val = $(z.getInput()).val();
				if(val != z.defaultText && val != ''){
					z.doSearch(val);
				}
			}catch(e){
				console.error(e);
			};
			return false;
		});

	},
	states:{
		node:function(){return true}
	},
	doSearch:function(val){
		this.loading = false;
		val = $.trim(val);
		if(this.isStyleID(val)){
			this.loading = 'stylePopup';
			myshape.getGadget('stylePopup').showPopupFromData({styleID:val});
		} else if(this.isOutfitID(val)){
			this.loading = 'outfitPopup';
			myshape.getGadget('outfitPopup').open(val);
		} else {
			if(this.searchRedirect){
				if(window.stopUnload)stopUnload();
				location.href = "/shop/search?q="+escape(val);
				return;
			} else {
				this.showError('invalid outfit or style ID');
			}
		}
		if(this.loading){
			$(this.getInput()).val('').blur();
		}
	},
	getInput:function(){
		return $(this.gadgetSelector+" input[type=text]")[0];
	},
	setVal:function(val){
		$(this.getInput()).val(val || '').blur();
	},
	showError:function(msg){
		$(this.getInput()).fadeBox(myshape.util.errorBox(msg));
	},
	isStyleID:function(val){
		//added support for negative style ids even tho it may be a non issue
		return /^-?\d+$/.test(val);
	},
	isOutfitID:function(val){
		return /^[a-zA-Z].\d+$/.test(val);
	}
};

myshape.gadgets.baynote = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.baynote();
	} else {
		this.init();
		return this;
	}
}

myshape.gadgets.baynote.prototype = {
	gadgetSelector:"",//maybe this should be the selector for the bn rec cont in the popup
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);

		z.getBaynoteUser(function(data){});

		z.ears();
	},
	ears:function(){
		var z = this;
		//style popup opened
		z.listen('stylePopup.state.opened',function(el,key,data){
			var styleID = data.object.getStyleIDFromPopup(el);
			if(styleID){
				z.viewOpen(styleID);
			}
		});

		//style popup closed
		z.listen('stylePopup.state.closed',function(el,key,data){
			z.viewClosed();
		});

		z.listen('stylePopup.state.mostViewedClicked',function(el,key,data){
			var fromStyleID = data.object.getStyleIDFromPopup(el);
			if(data.data) data = data.data;
			if(fromStyleID && data.styleID && data.guide){
				z.viewRecommendedClicked(fromStyleID,data.styleID,data.guide,data.rank || 1);
			}
		});
	},
	policyGenerator:'/modules/thirdparty/baynote/policyrest.php',
	policyCookieName:'mysbnup',
	userPolicy:false,
	userPolicyCallbacks:[],
	gettingUserPolicy:false,
	getBaynoteUser:function(cb){
		var z = this;
		if(!z.userPolicy){
			var jsonString = myshape.util.readCookie(this.policyCookieName);
			if(jsonString){
				try{
					eval('z.userPolicy = '+$.trim(unescape(jsonString)));
				} catch(e){
					$.logWarn('failed to eval json from baynote cookie!',e);
				}
			}
		}

		if(!z.userPolicy){
			z.userPolicyCallbacks.push(cb);
			if(!z.gettingUserPolicy){
				z.gettingUserPolicy = true;
				$.getJSON(z.policyGenerator+'?callback=?',{},function(data){
					z.gettingUserPolicy = false;
					$.each(z.userPolicyCallbacks,function(k,v){
						v(data);
						delete z.userPolicyCallbacks[k];
					});
				});
			}
		} else {
			cb(z.userPolicy);
		}

		return this;
	},
	//hold the data related to the style here
	interactionData:false,
	//this time will wait 
	lingerTimer:false,
	viewOpen:function(styleID){
		var z = this;
		z.baynoteObserver('v',styleID,function(url){});
		/*z.eventRest('v',styleID,function(url){
			//alert("baynote request:",styleID,url);
		});*/
		clearTimeout(z.lingerTimer);
		var totalLingerMS = (z.userPolicy.policy.dt-5)*1000;
		z.lingerTimer = setTimeout(function(){
			z.viewLingered(styleID);
		},totalLingerMS);
	},
	viewLingered:function(styleID){
		this.baynoteObserver('l',styleID,function(url){});
		/*this.eventRest('l',styleID,function(url){
			//alert("baynote request");
		});*/
	},
	viewClosed:function(){
		clearTimeout(this.lingerTimer);
	},
	viewClicked:function(){
/*
code	www
customerId	myshape
fmt	1
len	234
msg	{"a":"c","c":"d&g&s","d":"http://myshape.lhj.com/shop/productview/22411","r":"http://myshape.lhj.com/shop/productview/22438","t":1253573804419,"u":"6922529527074121199","dd":"javascript://","de":{"ti":"myShape.com","nw":954,"nl":143}}
msgId	4
*/
	},
	viewRecommendedClicked:function(fromStyleID,styleID,guideType,rank){
		this.baynoteObserver({
			a:'c',
			d:'http:/'+'/www.myshape.com/shop/productview/'+fromStyleID,
			dd:'http:/'+'/www.myshape.com/shop/productview/'+styleID,
			gt:'ProductGuide',
			gr:guideType,
			rb:rank
		},styleID,function(){});
	},
	saleMade:function(order_id,total){
		
		this.baynoteObserver({
			a:'v',
			d:location.href,
			r:'',
			at:{
				totalPurchases:((total?total:1)+"").replace(/[^\d.]/g,''),
				purchaseId:(order_id?order_id:new Date().getTime())+""
			}
		},0,function(){});
	},
	//### baynote api interaction methods ###########################
	//use baynote api in event rest mode
	eventRest:function(action,styleID,callback){
		var z = this;
		var params = this.baynoteParams(action,styleID);
		//params.key = this call is inactive because it is considered a security risk to have the api key in plain text;
		var url = "http:/"+"/myshape-www.baynote.net/baynote/eventrest?"+$.param(params)+"&v=1";
		this.imageRequest(url,function(){callback.call(this,url,params)});
	},
	//use original services via baynoteListener api
	baynoteObserverMsgID:0,
	baynoteObserver:function(action,styleID,callback){
		var moreParams = false;
		if(typeof action == 'object'){
			moreParams = action;
			action = moreParams.a;
		}
		var msg = this.jsonString(this.baynoteParams(action,styleID,moreParams));
		var params = {
			code:'www',
			customerId:'myshape',
			fmt:1,
			len:msg.length,
			msg:msg,
			msgId:this.baynoteObserverMsgID++
		};

		var url = "http:/"+"/myshape-www.baynote.net/baynote/tags2/baynoteObserver/listener2?"+$.param(params);
		this.imageRequest(url,function(){callback.call(this,url,params)});
	},
	//### baynote utility api methods
	baynoteParams:function(action,styleID,moreParams){
		var user = this.userPolicy;
		var params = {
			a:action || 'v',//v,l,c
			customerId:'myshape',
			code:'www',
			//fake url so we dont have to reconfigure the "guide" results
			d:(styleID?"http:/"+"/www.myshape.com/product_info.php?style_id="+styleID:location.href),
			//referring domain
			r:window.location.href,
			t:new Date().getTime(),
			c:user.policy.cd,
			u:user.policy.userId,
			format:'json'
		};
		//if im lingering i know that i want to set the required linger time which is logically always > the linger time specified in the policy
		if(action == 'l'){
			params.du = user.policy.dt+1;
		}

		if(moreParams){
			params = $.extend(params,moreParams);
		}

		return params;
	},
	//write only IO method
	imageRequest:function(url,callback){
		var img = new Image();
		var done = function(){
			callback.apply(this,arguments);
		 	delete img;
		};
		$(img).bind('load',done).bind('error',done);
		img.src = url;
	},
	//really basic json stringify function
	jsonString:function(obj){
		return myshape.util.jsonString(obj);
	}
}


//http://local.myshape.com/shop/style/201125
/*
myshape.gadgets.browseReturnScroll = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.browseReturnScroll();
	} else {
		this.init();
		return this;
	}
}

myshape.gadgets.browseReturnScroll.prototype = {
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
	},
	ears:function(){
		z.listen('viewHistory.state.browseHit',function(el,key,data){
			var h = myshape.getGadget('viewHistory');
			browse = h.getHistory().browse;
			if(browse.top) {
				window.scroll(0,browse.top);
			}
		});
	},
	states:{
		node:function(){}
	}
};

myshape.gadgets.viewHistory = function(){
	if(typeof(this.init) !== 'function'){
		return new myshape.gadgets.viewHistory();
	} else {
		this.init();
		return this;
	}
}

myshape.gadgets.viewHistory.prototype = {
	init:function(){
		var z = this;
		z.inherit = myshape.gadget.inherit;
		z.inherit(myshape.gadget);
		
		z.updateStyleHistory();
	},
	updateStyleHistory:function(){
		var z = this, style_id,s_p,b_p;
		//store if last page was a style page
		b_p = this.isBrowsePage();
		s_p = this.isStylePage();
		if(!b_p && !s_p){
			this.clearHistory();
		} else if(s_p) {
			//i would probably start logging for a breadcrumb of styles here
		} else if(b_p) {
			//check if this is the last browse page visited and if view all is enabled
			var qs = myshape.util.parseQueryString(location.search);
			if(qs.all){
				//i am totally view all!
				var h = z.getHistory();
				if(h.browse) {
					if(h.browse.url == location.host+'/'+location.pathname){
						z.doState({},'browseHit',h.browse);
					}
				}
			}
		}
	},
	states:{
		node:function(){},
		browseHit:function(){
			return true;
		}
	},
	isStylePage:function(){
		var style_id=0;
		var matches = window.location.href.match(/\/shop\/style\/([0-9]+)/);
		if(matches){
			if(matches[1]) style_id = +matches[1];
		}
		return style_id;
	},
	isBrowsePage:function(){
		return $(".browse-seperates-container").length;
	},
	setBrowseChunk:function(chunk,top){
		console.log('setchunk',top,chunk);
		var h = this.getHistory();
		if(!h.browse) h.browse = {};
		h.browse.url = location.host+'/'+location.pathname;
		h.browse.chunk = chunk;
		h.browse.top = top;
		this.saveHistory(h);
	},
	defaultHistory:{browse:{uri:'',chunk:0,top:0}},
	getHistory:function(){
		var data;
		if(window.localStorage){
			data = window.localStorage.styleHistory;
		} else {
			data = myshape.util.readCookie('msh');
		}
		try{
			return JSON.parse(data || '{}');
		}catch(e){
			this.clearHistory();
			return {};
		}
	},
	clearHistory:function(){
		this.saveHistory(this.defaultHistory);
	},
	saveHistory:function(data){
		try{
		data = JSON.stringify(data);
		}catch(e){
			data = '{}';
		}
		if(window.localStorage){
			window.localStorage.styleHistory = data;
		} else {
			myshape.util.createCookie('msh',data,30);
		}
	}
}*/
myshape.apps = {
	thumbs:{
		init:function(){
			if(this.shouldActivate()){
				this.hoverActivate();
				this.iconsClickable();
			}
		},
		hoverActivate:function(){
			var z = this;
			$(".product").liveHover(function(){
				z.showIcons(this);
			},function(){
				z.hideIcons(this);
			});
		},
		iconsClickable:function(){
			$(".like-icon").live('click',function(){
				var like = +$(this).dataset('value');
				var product = $(this).parents(".product");
				if(!like){
					product.fadeOut(function(){
						$(this).remove();
						$(".like-icon").remove();//repositioning required for all icons
					});
				} else {
					product.find("img").eq(0).css({border:'1px solid green'});
				}
				myshape.ajax.likeStyle({like:like,style_id:$(product).find("input[name=styleID]").val()},function(data){$.log(data)});
			});
		},
		showIcons:function(product){
			product = $(product);
			var icons = product.find(".like-icon");
			if(!icons.length){
				var like = this.getLikeIcon();
				var dislike = this.getDislikeIcon();
				product.append(like).append(dislike);
				icons = product.find(".like-icon");
				var imgCont = product.find(".browse-style-image-container"); 
				
				var center = imgCont.center();
				var dims = imgCont.getDims();
				var offsetDims = like.offsetParent().getDims();

				like.top(center.y-offsetDims.y);
				like.left(dims.x-offsetDims.x);
				dislike.top(center.y-offsetDims.y);
				dislike.left(((dims.x-offsetDims.x)+dims.w)-$(dislike).width());
			}
			icons.show();
		},
		hideIcons:function(product){
			$(product).find(".like-icon").hide();
		},
		getLikeIcon:function(){
			var ie6 = ($.browser.version < 7 && $.browser.msie);
			return $("<div>").addClass('like-icon').css(this.iconCss({background:'transparent url(/static/modules/shop/tpl/default/images/thumb-up40'+(ie6?'_ie6':'')+'.png)'})).dataset('value',1);
		},
		getDislikeIcon:function(){
			var ie6 = ($.browser.version < 7 && $.browser.msie);
			return $("<div>").addClass('like-icon').css(this.iconCss({background:'transparent url(/static/modules/shop/tpl/default/images/thumb-down40'+(ie6?'_ie6':'')+'.png)'})).dataset('value',0);
		},
		iconCss:function(more){
			return $.extend({width:'33px',height:'40px',fontWeight:'bold',color:'#fff',cursor:'pointer'},more);
		},
		shouldActivate:function(){
			if(location.search.length){
				var obj = myshape.util.parseQueryString(location.search);
				if(obj.thumbs){
					myshape.util.createCookie('show_thumb',1,5);
					return true;
				} else if (typeof(obj.thumbs) != "undefined") {
					myshape.util.eraseCookie('show_thumb');
				}
			}
			if(myshape.util.readCookie('show_thumb')) return true;
			
			return false;
		}
	}
};

//default gadget inits
$(function(){
	//myshape.getGadget('gadgetTalkDebug');
	myshape.getGadget('style');
	myshape.getGadget('stylePopup');

	//myshape.getGadget('viewHistory');
	//myshape.getGadget('browseReturnScroll');
	
	myshape.getGadget('outfit');
	myshape.getGadget('outfitPopup');

	myshape.getGadget('searchBox');
	myshape.getGadget('liveChat');
	myshape.getGadget('textRoll');
	myshape.getGadget('bag');

	myshape.apps.thumbs.init();

	var utmz = myshape.util.readCookie('__utmz');
	if(utmz && utmz.length && !(myshape.util.readCookie('utmz_fix')||'').length){
		setTimeout(function(){
			var edited = 0;
			for(var l=utmz.length;l>0;l--){
				var char = utmz.charAt(l-1);
				var code = utmz.charCodeAt(l-1);
				if(code < 32){
					utmz.replace(code,'');
					edited = 1;
					console.log(char,code,String.fromCharCode(code));
				}
			}
			
			if(edited){
				myshape.util.createCookie('__utmz',utmz,10);
				myshape.util.createCookie('utmz_fix','1',20);
				myshape.util.googleEvent('utmz_fix','fixed','wooo',myshape.util.readCookie('id'));
			}
		},0);
	}
});
/**************************/