var cookie = GetCookie('gridstate'); 
	   var viewContent = $('#content');
	   
	   var numberofproductsonstage;
	      //initialy hides views with an display none on #viewContent on the product details .aspx
		$('div.item').each(function(i){								
				 
				numberofproductsonstage = i;
				

			})
			function loadsliderControls(){
			
				$(function() {
					//vars
					var conveyor = $(".content-conveyor", $(".sliderContent")),
					item = $(".item", $(".sliderContent"));
					
					//set length of conveyor
					conveyor.css("width", (item.length + 3) * parseInt(item.css("width")) + item.length );
							
					//config
					var sliderOpts = {
						max: (item.length * parseInt(item.css("width"))+5) - parseInt($(".viewer", $(".sliderContent")).css("width")),
						slide: function(e, ui) { 
							conveyor.css("left", "-" + ui.value + "px");
							 
							} 
			
						};
					//create slider
					$("#slider").slider(sliderOpts);

					//
					
				});
				
				
			}
			
			function loadGrid(){
				createCookie('gridstate', 'grid',1);
				
				 $('#gridCase').addClass('underline');
				 $('#showCase').removeClass('underline');
				 
					viewContent.fadeOut('slow', function() {
						
						//removes class for slider view and adds grid class
						$('#content').removeClass('sliderContent');
						$('#content').addClass('gridContent');
						
						$('.content-conveyor').css('width',968)
							 
							if(numberofproductsonstage <= 2 ){
								 loadSlider('grid');
							} 
						$('#slider').slider('destroy');
						viewContent.css("display","none");
						viewContent.fadeIn('slow');
						
					});
					
			}
			function loadSlider(who){
					if(who != "grid"){createCookie('gridstate', 'slider',1)}
					$('#showCase').addClass('underline');
					$('#gridCase').removeClass('underline');
					
					 
					
					viewContent.fadeOut('slow', function() {
						viewContent.css("display","none");
						//removes class for grid view and adds slider class
						$('#content').removeClass('gridContent');
						$('#content').addClass('sliderContent');
						
						$('.content-conveyor').css("left",0)
							//loops through and switches views
							
							
							//this checks if it is less then three and removes scrolling
							if(numberofproductsonstage <= 2 ){
								$('#slider').css("display","none");
								$('.scrollToView').css("display","none");
								 
								$('#sidefade_left').css("display","none");
								$('#sidefade_right').css("display","none");
								$('#switchviews').css("display","none");
							} 
							
						//loads in the slider control
						loadsliderControls();
						//fades in the content
						viewContent.fadeIn('slow');
						
					});		
					
					
			}
			//this is for the rollover effect of the switch view btn
			$('.hoverswitch').hover(
				function() { 
					 $(this).addClass('switchviewsHover');
					
				}, 
				function() {
					  $(this).removeClass('switchviewsHover');
				}
			);
			function switchview(){
				if($('#content').is('.gridContent')){
					loadSlider(null);
					
				}else{
				
					loadGrid();
					$('.mainLiveImage:above-the-fold').trigger("appear");
					
				}
			
			}
			
			function loaderLazy(){
			 
					 
				 $(".mainLiveImage:below-the-fold").lazyload({ placeholder : "/images/wait.gif",  effect : "fadeIn"});
			}
			
			//this is for the rollover effect of the viewSwitcher ™
			

			
			
			//make sure if loading loadSlider(); first it is second in the toggle function or vis versa
			//toggle between views
			$('#switchviews').click(function () { 
			 switchview();
			});
			 
			//loads in first view if switched please switch toggle function
			if(document.getElementById('ErrorMsg')){
			
				$('#errornoproduct').fadeIn('slow');
			
			
			
			}else{
				 
				 
				if(cookie == 'slider'){
				
					loadSlider(null);
					
				
				}else{
					loadGrid()
					
					
					
				}
				
				loaderLazy()

			}
			
			$(document).ready(function() {
				 $(".item").each(function () {
					varclrcode = $(this).find('.mainLiveImage').attr("xcolorcode").toLowerCase();
					$(this).find('.swatch .'+ varclrcode).addClass('borderSwatch');
				});
				//Guarantees to loads first two
					$('.indexitem1 .mainLiveImage, .indexitem0 .mainLiveImage').trigger("appear");
			});