/***************************************************************************************
Copyright (C) 2008 Andreas Berger
This script is made by and copyrighted to Andreas Berger - andreas_berger@bretteleben.de
It may be used for free as long as this msg is intact!
****************************************************************************************
Version 20031223
***************************************************************************************
excepted from this copyright is the (seperatly marked) draggable-code by Glen Murphy
***************************************************************************************/
//to call the script from your page insert <script language="JavaScript" type="text/javascript" src="puzzle.js"></script>
//into the head-section of the page
//*****ok, letīs start. the first part of the script contains the puzzlecenter
//SLICEBORDER1!!!
//SLICEBORDER2!!!
//*****common section
//*********************************************************************************
//found it? fine :) ...so, if you intend to use the script with one fixed pic and fixed rows/columns
//at first take out the complete part between the two marks //SLICEBORDER1!!! and //SLICEBORDER2!!!
puzzlecenter=0;//and set this to 0;
//*********************************************************************************
//variables to set (only if you want to use NO puzzlecenter)
if(!puzzlecenter){
puzpic='87.jpg';//the path to your pic
picw=320;//the width you want you pic be displayed on your page
pich=200;//the height you want you pic be displayed on your page
posxa=350;//set this to the left position of your pic to be displayed
posya=300;//set this to the top position of your pic to be displayed
mycols=3;//the number of columns to use
myrows=2;//the number of rows to use
opaz=30;//this is the value of transparency used for the background pic;
//*****set it to any value between 0 and 50 because 50 ist used for activated pieces (while draggin)
stepx=10;//set this to the width of one step (in pixel) when "help" is activated
showlink=1;//set this to 1 if you want to use the integrated link which starts the "help"-function
linkposl=420;//set this to the left position of the link to be displayed
linkpost=280;//set this to the top position of the link to be displayed
linktext=" "//set this to text you want to use for your link
}
modpic=puzpic;//if you want to use a second pic as background for the puzzle,
//*****change this to its path; sample: modpic='mypicnameandpath.jpg';
//*****ok, thatīs it, everthingīs done now, have fun :)
//*****************************************************************************************
stepy=stepx*pich/picw;dragb=picw/mycols;dragh=pich/myrows;

function rand(top,bottom) {if(!bottom) bottom=0;num=Math.random();
  num=bottom+Math.floor(num*(top-bottom+1));return num;}

//function test2(){
if(!puzzlecenter){if(showlink){
document.write("<div id='tex' style='position:absolute;left:"+linkposl+"px; top:"+linkpost+"px;><a href='#' onclick='slide()'>"+linktext+"</a></div>")
}}
document.write("<div id='model' style='position:absolute;left:"+posxa+"px; top:"+posya+"px; width:"+picw+"px; height:"+pich+"px; filter:\"Alpha(Opacity="+opaz+")\";'><img src='"+modpic+"' width="+picw+"px height="+pich+"px></div>")
widfac=0;heifac=0;vonlinksa=new Array();vonobena=new Array();
for(a = 1; a <= mycols*myrows; a++) {
ranx=rand(picw+(posxa*1)-dragb,posxa);
rany=rand(pich+(posya*1)-dragh,posya);
picid="picnum"+a;
pleft=widfac*-1*dragb;
bclip=(widfac+(1*1))*dragb;
dclip=widfac*dragb;
ptop=heifac*-1*dragh;
aclip=heifac*dragh;
cclip=(heifac+(1*1))*dragh;
ie5exepa=vonlinksa.length;vonlinksa[ie5exepa]=dclip+(posxa*1);
ie5exepb=vonobena.length;vonobena[ie5exepb]=aclip+(posya*1);
	document.write("<div id='"+picid+"' style='position:absolute;left:"+ranx+"px; top:"+rany+"px; width:"+dragb+"px; height:"+dragh+"px; clip:rect(0,"+dragb+","+dragh+",0);overflow:hidden; z-index: 3'><img src="+puzpic+" width="+picw+"px height="+pich+"px style='position:absolute;left:"+pleft+"px; top:"+ptop+"px;clip:rect("+aclip+"px,"+bclip+"px,"+cclip+"px,"+dclip+"px);overflow:hidden;' onmousedown=\"engage('"+picid+"');\" onmouseup=\"release('"+picid+"');\"></div>");
widfac+=1; if(widfac>=mycols){widfac=0;heifac+=1;}
}
domoz('model');
//ende von function test2}

function domoz(id){
if(id=='model'){document.getElementById(id).style.MozOpacity=opaz+'%';}
else if(document.getElementById(id).style.MozOpacity!='50%'){
	document.getElementById(id).style.MozOpacity='50%';
	document.getElementById(id).style.filter = 'Alpha(Opacity=50)';}
else {
document.getElementById(id).style.MozOpacity='100%';
document.getElementById(id).style.filter = 'Alpha(Opacity=100)';}
}
/**************************************************
original draggable code
written by Glen Murphy : http://glenmurphy.com/ :
you may use this code if you keep this line intact.
**************************************************/
var d = document;
if(d.all) {var isIE = 1;var isNS6 = 0;}
else if (d.getElementByID) {var isNS6 = 1;var isIE = 0;}
function shiftTo(obj, x, y) {
	theObj = eval("d.getElementById('"+obj+"')");
	theObj.style.top = y;
	theObj.style.left = x;}
	var offsetX, offsetY, curz = 1;
	var mx, my, activeelement;
function engage(thing) {
	activeelement = thing;
	domoz(thing);
	eval("offsetX = mousex - parseInt(d.getElementById('"+activeelement+"').style.left)");
	eval("offsetY = mousey - parseInt(d.getElementById('"+activeelement+"').style.top)");
	theObj = eval("d.getElementById('"+activeelement+"').style");
	theObj.zIndex = curz++;}
function release(thing) {domoz(thing);activeelement = null;}
function mousemoved(evt) {
	if(isIE){mousex = window.event.clientX+document.body.scrollLeft;
		mousey = window.event.clientY+document.body.scrollTop;}
	else {mousex = evt.pageX;mousey = evt.pageY;}
    	if(activeelement) {wx=mousex-offsetX;
   		wy=mousey-offsetY;
   		wx=(wx>0)?wx:0;
   		wy=(wy>0)?wy:0;
    		shiftTo(activeelement,wx, wy);}
	return false;}
document.onmousemove = mousemoved;
/**************************************************
	 END DRAGGABLE CODE
**************************************************/
bremse=0;
function slide() {
	bremse+=1;
	blockinh=new Array();vonlinks=new Array();vonoben=new Array ();
	for(u = 1; u <= mycols*myrows; u++) {
		theId="picnum"+u;
		wertaa = parseInt(vonlinksa[u-1])
		wertbb = parseInt(vonobena[u-1])
		wertcc = parseInt(document.getElementById(theId).style.left)
		wertdd = parseInt(document.getElementById(theId).style.top)
		if (wertaa != wertcc || wertbb != wertdd) {
			blockinh.length = blockinh.length+1;
			zaehlera = blockinh.length - 1;
			blockinh[zaehlera] = theId;
			vonlinks.length = vonlinks.length+1;
			vonlinks[zaehlera] = vonlinksa[u-1];
			vonoben.length = vonoben.length+1;
			vonoben[zaehlera] = vonobena[u-1];
		}}
		if (blockinh.length > 0) {
		for(i = 1; i <= blockinh.length; i++) {
			blockinhalt = blockinh[i-1];
			vonlinksakt = vonlinks[i-1];
			vonobenakt = vonoben[i-1];
			blockxpos = parseFloat(document.getElementById(blockinh[i-1]).style.left);
			blockypos = parseFloat(document.getElementById(blockinh[i-1]).style.top);

		if (blockxpos!=vonlinksakt || blockypos!=vonobenakt){
			diffxmov=0;diffymov=0;diffx=0;diffy=0;
			if (blockxpos!=vonlinksakt){
				diffxmov=stepx;
				diffx=vonlinksakt-blockxpos;
 	 			if(diffx<=0){diffx=-diffx;}
				diffxb=vonlinksakt-blockxpos;
				if(diffxb<=0){diffxmov=-diffxmov;}
				}
  	 		if (blockypos!=vonobenakt){
  				diffymov=stepy;
				diffy=vonobenakt-blockypos;
 	 			if(diffy<=0){diffy=-diffy;}
 	 			diffyb=vonobenakt-blockypos;
				if(diffyb<=0){diffymov=-diffymov;}
				}
 	 	 	if(Math.abs(diffx)<=stepx){blockxpos=vonlinksakt;}else{blockxpos+=diffxmov;}
			if(Math.abs(diffy)<=stepy){blockypos=vonobenakt;}else{blockypos+=diffymov;}
			document.getElementById(blockinh[i-1]).style.left=blockxpos;
			document.getElementById(blockinh[i-1]).style.top=blockypos;
		}}if (bremse < 1000) {setTimeout("slide()",1)}}
}