//////////////////////////////////////
// TOUT SUGGESTIONS                 // 
//////////////////////////////////////

function suggestionsDefault() {
	
		//assets
		var targetPict = $('suggestedImage');
		var targetItem = $('SuggestedItemContainer');
		var url = "/index.cfm?event=product.GetCategoryTouts&category=DuckHunter";
		//var url = "toutStub.cfm?category=duckHunting";
		var defaultRequest = new Json.Remote(url, {
			onRequest: function(){
				targetPict.empty();
				targetItem.empty();
			},
			onComplete: function(jsonObj){
				defaultRequest = jsonObj;
				
				var newImageAsset = new Asset.images(["resources/images/embed/suggested_duckHunter.gif", SCENE7URL+"/is/image/BuckKnives/gftSelectorTall3?$gftSharpTall$&$knife=is%7BBuckKnives/"+defaultRequest.data.IMAGENAME[0]+"_1?scl=1%7D"]);
				
				//var newItemText = '<h3>'+defaultRequest.data.PRODUCTNAME[0]+'<a href="/index.cfm?event=product.detail&amp;productID='+defaultRequest.data.PRODUCTID[0]+'">view details</a></h3>';
				
				
				newImageAsset[0].injectInside(targetPict);
				newImageAsset[1].injectInside(targetItem);
// first instance //
				
				targetItem.getFirst().setStyle('cursor','pointer');	
				var newItemText = new Element('h3');
				newItemText.injectAfter(targetItem.getFirst());
				newItemText.setHTML(defaultRequest.data.PRODUCTNAME[0]+'<a href="/index.cfm?event=product.detail&amp;productID='+defaultRequest.data.PRODUCTID[0]+'">view details</a>');
				targetItem.getFirst().addEvent('click', function(){
					window.location.href = "/index.cfm?event=product.detail&productID="+defaultRequest.data.PRODUCTID[i];
				})
				// initiate navigation
				swapItems(defaultRequest)
			}
		}).send(defaultRequest); 

}Onload.add(suggestionsDefault);


function suggestionsDropdown(){
	if($('dropTitle')){
		var request;
		var test;
		var btn = $('dropTitle');
		var target = btn.getNext();
		var contents = target.getChildren();
		var	slide = new Fx.Slide(target, {hide:true, duration:90,wait:true, transition: Fx.Transitions.linear,
			onStart:function(){
				btn.toggleClass('expanded');
			},	
			onComplete:function(){
				// nothing yet
			}
		}).hide();
		
		$('suggestedDropdown').addEvent('mouseleave', function(e){
			e = new Event(e);
			slide.slideOut();
			e.stop();
		});
		
		btn.addEvent('click', function(e){
			e = new Event(e);
			slide.toggle();
			e.stop();
		});
		contents.each(function(el){
			el.cloneEvents(btn);
			el.addEvent('click',function(){
				if(this.innerHTML == 'MORE IDEAS'){ 
					// go somewhere else
				}else {
					btn.getFirst().innerHTML = this.innerHTML;
					var updateCat = el.id;
					// change up contents, first fade out/in image, then fade out/in new item sequence
					var target = $('suggestedImage'); 
					var newImageAsset = new Asset.image('resources/images/embed/suggested_'+updateCat+'.gif', {id: 'newImg'});
					var request;
					var imageFadeOut = new Fx.Styles($('suggestedImage'), {duration:250,wait:true, transition: Fx.Transitions.Quad.easeIn,
						onStart:function(){
							var url = '/index.cfm?event=product.GetCategoryTouts&category='+updateCat;
			 				request = new Json.Remote(url, {
								onRequest: function(){
									//nothing yet
								},
								onComplete: function(jsonObj){
									request = jsonObj;
								}
							}).send(request); 
						},
						
						onComplete:function(){
							// update asset and fade back into view //
							target.empty();
							newImageAsset.injectInside(target);
							imageFadeIn.start({
								'opacity':[0,1]
							});
						}
					
					});
					
					var itemContainer = $('SuggestedItemContainer');
					var itemFadeIn = new Fx.Styles(itemContainer, {duration:250,wait:true, transition: Fx.Transitions.Quad.easeIn,
						onComplete:function(){
							if(request.data.IMAGENAME.length > 0){
								swapItems(request);
							} else {
								$('SuggestedItemContainer').empty();
								$('SuggestedItemController').setStyle('opacity','0');
								var error = new Element('h1', {'id':'error','styles':{'font-size':'12px','margin-left':'20px'}});
								error.injectInside($('suggestedImage'))
								error.setText('Please try selection again.');
							}
						}
					});
					var itemFadeOut = new Fx.Styles(itemContainer, {duration:250,wait:true, transition: Fx.Transitions.Quad.easeIn,
						onComplete:function(){
							itemContainer.empty();
// second instance //
				var newItemPict = new Asset.image(SCENE7URL+"/is/image/BuckKnives/gftSelectorTall3?$gftSharpTall$&$knife=is%7BBuckKnives/"+request.data.IMAGENAME[i]+"_1?scl=1%7D");
				newItemPict.injectInside(itemContainer);
				itemContainer.getFirst().setStyle('cursor','pointer');	
				var newItemText = new Element('h3');
				newItemText.injectAfter(itemContainer.getFirst());
				newItemText.setHTML(request.data.PRODUCTNAME[i]+'<a href="/index.cfm?event=product.detail&amp;productID='+request.data.PRODUCTID[i]+'">view details</a>');
//							var newItemPict = new Asset.image("http://s7d3.scene7.com/is/image/BuckKnives/giftSelector?$gftSharp$&$knife=is%7BBuckKnives/"+request.data.IMAGENAME[0]+"_1?scl=1%7D");
//							var newItemText = "<h3>"+request.data.PRODUCTNAME[i]+"<a href='/index.cfm?event=product.detail&amp;productID="+request.data.PRODUCTID[i]+"'>view details</a></h3>"							
//							newItemPict.injectInside(itemContainer);
//							itemContainer.innerHTML += newItemText;
							itemContainer.getFirst().addEvent('click', function(){
								window.location.href = "/index.cfm?event=product.detail&productID="+request.data.PRODUCTID[i];
							})
							itemFadeIn.start({
								'opacity':[0,1]
							});
							
						}
					});
					var imageFadeIn = new Fx.Styles($('suggestedImage'), {duration:250,wait:true, transition: Fx.Transitions.Quad.easeIn,
						onComplete:function(){
							// begin fadeIn of item here //
									itemFadeOut.start({'opacity':1});
						}
					});
					imageFadeOut.start({'opacity':0});
				}
			})
		});
	}
}Onload.add(suggestionsDropdown);

function swapItems(request) {
	var i = 0;   
	var next  =  $('sugNext');
	var previous  =  $('sugPrevious');
	next.removeEvents();
	previous.removeEvents();
	var target = $('SuggestedItemContainer');
	var fx = new Fx.Styles($('SuggestedItemContainer'), {duration:250,wait:true, transition: Fx.Transitions.Quad.easeIn,
		onComplete:function(){
			target.empty();
			// third instance //
			var updateImageAsset = new Asset.image(SCENE7URL+"/is/image/BuckKnives/gftSelectorTall3?$gftSharpTall$&$knife=is%7BBuckKnives/"+request.data.IMAGENAME[i]+"_1?scl=1%7D", {id: 'myImage', title: 'myImage'});
			updateImageAsset.injectInside(target);
			target.getFirst().setStyle('cursor','pointer');	
			
			newItemText = new Element('h3');
			newItemText.injectInside(target);
			newItemText.setHTML(request.data.PRODUCTNAME[i]+'<a href="/index.cfm?event=product.detail&amp;productID='+request.data.PRODUCTID[i]+'">view details</a>');
			
			
//			var newText = "<h3>"+request.data.PRODUCTNAME[i]+"<a href='/index.cfm?event=product.detail&amp;productID="+request.data.PRODUCTID[i]+"'>view details</a></h3>"
//			updateImageAsset.injectInside(target);
//			target.getFirst().setStyle('cursor','pointer');
//			target.innerHTML += newText;
			target.getFirst().addEvent('click', function(){
				window.location.href = "/index.cfm?event=product.detail&productID="+request.data.PRODUCTID[i];
			})
			
			var fy = new Fx.Styles($('SuggestedItemContainer'), {duration:250,wait:true, transition: Fx.Transitions.Quad.easeIn});
			fy.start({
				'opacity':[0,1]
			})
			
		}
	});
	var reqLength = request.data.PRODUCTID.length.toInt() - 1;
	if(reqLength <= 0) {
		next.setStyle('display','none');
		previous.setStyle('display','none');
	} else {
		$('SuggestedItemController').setStyle('opacity','1');
		next.setStyles({'display':'block','opacity':1});
		previous.setStyles({'display':'block','opacity':1});
	}
	next.addEvent('click',function(){
		if (i < reqLength) {
			i++;
			fx.start({'opacity':[1,0]})
		} else {
			i = 0;
			fx.start({'opacity':[1,0]})
		}
	})
	previous.addEvent('click',function(){
		if (i == 0) {
			i = reqLength;
			fx.start({'opacity':[1,0]})
		} else {
			i--;
			fx.start({'opacity':[1,0]})
		}
	})
	
}


