var map2 = [];
var map3 = [];
map2[1] = { s:3, f:6 };
map2[2] = { s:3, f:7 };
map2[3] = { s:4, f:7 };
map2[4] = { s:5, f:8 };
map2[5] = { s:5, f:8 };
map2[6] = { s:5, f:9 };
map2[7] = { s:6, f:9 };
map2[8] = { s:6, f:9 };
map2[9] = { s:7, f:10 };
map2[10] = { s:7, f:10 };
map2[11] = { s:7, f:10 };
map2[12] = { s:7, f:11 };
map2[13] = { s:8, f:11 };
map2[14] = { s:8, f:11 };
map2[15] = { s:8, f:12 };
map2[16] = { s:9, f:12 };
map2[17] = { s:9, f:12 };
map2[18] = { s:9, f:12 };
map2[19] = { s:9, f:12 };
map2[20] = { s:9, f:13 };
map2[21] = { s:9, f:13 };
map2[22] = { s:10, f:13 };
map2[23] = { s:10, f:13 };
map2[24] = { s:10, f:13 };
map2[25] = { s:10, f:13 };
map2[26] = { s:10, f:13 };
map2[27] = { s:10, f:13 };
map2[28] = { s:10, f:13 };
map2[29] = { s:10, f:14 };
map2[30] = { s:10, f:14 };
map2[31] = { s:10, f:14 };
map2[32] = { s:10, f:14 };
map2[33] = { s:10, f:14 };
map2[34] = { s:10, f:14 };
map2[35] = { s:10, f:14 };
map2[36] = { s:10, f:14 };
map2[37] = { s:10, f:14 };
map2[38] = { s:10, f:14 };
map2[39] = { s:10, f:13 };
map2[40] = { s:10, f:13 };
map2[41] = { s:10, f:13 };
map2[42] = { s:10, f:13 };
map2[43] = { s:10, f:13 };
map2[44] = { s:10, f:13 };
map2[45] = { s:10, f:13 };
map2[46] = { s:9, f:13 };
map2[47] = { s:9, f:13 };
map2[48] = { s:9, f:12 };
map2[49] = { s:9, f:12 };
map2[50] = { s:9, f:12 };
map2[51] = { s:9, f:12 };
map2[52] = { s:9, f:12 };
map2[53] = { s:8, f:12 };
map2[54] = { s:8, f:11 };
map2[55] = { s:8, f:11 };
map2[56] = { s:8, f:11 };
map2[57] = { s:7, f:10 };
map2[58] = { s:7, f:10 };
map2[59] = { s:7, f:10 };
map2[60] = { s:6, f:10 };
map2[61] = { s:6, f:9 };
map2[62] = { s:6, f:9 };
map2[63] = { s:5, f:8 };
map2[64] = { s:5, f:8 };
map2[65] = { s:5, f:8 };
map2[66] = { s:4, f:7 };
map2[67] = { s:3, f:7 };
map2[68] = { s:3, f:6 };

var refreshIntervalId;
var currentshow = 0;
var pause = 3000;

function getLeftBar(x,y) {
		var x5 = Math.floor(x/5)+1;
		var y5 = Math.floor(y/5)+1;
		
		if (x5 < map2[y5].s)  { return 1; }
		else if (map2[y5].s <= x5 && map2[y5].f >= x5) { return 2; }
		else if (x5 > map2[y5].f)  { return 3; }
	
}

function slideRight(barNum) {
		if (barNum == 1) {
		
			$('#slide3').animate({
				left:"526px"
			}, 500, function() {
				// Animation complete.
			});
			
			$('#endCapLeft').animate({
				left:"-30px"
			}, 700, function() {
				// Animation complete.
			});
			
		}
		
		if (barNum <= 2) {
		
			$('#slide2').animate({
				left:"548px"
			}, 500, function() {
				// Animation complete.
			});
			
		}
		
		if (barNum <= 3) {
		
			$('#slide1').animate({
				left:"569px"
			}, 500, function() {
				// Animation complete.
			});
			
            
			$('#endCapRight').animate({
			    left: "591px"
            // }, 700, function () {
			}, 500, function() {
				// Animation complete.
			});
			

		}	
	
	
}

function slideLeft(barNum) {
				if (barNum >= 1) {
					$('#slide3').animate({
						left:"-14px"
					}, 500, function() {
						// Animation complete.
					});
					$('#endCapLeft').animate({
						left:"0px"
					}, 700, function() {
						// Animation complete.
					});
				}
				
				if (barNum >= 2) {
					$('#slide2').animate({
						left:"8px"
					}, 500, function() {
						// Animation complete.
					});
				}
				
				if (barNum == 3) {
					$('#slide1').animate({
						left:"29px"
					}, 500, function() {
						// Animation complete.
					});
                    
					$('#endCapRight').animate({
					//left:"630px"
					    left: "51px"
                    // }, 700, function () {
					}, 500, function() {
						// Animation complete.
					});
                    
				}
	
}

	function rotate(){
			show(); 
			refreshIntervalId = setInterval(show,pause);
	};
			
	 function show(){
				if (currentshow == 0) {
					currentshow = 3;
					slideLeft(currentshow);
				}	else {
					slideRight(currentshow);
					currentshow -= 1;
				}
	};

$(document).ready(function () {
			
			$('#leftClickControl').click(function(e){

    			var offset = $(this).offset();
   				var clickX = (e.clientX - offset.left);
    			var clickY = (e.clientY - offset.top);
				barNum = getLeftBar(clickX,clickY);
				
				slideRight(barNum);
	
			}); // #leftClickControl click end
		
			$('#rightClickControl').click(function(e){

    			var offset = $(this).offset();
   				var clickX = (e.clientX - offset.left);
    			var clickY = (e.clientY - offset.top);
				barNum = getLeftBar(clickX,clickY);
				
				slideLeft(barNum);
	
			}); // #leftClickControl click end		
			
			$('#hero').click(function() {
				clearInterval(refreshIntervalId);
			});
			
			// rotate();
});