/*-----------------------------------------------------------------------------------variables */

/*canvas background color*/
var _canvasColor='#FFFFFF';

/*pyramid color*/
var _pyramidColor='#00587b';
var _circleColor='#FFF';
var _pyramidOverColor='#37b7bb';

/*switch for when an area is active*/
var _active=false;


/*---------------------------------------------------------------------------------------init */
function initPyramid(){
	/*declare new stage*/
	var stage = new Kinetic.Stage({
          container: "pyramidHolder",
          width: 355,
          height: 290
        });

        /*declare ne wlayer to draw on*/
		var layer = new Kinetic.Layer();

        /*coordinates for pyramid1 top,right, left,top*/
		
		/*var pyramid1points = [{
          x: 175,
          y: 5
        }, {
          x: 350,
          y: 285
        }, {
          x: 5,
          y: 285
        }, {
          x: 175,
          y: 5
        }]; */
		var pyramidPoints = [];
		var pyramid = new Array();
		circlePoints = new Array()
		textPoints = new Array();
		//data
		var container = new Array();
			//temp inputs
			container[0] = [1,2];
			container[1] = [1,34,5];
			container[2] = [1,4];
			container[3] = [1,6,3];
			container[4] = [1];
			//alert(container[1].length);
		
		//Dimensions
		var pwidth = 173;
		var pheight = 280;
		var originX = 175;
		var originY = 7;
			ttlBtns = container.length;
		var ttlCol;
		
		//SETUP THE TOP PORTION
		thisPoint = [{
				  x: originX,
				  y: originY
				}, {
				  x: originX+(1)*pwidth/ttlBtns,
				  y: originY+(1)*pheight/ttlBtns
				}, {
				  x: originX-(1)*pwidth/ttlBtns,
				  y: originY+(1)*pheight/ttlBtns
				}, {
				  x: originX,
				  y: originY
				}];
			
			thisPyramid = new Kinetic.Polygon({
			  points: thisPoint,
			  fill: _pyramidColor,
			  stroke: "white",
			  strokeWidth: 5
			});
			
			thisPyramid.on("mousedown touchstart", function() {
			  console.log('down');
			  this.setFill(_pyramidOverColor);
			  _active=true;
			  layer.draw();
			  
			  $(".tab_content").hide(); //hide all
				var selected_tab = $(".tab_content").eq(0); //$(this).find("tab"+btnClicked);//.attr("href");
				$(selected_tab).fadeIn(function() {
				
			   });
											
			  $('#textBox').fadeIn(300);
			  $('.scroll-pane').jScrollPane();
			});
			pyramidPoints[0] = thisPyramid;
			
			/*construct circle to display number*/
			thisCircle = new Kinetic.Circle({
			  x: originX,
			  y: originY+pheight/ttlBtns/2,
			  radius: 15,
			  fill: _circleColor
			});
			circlePoints[0] = thisCircle;
			/*construct number to show inside circle*/
			thisText = new Kinetic.Text({
			  x: originX,
			  y: originY+pheight/ttlBtns/2,
			  text: "1",
			  fontSize: 16,
			  fontFamily: "Arial",
			  fontStyle: "bold",
			  textFill: _pyramidColor,
			  align: "center",
			  verticalAlign: "middle"
			});
			textPoints[0] = thisText;
			////////////////////////////////////////////////////////////////////////////////////
			
		//var container = new Array();
			//temp inputs
		//	container[0] = [1,2];
		//	container[1] = [1,34,5];
		//	container[2] = [1];
		//	container[3] = [1];
		//	container[4] = [1];
		var counter = 1;
		//calculating positions
			//Y positioning for top and bot slice
		var topSideY;
		var botSideY;
			//width of top and bottom slice total
		var topSideW;
		var botSideW;
			//top and bottom edge slice width
		var topSidePW;
		var botSidePW;
			//coordinates
		var botLeft;
		var botRight;
		var topLeft;
		var topRight;
		
		//var lowerwidth = (rowNumber+1)*(pyramidWidth/totalRows);
		//var upperwidth = (rowNumber)*(pyramidWidth/totalRows);
		//var lowRowWidth = (lowerwidth*2) / totalColumns // = the number of splits for the lower flat
		//var highRowWidth = (upperwidth*2) / totalColumns //  = the number of splits for the top flat
		//var botLeft = lowRowWidth*(columnNumber) - lowerwidth;
		//var botRight = lowRowWidth*(columnNumber+1) - lowerwidth;
		//var topLeft = highRowWidth*(columnNumber) - upperwidth;
		//var topRight = highRowWidth*(columnNumber+1) - upperwidth;
		var midW;
		//LOOP THROUGH OTHER LAYERS
		for (var num=1; num < container.length; num++) {
			ttlCol = container[num].length;
			for(var ntwo=0;ntwo<ttlCol;ntwo++){
				thisPoint = pyramidPoints[counter];
				thisItem = pyramid[counter];
				
					//Calculations
				topSideY = num*pheight/ttlBtns;
				botSideY = (num+1)*pheight/ttlBtns
					//width of top and bottom slice total
				topSideW = num*pwidth/ttlBtns;
				botSideW = (num+1)*pwidth/ttlBtns
					//top and bottom edge slice width
				topSidePW = topSideW*2/ttlCol;
				botSidePW = botSideW*2/ttlCol;
					//coordinates
				botLeft = botSidePW*ntwo - botSideW;
				botRight = botSidePW*(ntwo+1) - botSideW;
				topLeft = topSidePW*ntwo - topSideW;
				topRight = topSidePW*(ntwo+1) - topSideW;
				//num+.5)*pwidth/ttlBtns * 2 / ttlCol * ntwo - 
				midW=-(num+.5)*pwidth/ttlBtns + (num+.5)*pwidth/ttlBtns*2/ttlCol * (ntwo+.5);
				
				thisPoint = [{
					  x: originX+topLeft,
					  y: originY+(num)*pheight/ttlBtns
					}, {
					  x: originX+topRight,
					  y: originY+(num)*pheight/ttlBtns
					}, {
					  x: originX+botRight,
					  y: originY+(num+1)*pheight/ttlBtns
					}, {
					  x: originX+botLeft,
					  y: originY+(num+1)*pheight/ttlBtns
					}, {
					  x: originX+topLeft,
					  y: originY+(num)*pheight/ttlBtns
					}];
				
				thisPyramid = new Kinetic.Polygon({
				  points: thisPoint,
				  fill: _pyramidColor,
				  stroke: "white",
				  strokeWidth: 5
				});
				
				thisPyramid.on("mouseover", function() {
				  console.log('over');
				  if (_active==false){
				  this.setFill(_pyramidOverColor);
				  text1.setTextFill(_pyramidOverColor);
				  layer.draw();
				  }
				});
				
				thisPyramid.on("mousedown touchstart", function() {
				  console.log('down');
				  this.setFill(_pyramidOverColor);
				  _active=true;
				  layer.draw();
				  
				  $(".tab_content").hide(); //hide all
					var selected_tab = $(".tab_content").eq(num); //$(this).find("tab"+btnClicked);//.attr("href");
					$(selected_tab).fadeIn(function() {
					
				   });
												
				  $('#textBox').fadeIn(300);
				  $('.scroll-pane').jScrollPane();
				});
					
				pyramidPoints[counter] = thisPyramid;
				
				/*construct circle to display number*/
				thisCircle = new Kinetic.Circle({
				  x: originX+midW,
				  y: originY+(num)*pheight/ttlBtns+pheight/ttlBtns/2,
				  radius: 15,
				  fill: _circleColor
				});
				circlePoints[counter] = thisCircle;
				
				/*construct number to show inside circle*/
				thisText = new Kinetic.Text({
				  x: originX+midW,
				  y: originY+(num)*pheight/ttlBtns+pheight/ttlBtns/2,
				  text: counter,
				  fontSize: 16,
				  fontFamily: "Arial",
				  fontStyle: "bold",
				  textFill: _pyramidColor,
				  align: "center",
				  verticalAlign: "middle"
				});
				textPoints[counter] = thisText;
				counter++;
			}
			
		}
				
		
		
        /*construct pyramid1
		var pyramid1 = new Kinetic.Polygon({
          points: pyramid1points,
          fill: _pyramidColor,
          stroke: "white",
          strokeWidth: 5
        });
		var pyramid2 = new Kinetic.Polygon({
          points: pyramid2points,
          fill: _pyramidColor,
          stroke: "white",
          strokeWidth: 5
        });
		*/
		/*add interactions
		pyramid1.on("mouseover", function() {
          console.log('over');
		  if (_active==false){
		  this.setFill(_pyramidOverColor);
		  text1.setTextFill(_pyramidOverColor);
          layer.draw();
		  }
        });
		pyramid1.on("mouseout", function() {
          console.log('out');
		  if (_active==false){
		  this.setFill(_pyramidColor);
		  text1.setTextFill(_pyramidColor);
          layer.draw();
		  }
        });
		pyramid1.on("mousedown touchstart", function() {
          console.log('down');
		  this.setFill(_pyramidOverColor);
		  _active=true;
          layer.draw();
		  
		  $(".tab_content").hide(); //hide all
			var selected_tab = $(".tab_content").eq(1); //$(this).find("tab"+btnClicked);//.attr("href");
			$(selected_tab).fadeIn(function() {
			
		   });
										
		  $('#textBox').fadeIn(300);
		  $('.scroll-pane').jScrollPane();
        });
		pyramid2.on("mousedown touchstart", function() {
          console.log('down');
		  this.setFill(_pyramidOverColor);
		  _active=true;
          layer.draw();
		  
		  $(".tab_content").hide(); //hide all
			var selected_tab = $(".tab_content").eq(2); //$(this).find("tab"+btnClicked);//.attr("href");
			$(selected_tab).fadeIn(function() {
			
		   });
										
		  $('#textBox').fadeIn(300);
		  $('.scroll-pane').jScrollPane();
        });		
		*/
		/*construct circle to display number
		var circle1 = new Kinetic.Circle({
          x: 175,
          y: 142,
          radius: 15,
          fill: _circleColor
        });
		*/
		/*construct number to show inside circle
		var text1 = new Kinetic.Text({
          x: 175,
          y: 142,
          text: "1",
          fontSize: 16,
          fontFamily: "Arial",
		  fontStyle: "bold",
          textFill: _pyramidColor,
          align: "center",
          verticalAlign: "middle"
        });
*/
        // add the shapes to the layer
		for (num=0; num < counter; num++) {
        	layer.add(pyramidPoints[num]);
        	layer.add(circlePoints[num]);
        	layer.add(textPoints[num]);
		}
       // layer.add(pyramid2);
		//layer.add(circle1);
		//layer.add(text1);

        // add the layer to the stage
        stage.add(layer);
		
		//pyramid2();
}

