var whichActiveStep = 1;

(function($) {
    $(document).ready(function() {
		for (var i = 1; i <= constructionSteps.length; i++) {
			var whichStep = 'step' + (i + 2);
			$('#lodgerExperience-construction-1').after(
				'<div id="lodgerExperience-construction-' + (i + 2) + '" class="lodgerExperience-constructionStep">' +
				'<div id="lodgerExperience-constructionDescription">' +
				'<p>' + constructionSteps.descriptions[whichStep] + '</p>' +
				'<div class="imgCount"><img src="' + ldgr.imgUrl + 'icon-arrowLeft-off.png" width="12" height="13" alt="Previous Step" border="0" class="previousStep" />' +
				'<img src="' + ldgr.imgUrl + 'icon-arrowRight-off.png" width="12" height="13" alt="Next Step" border="0" class="nextStep" /><span>' + (i + 2) + '</span> of 13</div>' +
				'</div>' +
				'<img src="' + ldgr.imgUrl + 'construction-' + (i + 2) + '.jpg" width="904" height="472" alt="Exquisite Construction" border="0" />' +
				'</div>'
			)
		}
		
		$('.imgCount img').hover(
			function() {
				$(this).attr("src", $(this).attr("src").replace("-off.png","-overWhite.gif"));
			}, function() {
				$(this).attr("src", $(this).attr("src").replace("-overWhite.gif","-off.png"));
            }
		);
		
		$('.imgCount img.previousStep').click(
			function() {
				$('.lodgerExperience-constructionStep').not($('#lodgerExperience-construction-' + whichActiveStep)).css('display','none');
				if (whichActiveStep == 1) {
					whichActiveStep = constructionSteps.length + 3;
				} else {
					whichActiveStep = whichActiveStep - 1;
				}
				$('.lodgerExperience-constructionStep').css("z-index",30);
				$('#lodgerExperience-construction-' + whichActiveStep).css("z-index",31);
				$('#lodgerExperience-construction-' + whichActiveStep).fadeIn(500);
			}
		);
		
		$('.imgCount img.nextStep').click(
			function() {
				$('.lodgerExperience-constructionStep').not($('#lodgerExperience-construction-' + whichActiveStep)).css('display','none');
				if (whichActiveStep == constructionSteps.length + 3) {
					whichActiveStep = 1;
				} else {
					whichActiveStep = whichActiveStep + 1;
				}
				$('.lodgerExperience-constructionStep').css("z-index",30);
				$('#lodgerExperience-construction-' + whichActiveStep).css("z-index",31);
				$('#lodgerExperience-construction-' + whichActiveStep).fadeIn(500);
			}
		);
    });
})(jQuery);