// following code is MIT licensed (C) Gary Haran 2007

/**
* Provide the same behavior as window.scrollTo to divs with overflow without removing
* the ability to scroll a page to a given element.
*/
Element.addMethods({
  scrollTo: function(element, left, top){
    var element = $(element);
    if (arguments.length == 1){
      var pos = element.cumulativeOffset();
      window.scrollTo(pos[0], pos[1]);
    } else {
      element.scrollLeft = left;
      element.scrollTop  = top;
    }
    return element;
  }
});

/**
* Effect.Scroll allows you to animate scrolling on a page (or div w/ overflow: scroll || auto)
*/
Effect.Scroll = Class.create();
Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);
    this.start(Object.extend({x: 0, y: 0}, arguments[1] || {}));
  },
  setup: function() {
    var scrollOffsets = (this.element == window) 
                ? document.viewport.getScrollOffsets() 
                : Element._returnOffset(this.element.scrollLeft, this.element.scrollTop) ;
    this.originalScrollLeft = scrollOffsets.left;
    this.originalScrollTop  = scrollOffsets.top;
  },
  update: function(pos) {
    this.element.scrollTo(Math.round(this.options.x * pos + this.originalScrollLeft), Math.round(this.options.y * pos + this.originalScrollTop));
  }
});

fxSlide = function(elm) {
	var elm = $(elm);
	if (!$(elm)) {alert('Error with loading slider');return;}
	var slides = elm.select('[class="slide"]');
	var slide_width = parseInt(slides[0].getStyle('width'));
	
	this.next = function() {
		var elmLeft;
		if (!elm.getStyle('left') || elm.getStyle('left') == null) {elmLeft = 0;} else {if (parseInt(elm.getStyle('left')) < 0) {elmLeft = parseInt(elm.getStyle('left'));} else {elmLeft = parseInt(elm.getStyle('left'));}}
		var percent = elmLeft%slide_width;
		if (percent < 0) {percent = percent*-1;}
		if (percent > 0) {return;}
		if (parseInt(elmLeft)-slide_width != (slides.length*slide_width)*-1) {
			new Effect.Move (elm,{ x: eval(parseInt(elmLeft)-slide_width), mode: 'absolute'});
		}
	}
	
	this.prev = function() {
		var elmLeft;
		if (parseInt(elm.getStyle('left')) < 0) {elmLeft = parseInt(elm.getStyle('left'))*-1;} else {elmLeft = parseInt(elm.getStyle('left'));}
		if (elmLeft%slide_width > 0) {return;}
		if (parseInt(elm.getStyle('left'))+slide_width <= 0) {
			new Effect.Move (elm,{ x: eval(parseInt(elm.getStyle('left'))+slide_width), mode: 'absolute'});
		}
	}
	
	this.first = function() {
		var elmLeft;
		if (parseInt(elm.getStyle('left')) < 0) {elmLeft = parseInt(elm.getStyle('left'))*-1;} else {elmLeft = parseInt(elm.getStyle('left'));}
		if (elmLeft%slide_width > 0) {return;}
		if (parseInt(elm.getStyle('left')) != 0) {
			new Effect.Move (elm,{ x: 0, mode: 'absolute'});
		}
	}
	
	this.last = function() {
		var elmLeft;
		if (parseInt(elm.getStyle('left')) < 0) {elmLeft = parseInt(elm.getStyle('left'))*-1;} else {elmLeft = parseInt(elm.getStyle('left'));}
		if (elmLeft%slide_width > 0) {return;}
		if (parseInt(elm.getStyle('left')) != slides.length-1*slide_width) {
			new Effect.Move (elm,{ x: eval((slides.length-1)*slide_width)*-1, mode: 'absolute'});
		}
	}
}

function designYourPurse() {
	// Create variables
	var purseItems = [];
	var referencePurseItems = [];
	var purseCategories = [];
	var referencePurseCategories = [];
	var stepNames = [];
	// Keep track of what has been completed
	var stepStatus = {current:1,completed:{step1:false,step2:false,step3:false,step4:false,step5:false,step6:false,step7:false}};
	// Keep track of what the user has selected
	var yourPurse = {step1:null,step2:null,step3:null,step4:null,step5:null,step6:null,step7:null};
	// Step descriptions
	stepNames[1] = 'Choose your size/style.';
	stepNames[2] = 'Choose your exterior top fabric.';
	stepNames[3] = 'Choose your exterior bottom fabric if you so desire.';
	stepNames[4] = 'Choose your interior fabric.';
	stepNames[5] = 'Choose the fabric for your pockets.';
	stepNames[6] = 'Choose your exterior ribbon if you so desire.';
	stepNames[7] = 'Choose your handles.';
	
	this.init = function() {	
		$('load_dyp').innerHTML = "<br><br><br><br><br><br><br><div style='font-size:16px;font-weight:bold;color:#b1b38e;text-align:center;'>LOADING...</div><br><br><br><br><br><br><br>";
		// Retrieve items for steps via database
		new Ajax.Request('/wwwroot/p/pursesbylauralynn/ajax/dypGetItems.cfm', {
			method:'post',
			onSuccess: function(transport){
				eval(transport.responseText);
				// Create reference array with item ids as the arrays index for easy access/updating
				for(var t = 0;t<purseItems.length;t++) {
					referencePurseItems[purseItems[t].id] = purseItems[t];
				}
				for(var b = 0;b<purseCategories.length;b++) {
					referencePurseCategories[purseCategories[b].id] = purseCategories[b];	
				}
				// Load steps and data
				this.display();
			}.bind(this)
		});
	}.bind(this);
	
	// Smoothly scroll the window to the next step
	this.moveToNextStep = function(step) {
		if (!$('step'+step)) {alert('Error: element does not exist.');return;}
		var position = $('step'+step).cumulativeOffset();
		var position2 = $('step'+step).cumulativeScrollOffset();
		new Effect.Scroll(window, { y: position.top-position2.top-100, afterFinish: function(){/*alert('done');*/}, duration: 0.8 });
	}
	
	// Create the slide effect html for each step
	this.compileSlideItems = function(obj) {
		var category = obj.category || false;
		var step = obj.step || false;
		if (!category || !step) {alert('Error: Either step or cateogry is undefined.');return;}
		var counter = 1;
		var a = [];
		
		var browser = navigator;
		
		a.push('		<div class="slider">			<div class="container" id="step'+step+'_slider">				<table border="0" cellpadding="0" cellspacing="0">					<tr>');
		for(var x = 0;x<purseItems.length;x++) {
			if (purseItems[x].category == category) {
				if (counter == 1) {
					a.push('<td align="center"><div class="slide">');
				}
				if (purseItems[x].picture) {
					var picture = '/wwwroot/p/pursesbylauralynn/data/items/'+purseItems[x].id+'_m.jpg';
				} else {
					var picture = '/wwwroot/p/pursesbylauralynn/images/nophoto.jpg';
				}
				if (!purseItems[x].dimensions.purse) {
					var purseDimensions = '';
				} else {
					var purseDimensions = purseItems[x].dimensions.purse;
				}
				if (!purseItems[x].dimensions.handle) {
					var handleDimensions = '';
				} else {
					var handleDimensions = purseItems[x].dimensions.handle;
				}
				
				if (step == 1) {
					var purseTitle = '<div style="color:#ad3bad;">Purse</div>';
					var handleTitle = '<div style="color:#ad3bad;">Handle</div>';
				} else {
					var purseTitle = '';
					var handleTitle = '';
				}
				
				if (browser.appName == 'Microsoft Internet Explorer') {
					var itemBgStyle = '';
					var itemStyle = 'border:3px solid white;';
				} else {
					var itemBgStyle = 'background-image:url(images/dyp_item_background.png);background-repeat:no-repeat;';
					var itemStyle = '';
				}
				
				if(step == 6) {var step6font = 'font-size:10px;';} else {var step6font = '';}
				
				if ((step == 1 || step == 7) && category != 1) {
					if (purseItems[x].price > '') {
						var itemPricing = '<div 	style="position:absolute;z-index:999;background-color:black;width:35px;height:15px;font-size:10px;color:white;top:92px;left:65px;line-height:13px;text-align:center;"><div style="padding-left:3px;padding-right:3px;">$'+purseItems[x].price+'</div></div>';
					} else {
						var itemPricing = '';	
					}
				} else {
					var itemPricing = '';	
				}
				
				if (counter == 1) {var itemMargin = 'margin-left:27px;';} else {var itemMargin = 'margin-left:2px;';}
				/*var f = ['<div class="item" id="step'+step+'_item'+purseItems[x].id+'"  style="'+itemBgStyle+''+itemMargin+'" onclick="myPurse.processStep({status:\'select\',step:'+step+',pItem:\''+purseItems[x].id+'\'})">'
						//,'+purseItems[x].name+'
						,'	<div class="photo" style="background-image:url('+picture+');'+itemStyle+'"></div>'
						,'	<div class="name">'+purseItems[x].name+'</div>'
						,'	<div class="purse_dimensions">'+purseTitle+purseDimensions+'</div>'
						,'	<div class="handle_dimensions>'+handleTitle+handleDimensions+'</div>'
						,'</div>'];*/
				var f = ['<div style="float:left;width:118px;position:relative;height:116px;'+itemMargin+'" onmouseover="$(\'step'+step+'_'+purseItems[x].id+'zoom\').setStyle({display:\'\'});" onmouseout="$(\'step'+step+'_'+purseItems[x].id+'zoom\').setStyle({display:\'none\'});">'
						 ,'	<div style="position:absolute;z-index:999;top:-10px;right:-5px;cursor:pointer;display:none;" id="step'+step+'_'+purseItems[x].id+'zoom" onclick="window.open(\'data/items/'+purseItems[x].id+'.jpg\',\'_blank\')"><img src="images/zoom.png"></div>'
						 ,'<div class="item" id="step'+step+'_item'+purseItems[x].id+'"  style="width:118px;position:relative;cursor:pointer;height:116px;'+itemBgStyle+'float:left;text-align:center;padding-top:20px;margin-top:40px;" onclick="myPurse.processStep({status:\'select\',step:'+step+',pItem:\''+purseItems[x].id+'\'})" >'
						//,'+purseItems[x].name+'
						,itemPricing
						,'	<div style="position:absolute;top:5px;left:6px;width:94px;height:102px;overflow:hidden;background-image:url('+picture+');background-repeat:no-repeat;'+itemStyle+'"></div>'
						,'	<div style="position:absolute;top:118px;left:6px;width:94px;height:35px;overflow:hidden;font-weight:bold;'+step6font+'">'+purseItems[x].name+'</div>'
						,'	<div style="position:absolute;top:135px;left:6px;width:94px;height:30px;overflow:hidden;">'+purseTitle+purseDimensions+'</div>'
						,'	<div style="position:absolute;top:165px;left:6px;width:94px;height:30px;overflow:hidden;">'+handleTitle+handleDimensions+'</div>'
						,'</div></div>'];
				a.push(f.join(''));
				
				if (x == purseItems.length-1) {
					if (counter < 6) {
						for(var o = 1;o<=6-counter;o++) {
							var itemMargin = 'margin-left:2px;';
							//a.push(o);
							a.push('<div class="item" style="width:118px;position:relative;cursor:pointer;height:116px;background-image:url(images/dyp_item_background.png);background-repeat:no-repeat;float:left;text-align:center;padding-top:20px;margin-top:40px;visibility:hidden;'+itemMargin+'">&nbsp;</div>');
						}
					}
					a.push('</div></td>');
					break;
				} else if (counter == 6) {
					a.push('</div></td>');
					counter = 1;
				} else {
					counter++;
				}
			}
		}
		a.push('					</tr>				</table>			</div>		</div>')
		
		var test = a.join('');
		if(step == 7 && category == 1) {
			$('stepContent7').innerHTML = test;
			step7Slider = new fxSlide('step7_slider');
		} else {
			return test;	
		}
	} 
	
	// Run thru all the steps and load to page
	this.display = function() {
		// Create variables
		var a = [];
		// Create all 8 steps
		for(var x = 1;x<=8;x++) {
			if (x == 8) {var f = 2;} else {var f = 1;}
			a.push(this.formatting({step:x,format:f}));
		}
		$('load_dyp').innerHTML = '<div class="title" onclick=""><img src="images/title_designyourpurse.jpg" /></div>'+a.join('');
		// Initialize the slider effect for each step, slider effect is: fxSlide()
		for(var y = 1;y<=6;y++) {
			if ($('step'+y)) {
				eval('step'+y+'Slider = new fxSlide(\'step'+y+'_slider\');');
			}
		}
		// On load, fade out every step that is not the current step
		for(var k = 2;k<=8;k++) {
			if ($('step'+k)) {
				setTimeout("new Effect.Opacity($('step"+k+"'),{from:1.0,to:0.4,duration:1.0});",200*k);
			}
		}
	}
	
	this.calcPrice = function() {
		var price = 0;
		price = eval(referencePurseItems[yourPurse.step1].price);
		
			if (yourPurse.step1 == 30 || yourPurse.step1 == 31) {
				// Add 8 dollars if they have ribbons
				price = eval(price+8);
			} else {
				if (yourPurse.step6 != 'skip') {
					price = eval(price+8);
				}
			}
		var paypal_name = $('item_name');
		var paypal_price = $('item_price');
		var p1 = $('paypal1');
		var p2 = $('paypal2');
		var paypal = [];
		
		var y = [];
		var z = [];
		for(var x = 1;x<=7;x++) {
			if (eval('yourPurse.step'+x) != 'skip') {
				if (x == 7) {
					var this_cat = referencePurseCategories[referencePurseItems[yourPurse.step7].category].id;
					if (this_cat == 10) { // Beaded
							price = eval(price+10);
					} else if (this_cat == 11) { // 4" Bamboo
							price = eval(price+8);
					} else if (this_cat == 12) { // 6" Bamboo
							price = eval(price+10);
					} else if (this_cat == 13) { // 8" Bamboo
							price = eval(price+12);
					} else if (this_cat == 14) { // 10" Bamboo
							price = eval(price+12);
					}
					z.push('('+x+') '+referencePurseCategories[referencePurseItems[yourPurse.step7].category].name+': '+referencePurseItems[eval('yourPurse.step'+x)].name);
				} else if (x == 6 || x == 5) {
					z.push('('+x+') '+referencePurseItems[eval('yourPurse.step'+x)].name);
				} else {
					y.push('('+x+') '+referencePurseItems[eval('yourPurse.step'+x)].name);
				}
			}
		}
		
		// Girly Bow Pricing
		if (yourPurse.step1 == 30 || yourPurse.step1 == 31) {
			var girlybowPrice = 5;
		} else if (yourPurse.step1 == 32 || yourPurse.step1 == 33 || yourPurse.step1 == 38 || yourPurse.step1 == 34 || yourPurse.step1 == 36) {
			var girlybowPrice = 5;
		} else if (yourPurse.step1 == 26 || yourPurse.step1 == 39 || yourPurse.step1 == 35 || yourPurse.step1 == 25) {
			var girlybowPrice = 5;
		} else {
			var girlybowPrice = 0;	
		}
		if ($('step6girlybow') && $('girlybowYes')) {
			if ($('girlybowYes').checked == true) {
				price = eval(price+girlybowPrice);
				$('girlybowYes').checked = true;
				$('girlybowNo').checked = false;
				z.push('ADD: Girly Bow');
			} else {
				$('girlybowYes').checked = false;
				$('girlybowNo').checked = true;
			}
		}
		
		if (pbllConsultant) {
			z.push('CONSULTANT: '+pbllConsultant);
		}
		
		$('dyp_price').innerHTML = '$'+price;
		paypal_price.value = price;
		paypal_name.value = referencePurseItems[eval('yourPurse.step1')].name;
		p1.value = y.join(', ');
		p2.value = z.join(', ');
		if ($('step6girlybow')) {
			if (!$('girlybowYes')) {
				if (yourPurse.step1 != 30 && yourPurse.step1 != 31) {
					$('step6girlybow').innerHTML = '<input type="radio" name"girlybow" id="girlybowYes" onclick="this.checked=true;$(\'girlybowNo\').checked=false;myPurse.calcPrice();" value"yes">Girly Bow ($'+girlybowPrice+')<br><input type="radio" name"girlybow" id="girlybowNo" onclick="this.checked=true;$(\'girlybowYes\').checked=false;myPurse.calcPrice();" checked="checked" value"no">No Girly Bow';	
				}
			}
		}
	}
	
	// Do step processing, marking a step as completed, saving what was selected, moving to next step, etc...
	this.processStep = function(obj) {
		var status = obj.status || '';
		var step = obj.step || false;
		var skip = obj.skip || false;
		var pItem = obj.pItem || false;
		if (step > stepStatus.current) {return;}
		if (!step) {alert('Error: No step has been given.');return;}
		
		if (eval('yourPurse.step'+step) != null) {
			if (referencePurseItems[yourPurse.step1].preferences.skipStep3 && step == 3) {
				alert('Step 3 (Bottom Fabric) is not available for the Purse you have selected.');
				return;
			}
			if (referencePurseItems[yourPurse.step1].preferences.skipStep5 && step == 5) {
				alert('Step 5 (Pocket Fabric) is not available for the Purse you have selected.');
				return;
			}
			if ($('step'+stepStatus.current).getStyle('opacity') == 1) {
				new Effect.Opacity($('step'+stepStatus.current),{from:1.0,to:0.4,duration:1.0});	
			}
			var test = $('step'+step).select('[class="item"]');
			eval('yourPurse.step'+step+'= null;');
			eval('stepStatus.completed.step'+step+'= false;');
			for(var x = 0;x<test.length;x++) {
				//if (test[x].getAttribute('id') != 'step'+step+'_item'+pItem) {
					new Effect.Opacity(test[x],{from:0.2,to:1.0,duration:1.0});
				//}
			}
			$('step'+(step)).className = 'step_selected';
			for(var y = 1;y<=8;y++) {
				if (y != step) {
					$('step'+y).className = 'step';
				}				
			}
			$('step8').innerHTML = this.formatting({step:8,format:3});
			this.moveToNextStep(step);
			return;
		}
		
		// Step 8 = Summary
		if (step == 8) {
			if (referencePurseItems[yourPurse.step1].picture) {
				var picture1 = '/wwwroot/p/pursesbylauralynn/data/items/'+referencePurseItems[yourPurse.step1].id+'_s.jpg';
			} else {
				var picture1 = '/wwwroot/p/pursesbylauralynn/images/nophoto_s.jpg';
			}
			if (referencePurseItems[yourPurse.step2].picture) {
				var picture2 = '/wwwroot/p/pursesbylauralynn/data/items/'+referencePurseItems[yourPurse.step2].id+'_s.jpg';
			} else {
				var picture2 = '/wwwroot/p/pursesbylauralynn/images/nophoto_s.jpg';
			}
			if (yourPurse.step3 != 'skip') {
				if (referencePurseItems[yourPurse.step3].picture) {
					var picture3 = '/wwwroot/p/pursesbylauralynn/data/items/'+referencePurseItems[yourPurse.step3].id+'_s.jpg';
				} else {
					var picture3 = '/wwwroot/p/pursesbylauralynn/images/nophoto_s.jpg';
				}
			}
			if (referencePurseItems[yourPurse.step4].picture) {
				var picture4 = '/wwwroot/p/pursesbylauralynn/data/items/'+referencePurseItems[yourPurse.step4].id+'_s.jpg';
			} else {
				var picture4 = '/wwwroot/p/pursesbylauralynn/images/nophoto_s.jpg';
			}
			if (yourPurse.step5 != 'skip') {
				if (referencePurseItems[yourPurse.step5].picture) {
					var picture5 = '/wwwroot/p/pursesbylauralynn/data/items/'+referencePurseItems[yourPurse.step5].id+'_s.jpg';
				} else {
					var picture5 = '/wwwroot/p/pursesbylauralynn/images/nophoto_s.jpg';
				}
			}
			if (yourPurse.step6 != 'skip') {
				if (referencePurseItems[yourPurse.step6].picture) {
					var picture6 = '/wwwroot/p/pursesbylauralynn/data/items/'+referencePurseItems[yourPurse.step6].id+'_s.jpg';
				} else {
					var picture6 = '/wwwroot/p/pursesbylauralynn/images/nophoto_s.jpg';
				}
			}
			if (referencePurseItems[yourPurse.step7].picture) {
				var picture7 = '/wwwroot/p/pursesbylauralynn/data/items/'+referencePurseItems[yourPurse.step7].id+'_s.jpg';
			} else {
				var picture7 = '/wwwroot/p/pursesbylauralynn/images/nophoto_s.jpg';
			}
			
			var step6 = [];
			var step5 = [];
			var step3 = [];
			
			if (yourPurse.step6 == 'skip') {
				step6.push('		<td><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:6})"><div class="item" style="visibility:hidden"><div class="item_image">&nbsp;</div></div><div class="info"><div class="step">6. Exterior Ribbon</div><div class="name">Skipped</div></div></div></td>');
			} else {
				step6.push('		<td><div style="position:relative;"><div style="position:absolute;top:47px;left:47px;width:150px;height:75px;" id="step6girlybow"></div><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:6,pItem:\''+referencePurseItems[yourPurse.step6].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture6+'"></div></div><div class="info"><div class="step">6. Exterior Ribbon</div><div class="name">'+referencePurseItems[yourPurse.step6].name+'</div></div></div></div></td>');
			}
			if (yourPurse.step3 == 'skip') {
				step3.push('		<td><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:3})"><div class="item" style="visibility:hidden"><div class="item_image">&nbsp;</div></div><div class="info"><div class="step">3. Bottom Fabric</div><div class="name">Skipped</div></div></div></td>');
			} else {
				step3.push('		<td><div style="position:relative;"><div style="position:absolute;top:47px;left:47px;width:150px;height:75px;"></div><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:3,pItem:\''+referencePurseItems[yourPurse.step3].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture3+'"></div></div><div class="info"><div class="step">3. Bottom Fabric</div><div class="name">'+referencePurseItems[yourPurse.step3].name+'</div></div></div></div></td>');
			}
			if (yourPurse.step5 == 'skip') {
				step5.push('		<td><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:5})"><div class="item" style="visibility:hidden"><div class="item_image">&nbsp;</div></div><div class="info"><div class="step">5. Pocket Fabric</div><div class="name">Skipped</div></div></div></td>');
			} else {
				step5.push('		<td><div style="position:relative;"><div style="position:absolute;top:47px;left:47px;width:150px;height:75px;"></div><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:5,pItem:\''+referencePurseItems[yourPurse.step5].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture5+'"></div></div><div class="info"><div class="step">5. Pocket Fabric</div><div class="name">'+referencePurseItems[yourPurse.step5].name+'</div></div></div></div></td>');
			}
			
						
			var a = ['<table border="0" cellpadding="0" cellspacing="0" style="width:675px;height:155px;" align="center">',
					 '	<tr>',
					 '		<td width="33%"><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:1,pItem:\''+referencePurseItems[yourPurse.step1].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture1+'"></div></div><div class="info"><div class="step">1. Size/Style</div><div class="name">'+referencePurseItems[yourPurse.step1].name+'</div></div></div></td>',
					 '		<td width="33%"><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:4,pItem:\''+referencePurseItems[yourPurse.step4].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture4+'"></div></div><div class="info"><div class="step">4. Interior Fabric</div><div class="name">'+referencePurseItems[yourPurse.step4].name+'</div></div></div></td>',
					 '		<td><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:7,pItem:\''+referencePurseItems[yourPurse.step7].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture7+'"></div></div><div class="info"><div class="step">7. Handles</div><div class="name">'+referencePurseCategories[referencePurseItems[yourPurse.step7].category].name+': '+referencePurseItems[yourPurse.step7].name+'</div></div></div></td>',
					 '	</tr>',
					 '	<tr>',
					 '		<td><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:2,pItem:\''+referencePurseItems[yourPurse.step2].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture2+'"></div></div><div class="info"><div class="step">2. Exterior Fabrics</div><div class="name">'+referencePurseItems[yourPurse.step2].name+'</div></div></div></td>',
					 step5.join(''),
					 //'		<td><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:5,pItem:\''+referencePurseItems[yourPurse.step5].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture5+'"></div></div><div class="info"><div class="step">5. Pocket Fabric</div><div class="name">'+referencePurseItems[yourPurse.step5].name+'</div></div></div></td>',
					 '		<td rowspan="2">',
					 '			<div style="font-size:24px;text-align:center;">Total: <span style="color:#661765;font-size:24px;" id="dyp_price"></span></div>',
					/*<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
					<input type="hidden" name="cmd" value="_xclick">
					<input type="hidden" name="business" value="lauralynn@speednetllc.com">
					<input type="hidden" name="item_name" value="Name12345678901234567890123456789023456789012345678901234567890123456789901234567890">
					<input type="hidden" name="item_number" value="Options12345678901234567890123456789023456789012345678901234567890123456789901234567890">
					<input type="hidden" name="amount" value="100.00">
					<input type="hidden" name="no_shipping" value="0">
					<input type="hidden" name="logo_custom" value="http://dev.comsoftinc.com/p/pursesbylauralynn/images/dyp_checkout.png">
					<input type="hidden" name="no_note" value="1">
					<input type="hidden" name="currency_code" value="USD">
					<input type="hidden" name="lc" value="US">
					<input type="hidden" name="bn" value="PP-BuyNowBF">
					<input type="image" src="http://dev.comsoftinc.com/p/pursesbylauralynn/images/dyp_checkout.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
					<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
					</form>*/
					 '			<div style="position:relative;"><form target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="position:absolute;top:17px;left:45px;"><input type="hidden" name="cmd" value="_xclick"><input type="hidden" name="business" value="lauralynn@speednetllc.com"><input type="hidden" name="item_name" id="item_name"  value="name_"><input type="hidden" name="on0" value="Steps 1-4"><input type="hidden" name="os0" id="paypal1" value=""><input type="hidden" name="on1" value="Steps 5-7"><input type="hidden" name="os1" id="paypal2" value=""><input type="hidden" name="amount" value="0.00" id="item_price"><input type="hidden" name="no_shipping" value="0"><input type="hidden" name="logo_custom" value="images/dyp_checkout.png"><input type="hidden" name="no_note" value="1"><input type="hidden" name="currency_code" value="USD"><input type="hidden" name="lc" value="US"><input type="hidden" name="bn" value="PP-BuyNowBF"><input type="image" src="http://dev.comsoftinc.com/p/pursesbylauralynn/images/dyp_checkout.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></form><!--<img src="images/dyp_checkout.png" style="position:absolute;top:17px;left:15px;">--></div>',
					 '		</td>',
					 '	</tr>',
					 '	<tr>',
					 step3.join(''),
					 //'		<td><div class="summary_item" onclick="myPurse.processStep({status:\'select\',step:3,pItem:\''+referencePurseItems[yourPurse.step3].id+'\'})"><div class="item"><div class="item_image"><img src="'+picture3+'"></div></div><div class="info"><div class="step">3. Bottom Fabric</div><div class="name">'+referencePurseItems[yourPurse.step3].name+'</div></div></div></td>',
					 step6.join(''),
					 '	</tr>',
					 '</table>'];
			$('step_summary').innerHTML = a.join('');
			this.calcPrice();
		// All other steps, steps 1 - 7
		} else {
			// Select an item from a step, and mark as completed
			if (status == 'select') {
				if(eval('stepStatus.completed.step'+step)) {return;}
				// Track the status of completed steps
				eval('stepStatus.completed.step'+step+' = true;');
				eval('yourPurse.step'+step+' = '+pItem+';');
				if (step == 7) {
					eval('yourPurse.step7 = '+pItem+';');
					stepStatus.current = 8;
					var test = $('step'+step).select('[class="item"]');
					for(var x = 0;x<test.length;x++) {
						if (test[x].getAttribute('id') != 'step'+step+'_item'+pItem) {
							new Effect.Opacity(test[x],{from:1.0,to:0.2,duration:1.0});
						}					
					}
					$('step'+step).className = 'step';
					$('step8').className = 'step_selected';
					new Effect.Opacity($('step8'),{duration:1.0,to:1.0,from:$('step'+(step+1)).getStyle('opacity')});
					this.moveToNextStep(8);
					this.processStep({step:8});
				} else {
					
					
					if (skip) {
						eval('stepStatus.completed.step'+step+' = true;');
						eval('yourPurse.step'+step+' = \'skip\';');
						var test = $('step'+step).select('[class="item"]');
						for(var x = 0;x<test.length;x++) {
							new Effect.Opacity(test[x],{from:1.0,to:0.2,duration:1.0});	
						}
					} else {
						eval('yourPurse.step'+step+'= '+pItem+';');
						var test = $('step'+step).select('[class="item"]');
						for(var x = 0;x<test.length;x++) {
							if (test[x].getAttribute('id') != 'step'+step+'_item'+pItem) {
								new Effect.Opacity(test[x],{from:1.0,to:0.2,duration:1.0});
							}					
						}
					}
					// If purse was changed, and now the purse does not allow Step 3 or 5, set them accordingly and update
					if (referencePurseItems[yourPurse.step1].preferences.skipStep3 && yourPurse.step3 != 'skip') {
						if (yourPurse.step3 != null) {
							new Effect.Opacity($('step3_item'+yourPurse.step3),{from:1.0,to:0.2,duration:1.0});
							stepStatus.completed.step3 = true;
							yourPurse.step3 = 'skip';
						}
					}
					if (referencePurseItems[yourPurse.step1].preferences.skipStep5 && yourPurse.step5 != 'skip') {
						if (yourPurse.step5 != null) {
							new Effect.Opacity($('step5_item'+yourPurse.step5),{from:1.0,to:0.2,duration:1.0});
							stepStatus.completed.step5 = true;
							yourPurse.step5 = 'skip';
						}
					}
					// If purse is no longer forcing skipping of Step 3 and 5, reset Step 3 and 5 so user can choose step options
					if (!referencePurseItems[yourPurse.step1].preferences.skipStep3 && yourPurse.step3 == 'skip') {
						yourPurse.step3 = null;
						stepStatus.completed.step3 = false;
					}
					if (!referencePurseItems[yourPurse.step1].preferences.skipStep5 && yourPurse.step5 == 'skip') {
						yourPurse.step5 = null;
						stepStatus.completed.step5 = false;
					}
					
					var allStepsCompleted = 0;
					for(var g = 1;g<=7;g++) {
						if (eval('stepStatus.completed.step'+g)) {
							allStepsCompleted++;
						}
					}
					if (allStepsCompleted == 7) {
						stepStatus.current = 8;
						$('step'+step).className = 'step';
						$('step8').className = 'step_selected';
						new Effect.Opacity($('step8'),{duration:1.0,to:1.0,from:$('step8').getStyle('opacity')});
						this.moveToNextStep(8);
						this.processStep({step:8});
					} else {
						for(var b = 1;b<=7;b++) {
							if (eval('stepStatus.completed.step'+b) == false) {
								var nextStep = b;
								break;
							}
						}
						if (referencePurseItems[yourPurse.step1].preferences.skipStep3 && b == 3) {
							stepStatus.completed.step3 = true;
							yourPurse.step3 = 'skip';
							var test = $('step3').select('[class="item"]');
							for(var x = 0;x<test.length;x++) {
								new Effect.Opacity(test[x],{from:1.0,to:0.2,duration:1.0});	
							}
							
							stepStatus.current = b+1;
							$('step'+step).className = 'step';
							$('step'+(b+1)).className = 'step_selected';
							new Effect.Opacity($('step'+eval(b+1)),{duration:1.0,to:1.0,from:$('step'+eval(b+1)).getStyle('opacity')});
							this.moveToNextStep(b+1);
						} else if (referencePurseItems[yourPurse.step1].preferences.skipStep5 && b == 5) {
							stepStatus.completed.step5 = true;
							yourPurse.step5 = 'skip';
							var test = $('step5').select('[class="item"]');
							for(var x = 0;x<test.length;x++) {
								new Effect.Opacity(test[x],{from:1.0,to:0.2,duration:1.0});	
							}
							
							stepStatus.current = b+1;
							$('step'+step).className = 'step';
							$('step'+(b+1)).className = 'step_selected';
							new Effect.Opacity($('step'+eval(b+1)),{duration:1.0,to:1.0,from:$('step'+eval(b+1)).getStyle('opacity')});
							this.moveToNextStep(b+1);
						} else {
							stepStatus.current = b;
							$('step'+step).className = 'step';
							$('step'+(b)).className = 'step_selected';
							var test = $('step'+b).select('[class="item"]');
							// If the step was Step 3 or 5 and it was "skipped" because of a purse, raise the opacity for all the items, now that it's being edited and the purse no longer is set to skip these steps.
							if (test.length) {
								if (test[0].getStyle('opacity') < 0.5 && (b == 3 || b == 5)) {
									for(var x = 0;x<test.length;x++) {
										new Effect.Opacity(test[x],{from:test[x].getStyle('opacity'),to:1.0,duration:1.0});	
									}
								}
							}
							new Effect.Opacity($('step'+(b)),{duration:1.0,to:1.0,from:$('step'+b).getStyle('opacity')});
							this.moveToNextStep(b);
						}
					}
				}
			}
		}
	}
	
	this.compileSubCategories = function(obj) {
		var step = obj.step || 1;
		var category = obj.category || false;
		if (!category) {return;}
		var haveSubCategories = false;
		for (var j = 0;j<purseCategories.length;j++) {
			if (purseCategories[j].parent == category) {
				haveSubCategories = true;
				break;
			}
		}
		var stepContent = [];
		
		if (haveSubCategories && step == 7) {
			var stepCounter = 1;
			stepContent.push('<table border="0" cellpadding="0" cellspacing="0" style="width:600px;margin-left:75px;margin-top:40px;" align="center">');
			for (var j = 0;j<purseCategories.length;j++) {
				if (purseCategories[j].parent == category) {
					if (stepCounter == 1) {
						stepContent.push('	<tr>');
					}
					if (purseCategories[j].name == 'Fabrics') {
						stepContent.push('		<td width="33%">');
						stepContent.push('			<a href="javascript://" style="font-size:14px;font-weight:bold;float:left;margin:20px;width:100px;" onclick="myPurse.compileSlideItems({category:1,step:'+step+'});">'+purseCategories[j].name+'</a>');
						stepContent.push('		<td>');
					} else {
						stepContent.push('		<td width="33%">');
						stepContent.push('			<a href="javascript://" style="font-size:14px;font-weight:bold;float:left;margin:20px;width:100px;" onclick="$(\'stepContent'+step+'\').innerHTML = myPurse.compileSlideItems({category:'+purseCategories[j].id+',step:'+step+'});step'+step+'Slider = new fxSlide(\'step'+step+'_slider\');">'+purseCategories[j].name+'</a>');
						stepContent.push('		<td>');
					}
					
					if (stepCounter == 3) {
						stepContent.push('	<tr>');
						stepCounter = 1;
					} else {
						stepCounter++;
					}
				}
			}
			if (stepCounter < 3) {
				for(var s = 1;s<=3-stepCounter;s++) {
					stepContent.push('		<td width="33%">');
					stepContent.push('			&nbsp;');
					stepContent.push('		<td>');
					
				}
				stepContent.push('	<tr>');
			}
			stepContent.push('</table>');		
		}
		if (stepContent.length > 0) {
			return stepContent.join('');
		}
	}
	
	// Step formatting
	this.formatting = function(obj) {
		var step = obj.step || 1;
		var format = obj.format || 1;
		
		if (step == stepStatus.current) {
			var _itemCSS = '';
			var _itemClass = 'step_selected';
		} else {
			var _itemCSS = '';
			var _itemClass = 'step';
		}
		if (step == 2 || step == 3 || step == 4 || step == 5) {
			var _stepCategory = 1;
		} else if (step == 6) {
			var _stepCategory = 3;
		} else if (step == 7) {
			var _stepCategory = 2;
		} else if (step == 1) {
			var _stepCategory = 6;
		}
		
		if (format == 1) {
			var haveSubCategories = false;
			for (var j = 0;j<purseCategories.length;j++) {
				if (purseCategories[j].parent == _stepCategory) {
					haveSubCategories = true;
					break;
				}
			}
			
			var stepContent = [];
			
			if (haveSubCategories && step == 7) {
				stepContent.push(this.compileSubCategories({step:7,category:_stepCategory}));
			} else {
				stepContent.push(this.compileSlideItems({category:_stepCategory,step:step}));
			}
			
			if (step == 7) {
				var stepOptions	 = '<div style="position:absolute;z-index:999;left:550px;top:2px;width:150px;height:30px;top:12px;left:550px;" id="step7_changecategories"><a href="javascript://" style="color:white;font-size:14px;" onclick="$(\'stepContent7\').innerHTML = myPurse.compileSubCategories({step:7,category:2});">Change Categories</a></div>';
			} else {
				var stepOptions	 = '';				
			}
			
			if (step == 6) {
				var skipStep = '<img src="images/skip.png" class="skip" style="cursor:pointer;" onclick="myPurse.processStep({status:\'select\',step:'+step+',skip:true})">';	
			} else {
				var skipStep = '';	
			}
			
						
			var a = ['<div class="'+_itemClass+'" id="step'+step+'" style="'+_itemCSS+'">',
					 stepOptions,
					 '	<div class="title">',
					 '   	Step '+step+':',
					 '   	<div class="description">'+stepNames[step]+'</div>',
					 '    </div>',
					 '	<div class="prev"><img src="images/dyp_prev2.png" onclick="step'+step+'Slider.prev();" /><br /><img src="images/dyp_prev2_2.png" onclick="step'+step+'Slider.first();" /></div>',
					 '   <div class="next"><img src="images/dyp_next2.png" onclick="step'+step+'Slider.next();" /><br /><img src="images/dyp_next2_2.png" onclick="step'+step+'Slider.last();" /></div>',
					 '	<div id="stepContent'+step+'">',
					 stepContent.join(''),
					 // this.compileSlideItems({category:_stepCategory,step:step}),
					 '	</div>',
					 skipStep,
					 '</div>'];
			return a.join('');
		} else if (format == 2) {
			var a = ['<div class="'+_itemClass+'" id="step'+step+'" style="'+_itemCSS+'">',
					 '	<div class="title">',
					 '   	Your Purse:',
					 '   	<div class="description" style="left:115px;">Look over your purses options before purchasing!</div>',
					 '  </div>',
					 '	<div id="step_summary" style="padding-top:40px;">',
					 '		<table border="0" cellpadding="0" cellspacing="0" style="width:700px;height:155px;" align="center">',
					 '			<tr>',
					 '				<td><div style="font-size:18px;line-height:200%;text-align:center;">Please complete all steps to<br>view your summary and checkout.</div></td>',
					 '			</tr>',
					 '		</table>',
					 '	</div>',
					 '</div>'];
			return a.join('');
		} else if (format == 3) {
			var a = ['<div class="title">',
					 '   	Your Purse:',
					 '   	<div class="description" style="left:115px;">Look over your purses options before purchasing!</div>',
					 '  </div>',
					 '	<div id="step_summary" style="padding-top:40px;">',
					 '		<table border="0" cellpadding="0" cellspacing="0" style="width:700px;height:155px;" align="center">',
					 '			<tr>',
					 '				<td><div style="font-size:18px;line-height:200%;text-align:center;">Please complete all steps to<br>view your summary and checkout.</div></td>',
					 '			</tr>',
					 '		</table>',
					 '	</div>'];
			return a.join('');
		}
	}
}
Event.observe(window,'load',function() {
	// Create instance of Design Your Purse
	myPurse = new designYourPurse();
	// Start at the top of page
	window.location='#';
	//myPurse.init();
});