function showPic(){   // define attributes of the images div.
var picobj    = id("ShowPic");
picobj.style.display = "block";
picobj.style.background = "#ffffff";
picobj.style.position = "absolute";
picobj.style.zindex   = "999";
picobj.style.width    =  "500px";
picobj.style.height   =  "400px";
picobj.style.top = "250px";
picobj.style.left = "200px";

}


function alertWinPic(title, msg, w, h){ 
	
	var iWidth = document.documentElement.clientWidth; 
	var iHeight = document.documentElement.clientHeight; 
	
	var coldiv=id("ShowPic");
	coldiv.style.cssText = "position:absolute;top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid ;padding:1px;line-height:22px;z-index:102;display:none;overflow:scroll;";
	document.body.appendChild(coldiv);
	
	var table = document.createElement("table");
	coldiv.appendChild(table);
	table.style.cssText = "margin:0px;border:0px;padding:0px;";
	table.cellSpacing = 0;

	var titleBarPic = id('picTitle')
	titleBarPic.style.cssText = "width:100%;text-align:left;border:1px solid ;cursor:move;padding:3px 50px 5px 50px; background-color: #e2eaf8"
	var moveX = 0;
	var moveY = 0;
	var moveTop = 0;
	var moveLeft = 0;
	var moveable = false;
	var docMouseMoveEvent = document.onmousemove;
	var docMouseUpEvent = document.onmouseup;
	titleBarPic.onmousedown = function() {
		var evt = getEvent();
		moveable = true; 
		moveX = evt.clientX;
		moveY = evt.clientY;
		moveTop = parseInt(coldiv.style.top);
		moveLeft = parseInt(coldiv.style.left);
		
		document.onmousemove = function() {
			if (moveable) {
				var evt = getEvent();
				var x = moveLeft + evt.clientX - moveX;
				var y = moveTop + evt.clientY - moveY;
				if ( x > 0  && y > 0 ) {
					coldiv.style.left = x + "px";
					coldiv.style.top = y + "px";
				}
			}	
		};
		document.onmouseup = function () { 
			if (moveable) { 
				document.onmousemove = docMouseMoveEvent;
				document.onmouseup = docMouseUpEvent;
				moveable = false; 
				moveX = 0;
				moveY = 0;
				moveTop = 0;
				moveLeft = 0;
			} 
		};
	}

function createDiv()
{

var imgname1="http://www.labels4kids.com/uploadedFiles/Image/ImageIcons/"; 
var imgname2=".gif"; 
var imgname3="http://www.labels4kids.com/uploadedFiles/Image/transparent_images/"; 
var col= 7;
var row= 11;
 coldiv = id("ShowPic");
 
mytable = document.createElement("table"); 
mytablebody = document.createElement("tbody");
         
for(var j = 0; j < row; j++) {
    mycurrent_row = document.createElement("tr");
 if (j<10){ 
    for(var i = 0; i < col; i++) {
    mycurrent_cell = document.createElement("td");
    img = document.createElement ("img");   
    img.src = imgname1 + (j*7 + 1 +i)+ imgname2;
    img.width = "60";
    img.height = "60"; 
    img.id =  "BgP_" + (j*7 + 1 +i);
    img.title = j*7 + 1 +i;
    mycurrent_cell.appendChild(img);
    mycurrent_row.appendChild(mycurrent_cell);
             }
        }
    
else { 
    for (var i = 0; i < 4; i++) {
    mycurrent_cell = document.createElement("td");
    img = document.createElement ("img");   
    img.src = imgname1 + (j*7 + 1 + i)+ imgname2;
    img.width = "60";
    img.height = "60";
    img.id =  "BgP_"+ (j*7 + 1 +i); 
    img.title = j*7 + 1 +i;
    mycurrent_cell.appendChild(img);
    mycurrent_row.appendChild(mycurrent_cell);
        }
    }
    mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
coldiv.appendChild(mytable);
mytable.setAttribute("border", "2");



function setPic() {
  img = id('preview_img'); 
  img.style.display = "inline";
  updatePreview();
}

// Set picture

  id('BgP_1').onclick = setPic1;
  id('BgP_2').onclick = setPic2;
  id('BgP_3').onclick = setPic3;
  id('BgP_4').onclick = setPic4;
  id('BgP_5').onclick = setPic5;
  id('BgP_6').onclick = setPic6;
  id('BgP_7').onclick = setPic7;
  id('BgP_8').onclick = setPic8;
  id('BgP_9').onclick = setPic9;
  id('BgP_10').onclick = setPic10;
  id('BgP_11').onclick = setPic11;
  id('BgP_12').onclick = setPic12;
  id('BgP_13').onclick = setPic13;
  id('BgP_14').onclick = setPic14;
  id('BgP_15').onclick = setPic15;
  id('BgP_16').onclick = setPic16;
  id('BgP_17').onclick = setPic17;
  id('BgP_18').onclick = setPic18;
  id('BgP_19').onclick = setPic19;
  id('BgP_20').onclick = setPic20;
  id('BgP_21').onclick = setPic21;
  id('BgP_22').onclick = setPic22;
  id('BgP_23').onclick = setPic23;
  id('BgP_24').onclick = setPic24;
  id('BgP_25').onclick = setPic25;
  id('BgP_26').onclick = setPic26;
  id('BgP_27').onclick = setPic27;
  id('BgP_28').onclick = setPic28;
  id('BgP_29').onclick = setPic29;
  id('BgP_30').onclick = setPic30;
  id('BgP_31').onclick = setPic31;
  id('BgP_32').onclick = setPic32;
  id('BgP_33').onclick = setPic33;
  id('BgP_34').onclick = setPic34;
  id('BgP_35').onclick = setPic35;
  id('BgP_36').onclick = setPic36;
  id('BgP_37').onclick = setPic37;
  id('BgP_38').onclick = setPic38;
  id('BgP_39').onclick = setPic39;
  id('BgP_40').onclick = setPic40;
  id('BgP_41').onclick = setPic41;
  id('BgP_42').onclick = setPic42;
  id('BgP_43').onclick = setPic43;
  id('BgP_44').onclick = setPic44;
  id('BgP_45').onclick = setPic45;
  id('BgP_46').onclick = setPic46;
  id('BgP_47').onclick = setPic47;
  id('BgP_48').onclick = setPic48;
  id('BgP_49').onclick = setPic49;
  id('BgP_50').onclick = setPic50;
  id('BgP_51').onclick = setPic51;
  id('BgP_52').onclick = setPic52;
  id('BgP_53').onclick = setPic53;
  id('BgP_54').onclick = setPic54;
  id('BgP_55').onclick = setPic55;
  id('BgP_56').onclick = setPic56;
  id('BgP_57').onclick = setPic57;
  id('BgP_58').onclick = setPic58;
  id('BgP_59').onclick = setPic59;
  id('BgP_60').onclick = setPic60;
  id('BgP_61').onclick = setPic61;
  id('BgP_62').onclick = setPic62;
  id('BgP_63').onclick = setPic63;
  id('BgP_64').onclick = setPic64;
  id('BgP_65').onclick = setPic65;
  id('BgP_66').onclick = setPic66;
  id('BgP_67').onclick = setPic67;
  id('BgP_68').onclick = setPic68;
  id('BgP_69').onclick = setPic69;
  id('BgP_70').onclick = setPic70;
  id('BgP_71').onclick = setPic71;
  id('BgP_72').onclick = setPic72;
  id('BgP_73').onclick = setPic73;
  id('BgP_74').onclick = setPic74;


// Set pictures

function setPic1() {
   setPic();
   img.src = imgname3 + 1 + imgname2;
}
function setPic2() {
   setPic();
   img.src = imgname3 + 2 + imgname2;
}
function setPic3() {
   setPic();
   img.src = imgname3 + 3 + imgname2;
}
function setPic4() {
   setPic();
   img.src = imgname3 + 4 + imgname2;
}
function setPic5() {
   setPic();
   img.src = imgname3 + 5 + imgname2;
}
function setPic6() {
   setPic();
   img.src = imgname3 + 6 + imgname2;
}
function setPic7() {
   setPic();
   img.src = imgname3 + 7 + imgname2;
}
function setPic8() {
   setPic();
   img.src = imgname3 + 8 + imgname2;
}
function setPic9() {
   setPic();
   img.src = imgname3 + 9 + imgname2;
}
function setPic10() {
   setPic();
   img.src = imgname3 + 10 + imgname2;
}
function setPic11() {
   setPic();
   img.src = imgname3 + 11 + imgname2;
}
function setPic12() {
   setPic();
   img.src = imgname3 + 12 + imgname2;
}
function setPic13() {
   setPic();
   img.src = imgname3 + 13 + imgname2;
}
function setPic14() {
   setPic();
   img.src = imgname3 + 14 + imgname2;
}
function setPic15() {
   setPic();
   img.src = imgname3 + 15 + imgname2;
}
function setPic16() {
   setPic();
   img.src = imgname3 + 16 + imgname2;
}
function setPic17() {
   setPic();
   img.src = imgname3 + 17 + imgname2;
}
function setPic18() {
   setPic();
   img.src = imgname3 + 18 + imgname2;
}
function setPic19() {
   setPic();
   img.src = imgname3 + 19 + imgname2;
}
function setPic20() {
   setPic();
   img.src = imgname3 + 20 + imgname2;
}
function setPic21() {
   setPic();
   img.src = imgname3 + 21 + imgname2;
}
function setPic22() {
   setPic();
   img.src = imgname3 + 22 + imgname2;
}
function setPic23() {
   setPic();
   img.src = imgname3 + 23 + imgname2;
}
function setPic24() {
   setPic();
   img.src = imgname3 + 24 + imgname2;
}
function setPic25() {
   setPic();
   img.src = imgname3 + 25 + imgname2;
}
function setPic26() {
   setPic();
   img.src = imgname3 + 26 + imgname2;
}
function setPic27() {
   setPic();
   img.src = imgname3 + 27 + imgname2;
}
function setPic28() {
   setPic();
   img.src = imgname3 + 28 + imgname2;
}
function setPic29() {
   setPic();
   img.src = imgname3 + 29 + imgname2;
}
function setPic30() {
   setPic();
   img.src = imgname3 + 30 + imgname2;
}
function setPic31() {
   setPic();
   img.src = imgname3 + 31 + imgname2;
}
function setPic32() {
   setPic();
   img.src = imgname3 + 32 + imgname2;
}
function setPic33() {
   setPic();
   img.src = imgname3 + 33+ imgname2;
}
function setPic34() {
   setPic();
   img.src = imgname3 + 34 + imgname2;
}
function setPic35() {
   setPic();
   img.src = imgname3 + 35 + imgname2;
}
function setPic36() {
   setPic();
   img.src = imgname3 + 36 + imgname2;
}
function setPic37() {
   setPic();
   img.src = imgname3 + 37 + imgname2;
}
function setPic38() {
   setPic();
   img.src = imgname3 + 38 + imgname2;
}
function setPic39() {
   setPic();
   img.src = imgname3 + 39 + imgname2;
}
function setPic40() {
   setPic();
   img.src = imgname3 + 40 + imgname2;
}
function setPic41() {
   setPic();
   img.src = imgname3 + 41 + imgname2;
}
function setPic42() {
   setPic();
   img.src = imgname3 + 42 + imgname2;
}
function setPic43() {
   setPic();
   img.src = imgname3 + 43 + imgname2;
}
function setPic44() {
   setPic();
   img.src = imgname3 + 44 + imgname2;
}
function setPic45() {
   setPic();
   img.src = imgname3 + 45 + imgname2;
}
function setPic46() {
   setPic();
   img.src = imgname3 + 46 + imgname2;
}
function setPic47() {
   setPic();
   img.src = imgname3 + 47 + imgname2;
}
function setPic48() {
   setPic();
   img.src = imgname3 + 48 + imgname2;
}
function setPic49() {
   setPic();
   img.src = imgname3 + 49 + imgname2;
}
function setPic50() {
   setPic();
   img.src = imgname3 + 50 + imgname2;
}
function setPic51() {
   setPic();
   img.src = imgname3 + 51 + imgname2;
}
function setPic52() {
   setPic();
   img.src = imgname3 + 52 + imgname2;
}
function setPic53() {
   setPic();
   img.src = imgname3 + 53 + imgname2;
}
function setPic54() {
   setPic();
   img.src = imgname3 + 54 + imgname2;
}
function setPic55() {
   setPic();
   img.src = imgname3 + 55 + imgname2;
}
function setPic56() {
   setPic();
   img.src = imgname3 + 56 + imgname2;
}
function setPic57() {
   setPic();
   img.src = imgname3 + 57 + imgname2;
}
function setPic58() {
   setPic();
   img.src = imgname3 + 58 + imgname2;
}
function setPic59() {
   setPic();
   img.src = imgname3 + 59 + imgname2;
}
function setPic60() {
   setPic();
   img.src = imgname3 + 60 + imgname2;
}
function setPic61() {
   setPic();
   img.src = imgname3 + 61 + imgname2;
}
function setPic62() {
   setPic();
   img.src = imgname3 + 62 + imgname2;
}
function setPic63() {
   setPic();
   img.src = imgname3 + 63 + imgname2;
}
function setPic64() {
   setPic();
   img.src = imgname3 + 64 + imgname2;
}
function setPic65() {
   setPic();
   img.src = imgname3 + 65 + imgname2;
}
function setPic66() {
   setPic();
   img.src = imgname3 + 66 + imgname2;
}
function setPic67() {
   setPic();
   img.src = imgname3 + 67 + imgname2;
}
function setPic68() {
   setPic();
   img.src = imgname3 + 68 + imgname2;
}
function setPic69() {
   setPic();
   img.src = imgname3 + 69 + imgname2;
}
function setPic70() {
   setPic();
   img.src = imgname3 + 70 + imgname2;
}
function setPic71() {
   setPic();
   img.src = imgname3 + 71 + imgname2;
}
function setPic72() {
   setPic();
   img.src = imgname3 + 72 + imgname2;
}
function setPic73() {
   setPic();
   img.src = imgname3 + 73 + imgname2;
}
function setPic74() {
   setPic();
   img.src = imgname3 + 74 + imgname2;
}


}

  

	var picBox = table.insertRow(-1).insertCell(-1);
	picBox.innerHTML = createDiv();
	picBox.innerHTML = msg;
 

	
    // 获得事件Event对象，用于兼容IE和FireFox
    function getEvent() {
	    return window.event || arguments.callee.caller.arguments[0];
    }
	
} 
function hidePic(){  //hide colour div.
    id("ShowPic").style.display = "none";

}

// Remove image from preview
 function removeImg() {
  removepic = id('preview_img');
  removepic.style.display = "none";
  updatePreview();
}

function invertImg(){
  if(id('LabelView').style.color == "#ffffff"){
    id('preview_img').style.filter = "invert";
  }else id('preview_img').style.filter = "none";
}