﻿//	[VARS]
//	-----------------------------------------------------------------
		var _divActiveOverlay;


//	[BOX TOGGLE]
//	-----------------------------------------------------------------
		function boxOverlayToggle(page){

			// First reset previous overlay to display: none;
			$(_divActiveOverlay).css('display','none');

			//	The name of the showing div and show
			_divName = ".canvas."+page
			$(_divName).css('display','block');
			

			//	Show total overlay
			$('.box-overlay').toggle();
			
			//	Position canvas box in overlay
			boxOverlayPosition();

			// Fill var
			_divActiveOverlay = _divName;
		}


//	[POSITION] UI
//	-----------------------------------------------------------------
		function boxOverlayPosition() {

			//	Vars
			var stageWidth = $(window).width();
			var stageHeight = $(window).height();

			//	Values
			var _divBoxContainerWidth = $(".box-overlay .container").width();
			var _divBoxContainerHeight = $(".box-overlay .container").height();


			// Product - Content
			var divContainerCanvas = $(".box-overlay .container");
					divContainerCanvas.css("top",(stageHeight / 2) - (_divBoxContainerHeight / 2));
					divContainerCanvas.css("left",(stageWidth / 2) - (_divBoxContainerWidth / 2));

		};


//	[RESIZE]
//	-----------------------------------------------------------------
		$(window).resize(function() {
		  boxOverlayPosition();
		});

//	[INIT]
//	-----------------------------------------------------------------
		$(document).ready(function(){
			boxOverlayPosition();
		});
