// JavaScript Document


var convert = 80  //size variables 1 inch = 80


//change table size
function adjustSize(){
	
	var back_border = document.getElementById("back_border").value;
	var front_border = document.getElementById("front_border").value;
	var sMid = back_border * 2 * convert;
	var sFront = front_border * 2 * convert + sMid;
	
	var size = document.getElementById("size").value; 
	var tbl_big = document.getElementById("tbl_big");
	var tbl_mid = document.getElementById("tbl_mid");
	var tbl_small = document.getElementById("tbl_small");
	
	if(size =='5x5' ){
	tbl_big.setAttribute('height',5 * convert + "px");
	tbl_big.setAttribute('width',5 * convert + "px");
	tbl_mid.setAttribute('height',5 * convert - sMid + "px");
	tbl_mid.setAttribute('width',5 * convert - sMid  + "px");
	tbl_small.setAttribute('height',5 * convert - sFront + "px");
	tbl_small.setAttribute('width',5 * convert - sFront + "px");
	}
	
	if(size =='7x7' ){
	tbl_big.setAttribute('height',7 * convert + "px");
	tbl_big.setAttribute('width',7 * convert + "px");
	tbl_mid.setAttribute('height',7  * convert - sMid + "px");
	tbl_mid.setAttribute('width',7 * convert - sMid + "px");
	tbl_small.setAttribute('height',7 * convert - sFront + "px");
	tbl_small.setAttribute('width',7 * convert - sFront + "px");
	}
	
	if(size =='4x5' ){
	tbl_big.setAttribute('height',4 * convert + "px");
	tbl_big.setAttribute('width',5 * convert + "px");
	tbl_mid.setAttribute('height',4 * convert - sMid + "px");
	tbl_mid.setAttribute('width',5 * convert - sMid + "px");
	tbl_small.setAttribute('height',4 * convert - sFront + "px");
	tbl_small.setAttribute('width',5 * convert - sFront + "px");
	}
	
	if(size =='5x4' ){
	tbl_big.setAttribute('height',5 * convert + "px");
	tbl_big.setAttribute('width',4 * convert + "px");
	tbl_mid.setAttribute('height',5 * convert - sMid + "px");
	tbl_mid.setAttribute('width',4 * convert - sMid + "px");
	tbl_small.setAttribute('height',5 * convert - sFront + "px");
	tbl_small.setAttribute('width',4 * convert - sFront + "px");
	}
	
	if(size =='5x7' ){
	tbl_big.setAttribute('height',5 * convert + "px");
	tbl_big.setAttribute('width',7 * convert + "px");
	tbl_mid.setAttribute('height',5 * convert - sMid + "px");
	tbl_mid.setAttribute('width',7 * convert - sMid + "px");
	tbl_small.setAttribute('height',5 * convert - sFront + "px");
	tbl_small.setAttribute('width',7 * convert - sFront + "px");
	}
	
	if(size =='7x5' ){
	tbl_big.setAttribute('height',7 * convert + "px");
	tbl_big.setAttribute('width',5 * convert + "px");
	tbl_mid.setAttribute('height',7 * convert - sMid + "px");
	tbl_mid.setAttribute('width',5 * convert - sMid + "px");
	tbl_small.setAttribute('height',7 * convert - sFront + "px");
	tbl_small.setAttribute('width',5 * convert - sFront + "px");
	}
	
	if(size =='4x9' ){
	tbl_big.setAttribute('height',4 * convert + "px");
	tbl_big.setAttribute('width',9 * convert + "px");
	tbl_mid.setAttribute('height',4 * convert - sMid + "px");
	tbl_mid.setAttribute('width',9 * convert - sMid + "px");
	tbl_small.setAttribute('height',4 * convert - sFront + "px");
	tbl_small.setAttribute('width',9 * convert - sFront + "px");
	}
	
	if(size =='9x4' ){
	tbl_big.setAttribute('height',9 * convert + "px");
	tbl_big.setAttribute('width',4 * convert + "px");
	tbl_mid.setAttribute('height',9 * convert - sMid + "px");
	tbl_mid.setAttribute('width',4 * convert - sMid + "px");
	tbl_small.setAttribute('height',9 * convert - sFront + "px");
	tbl_small.setAttribute('width',4 * convert - sFront + "px");
	}
	
}

//change table background
function switch_bg(){
	
	var select_small = document.getElementById("select_small").value;
	var select_mid = document.getElementById("select_mid").value;
	var select_big = document.getElementById("select_big").value;
	
	document.getElementById("tbl_small").style.backgroundImage = 'url("images/previewpics/'+ select_small +'")';				
	document.getElementById("tbl_mid").style.backgroundImage = 'url("images/previewpics/'+ select_mid +'")';				
	document.getElementById("tbl_big").style.backgroundImage = 'url("images/previewpics/'+ select_big +'")';
	adjustSize()
}