How to make a scrambled image using arrays?

I'm working on a project where I took a image, cut it up into little bits and now I need to get those bits into an array in a mess up order. The objective is for the player(s) to unscrambled the image. Here is the code for what i have now.

 public var symbolPrefab:GameObject;
 private var gridWidth: int = 8;
 private var gridHeight: int = 8;
 var gridArray:Array;
 var offset:float = .2;
 var imageArray:Array;
 
 
 
 
 
 function Start () 
 {
     createGrid();
     //imageArray = [pic11,pic,12,pic13,pic14,pic15,pic16,pic17,pic18];
     
 }
 
 
 
 function Update () 
 {
     
 }
 
 
 
 
 function createGrid()
 {
     gridArray=[];
     for(var i:int = 0; i < gridHeight; i++){
         var row:Array=[];
         for( var j:int = 0; j < gridWidth; j++){
             var x:float = j*(1+offset);
             var y:float = i*(1+offset);
             var pos:Vector3 = Vector3(x,y,0);
             var rot:Quaternion = new Quaternion();
             //setImageArray();
             var symbol:GameObject = Instantiate( symbolPrefab, pos, rot);
             symbol.transform.parent = transform;
 
             row.Push(symbol);
         }
         gridArray.Push(row);
     }
     transform.position.x = -4;
     transform.position.y = -3;
 }
 function setImageArray (){
     //var rNum:int = Random.Range(0, imageArray.length);
     //var image
 }

I'm aware that I need a septare function to get the image bits into the array but how do I do so? Do I need to have each image to be giving a number that will be randomized as the array is being bult? What do I do? Also I would like if I could get it so that it will understand that the sections are where they need to be.