var box;
	  var im;
	  var s;
      var tempImage;
	  var holex;
	  var holey;
	  var w;
	  var h;
	  var nx;
	  var ny;
	  var border=1;
	  var moves=0;
	  var startTime=new Date().getTime();

	  window.onload=initialise;

	  function initialise(){
	        box=dgE("canvas");
            im=getURLParam("url");
	        sx=getURLParam("x");
            sy=getURLParam("y");            
            //alert(im+" "+sx+" "+sy);
            if (im!='') {window.setTimeout('gen()',1);}
	  }

      function genForm() {
            im=dgE("im").value;
	        sx=dgE("dix").value;
            sy=dgE("diy").value;
            alert(im+" "+sx+" "+sy);
            gen();
      }

      function gen() {
        //alert("gen");
        setDimensions(im,box);
	    //alert(im);
	  }

        function setDimensions(u,d) {
            var imageName = u;
            if (imageName != '') {
                //imageName = 'file:///' + escape(imageName.split('\\').join('/'));
                //imageName = imageName.split('%3A').join(':');
                tempImage = new Image();
                tempImage.onload = getDimensions;
                tempImage.src = imageName + '?randParam=' + new Date().getTime();
				
                // append a timestamp to avoid caching issues - which happen if you overwrite any image with one of different dimensions, and try to get the dimensions again
                // even with cache settings to max, in both ff and ie!
            }
        }

		function getDimensions() {
            //alert(tempImage.width + ' x ' + tempImage.height);
			box.style.width=(tempImage.width+1)+"px";
			box.style.height=(tempImage.height+1)+"px";
                  box.style.background="#000";
			//box.style.backgroundImage="URL('"+im+"')";
			createDivs(box,sx,sy);
        }

	  function createDivs(o,nex,ney) {
		
	    w = parseInt(o.style.width);
	    h = parseInt(o.style.height);
          nx = nex;
          ny = ney;
          var newSquare;

	    for(var i=0; i<nx; i++) {
	      for(var j=0; j<ny; j++) {
		  newSquare=dgE("d"+i+"_"+j);
              if (newSquare == null) {
                newSquare=dcE("div");
		    newSquare.id="d"+i+"_"+j;
              }
		  newSquare.style.left = xctop(i)+"px";
              newSquare.style.top = yctop(j)+"px";
		  newSquare.style.width = (xctop(1)-(border*2))+"px";
              newSquare.style.height = (yctop(1)-(border*2))+"px";
		  newSquare.style.backgroundImage = "URL('"+im+"')";
	        newSquare.style.backgroundPosition = -xctop(i)+"px "+-yctop(j)+"px";
		  newSquare.style.border = border+"px #000 solid";
		  newSquare.onclick=aa;
		  o.appendChild(newSquare);
		}
          }
          
	    for(var i=0; i<nx; i++) {
	      for(var j=0; j<ny; j++) {
              swapPos(dgE("d"+i+"_"+j),dgE("d"+parseInt(Math.random()*nx)+"_"+parseInt(Math.random()*ny)));
            }
          }
          var emptySquare = dgE("d"+(nx-1)+"_"+(ny-1));
          holex=xptoc(parseInt(emptySquare.style.left));
          holey=yptoc(parseInt(emptySquare.style.top));
          //alert(holex+" "+holey);
          emptySquare.style.left = w+"px";
          emptySquare.style.top = h+"px";
        }

      function swapPos(a,b) {
        //alert(a.id+" "+b.id);
        var x = a.style.left;
        var y = a.style.top;
        a.style.left=b.style.left;
        a.style.top=b.style.top;
        b.style.left=x;
        b.style.top=y;
      }

      function xptoc(p) {return parseInt(Math.round(p/(w/nx)));}
      function yptoc(p) {return parseInt(Math.round(p/(h/ny)));}
	  function xctop(c) {return c*(w/nx);}
	  function yctop(c) {return c*(h/ny);}

      function aa() {
        //alert (this.id+" "+xptoc(parseInt(this.style.left))+" "+xptoc(parseInt(this.style.top))+" - "+holex+" "+holey);
        moves++;
		dgE("moves").innerHTML="Moves: "+moves;
		var timeNow=(new Date().getTime())-startTime;
        dgE("time").innerHTML="Time: "+(""+(Math.floor(timeNow/(60000*60))+100)).substring(1,3)+":"
		                              +(""+((Math.floor(timeNow/60000)%60)+100)).substring(1,3)+":"
									  +(""+((Math.floor(timeNow/1000)%60)+100)).substring(1,3);
		if (xptoc(parseInt(this.style.left))==holex) {
          if (yptoc(parseInt(this.style.top))==holey+1) { 
            //alert("move up");
            this.style.top = yctop(holey)+"px";
            holey=holey+1;
            checkSolved();
            return;
          }
          if (yptoc(parseInt(this.style.top))==holey-1) {
            //alert("move down");
            this.style.top = yctop(holey)+"px";
            holey=holey-1;
            checkSolved();
            return;
          }
        }
        if (yptoc(parseInt(this.style.top))==holey) {
          if (xptoc(parseInt(this.style.left))==holex+1) { 
            //alert("move left");
            this.style.left = xctop(holex)+"px";
            holex=holex+1;
            checkSolved();
            return;
          }
          if (xptoc(parseInt(this.style.left))==holex-1) {
            //alert("move right");
            this.style.left = xctop(holex)+"px";
            holex=holex-1;
            checkSolved();
            return;
          }
        }	  
      }

      function checkSolved() {
        var cell;
        var count=0;
        for(var i=0; i<nx; i++) {
	      for(var j=0; j<ny; j++) {
              cell = dgE("d"+i+"_"+j);
              if (xptoc(parseInt(cell.style.left))==i && yptoc(parseInt(cell.style.top))==j) {
                count=count+1;
              }
              //alert(i+" "+j+" - "+xptoc(parseInt(cell.style.left))+" "+yptoc(parseInt(cell.style.top)));
            }
        }
        if (count==((nx*ny)-1)) {
          	for(var i=0; i<nx; i++) {
	      for(var j=0; j<ny; j++) {
		  var cell=dgE("d"+i+"_"+j);
		  cell.style.left = xctop(i)+"px";
              cell.style.top = yctop(j)+"px";
              cell.style.width = (xctop(1))+"px";
              cell.style.height = (yctop(1))+"px";
		  cell.style.border = "0px none";
		}
          }

        }
        //alert(count+" "+(nx*ny));
      }

      function getURLParam(strParamName){
        var strReturn = "";
        var strHref = window.location.href;
        if ( strHref.indexOf("&") > -1 ){
          var strQueryString = strHref.substr(strHref.indexOf("&")).toLowerCase();
          var aQueryString = strQueryString.split("&");
          for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
            if (aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
              var aParam = aQueryString[iParam].split("=");
              strReturn = aParam[1];
              break;
            }
          }
        }
        return strReturn;
      }

	function dgE(o){return document.getElementById(o);}
	function dcE(o){return document.createElement(o);}