// template 3 functions

function template3script() {
	
	var sectionName = 'section'+ (inSection+1);
	var slideName = 'slide' + (inSlide +1);
	console.log("function template3script(); sectionName=" +sectionName + "; slideName=" +slideName);
	
	var image1 = doContent[sectionName][slideName]['images']['image1'];
	var image2 = doContent[sectionName][slideName]['images']['image2'];
	var image3 = doContent[sectionName][slideName]['images']['image3'];
	
	$('#' + sectionName+slideName).append('<div id="' +sectionName+slideName+'image1">' +image1+'</div>');
	$('#' + sectionName+slideName).append('<div id="' +sectionName+slideName+'image2">' +image2+'</div>');
	$('#' + sectionName+slideName).append('<div id="' +sectionName+slideName+'image3">' +image3+'</div>');
	
	$('#' + sectionName+slideName+'image1')
		.css({
			"position":"absolute",
			"top": "50px",
			"left": "330px",
			"border":"1px",
			"z-index": "1"
		});
	$('#' + sectionName+slideName+'image2').css({
		"position":"absolute",
		"top": "50px",
		"left": "130px",
		"border":"1px",
		"z-index": "1"
	});
	$('#' + sectionName+slideName+'image3').css({
		"position":"absolute",
		"top": "50px",
		"left": "360px",
		"border":"1px",
		"z-index": "1"
	});
	
	$('#' + sectionName+slideName).append('<div class="control" id="' +sectionName+slideName+'close1"></div>');
	$('#' + sectionName+slideName).append('<div class="control" id="' +sectionName+slideName+'close2"></div>');
	$('#' + sectionName+slideName).append('<div class="control" id="' +sectionName+slideName+'close3"></div>');
	// image closs buttons
	$('#' + sectionName + slideName + 'close1')
		.css({
			"position":"absolute",
			"width":"65px",
			"height":"65px",
			"float":"left",
			"top":"0px",
			"left":"835px",
			"background":" url(img/close.png) no-repeat 50% 50%", 
			"z-index": "1"
		})	
		.bind('click', function(){ template3CloseImage(1); });
	$('#' + sectionName + slideName + 'close2')
		.css({
			"position":"absolute",
			"width":"65px",
			"height":"65px",
			"float":"left",
			"top":"0px",
			"left":"1020px",
			"background":" url(img/close.png) no-repeat 50% 50%", 
			"z-index": "1"
		})	
		.bind('click', function(){ template3CloseImage(2); });
	$('#' + sectionName + slideName + 'close3')
		.css({
			"position":"absolute",
			"width":"65px",
			"height":"65px",
			"float":"left",
			"top":"0px",
			"left":"800px",
			"background":" url(img/close.png) no-repeat 50% 50%", 
			"z-index": "1"
		})	
		.bind('click', function(){ template3CloseImage(3); });
	
	// image zoom buttons
	$('#' + sectionName+slideName).append('<div class="t3zoomB" id="' +sectionName+slideName+'zoomD1"></div>');
	$('#' + sectionName+slideName).append('<div class="t3zoomB" id="' +sectionName+slideName+'zoomD2"></div>');
	$('#' + sectionName+slideName).append('<div class="t3zoomB" id="' +sectionName+slideName+'zoomD3"></div>');
	var ssZB1 = '#' + sectionName + slideName + 'zoomD1';
	var ssZB2 = '#' + sectionName + slideName + 'zoomD2';
	var ssZB3 = '#' + sectionName + slideName + 'zoomD3';
	
	$('.t3zoomB').css({
		"position":"absolute",
		"display":"block",
		"width":"65px",
		"height":"65px",
		"background":" url(img/zoom_image.png) no-repeat 50% 50%",   
		"z-index": "2"
	});
	$(ssZB1).css({
		"top":"645px",
		"left":"505px"
	});
	$(ssZB2).css({
		"top":"345px",
		"left":"1085px"
	});	
	$(ssZB3).css({
		"top":"645px",
		"left":"1085px"
	});
		
	// image zoom divs
	$('#' + sectionName+slideName).append('<div class="t3zoomD" id="' +sectionName+slideName+'zoomB1"></div>');
	$('#' + sectionName+slideName).append('<div class="t3zoomD" id="' +sectionName+slideName+'zoomB2"></div>');
	$('#' + sectionName+slideName).append('<div class="t3zoomD" id="' +sectionName+slideName+'zoomB3"></div>');

	var ssZD1 = '#' + sectionName + slideName + 'zoomB1';
	var ssZD2 = '#' + sectionName + slideName + 'zoomB2';
	var ssZD3 = '#' + sectionName + slideName + 'zoomB3';

	$('.t3zoomD').css({
		"position":"absolute",
		"display":"block",
		'opacity':'0.0',
		'filter':'alpha(opacity=0)',
		"background":"#000000",   
		"z-index": "3"
	})
		.on('mouseenter',function(){
			$(this).animate({
				"opacity": "0.2",
				"background":"#000000"				
			},'fast');
		})
		.on('mouseleave',function(){
			$(this).stop(true).animate({
				"opacity": "0.0",
				"background":"#000000"	
			}, "fast");
		});
	
	$(ssZD1).css({ "width":"582px", "height":"596px", "top":"122px", "left":"0px" })
		.bind('click', function(){ template3ShowImage(1); });

	$(ssZD2).css({ "width":"578px", "height":"297px", "top":"122px", "left":"582px"})
		.bind('click', function(){ template3ShowImage(2); });
	
	$(ssZD3).css({ "width":"578px", "height":"297px", "top":"421px", "left":"582px"})
		.bind('click', function(){ template3ShowImage(3); });
}

function template3ShowImage(imageNo){
	var sectionName = 'section'+ (inSection+1);
	var slideName = 'slide' + (inSlide +1);
	// create transparent layer to hide background
	template3Transparent(imageNo);
	
	$('#' + sectionName + slideName + 'image' +imageNo)
		.css({
			"z-index": "4"
		});
	$('#' + sectionName + slideName + 'close' +imageNo)
		.css({
			"z-index": "4"
		})	
		.bind('click', function(){ template3CloseImage(imageNo); });
}

// creates transperant, clickable layer to hide slide background
function template3Transparent(imageNo) {
	var sectionName = 'section'+ (inSection+1);
	var slideName = 'slide' + (inSlide +1);
	// create transparent layer to hide background
	$('#' + sectionName + slideName)
		.append('<div id="' +sectionName+slideName+'transperant"></div>');
	$('#' + sectionName + slideName+'transperant')
		.css({
			"position":"absolute",
			"width":"1160px",
			"height":"718px",
			"background-color":"#ffffff",
			"top":"0px",
			"left":"0px",
			"opacity":"0.8",
			"filter":"alpha(opacity=80)",	/* For IE8 and earlier */
			"z-index": "3"
		})
		.bind('click', function(){ template3CloseImage(imageNo); });
}

// image zoom close function
function template3CloseImage(imageNo) {
	var sectionName = 'section'+ (inSection+1);
	var slideName = 'slide' + (inSlide +1);
	
	$('#' + sectionName + slideName + 'close' +imageNo)
	.css("z-index", "1");
	$('#' + sectionName + slideName + 'image' +imageNo)
	.css("z-index", "1");
	$('#' + sectionName + slideName+'transperant')
		.css("z-index", "1");

}
