Magnetic random?
===

I have set out to make a puzzle, and I am trying to make a shuffle function in javascript. When I click the document the pieces shuffle as they are supposed to. But when the purple square goes to position #1 in the grid, it doesn't move!

This is my HTML/Javascript:

    <head>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    </head>
    
    <div id="poster">
    
        <div id="row1">
            <div>
                <img src="images/black.gif" alt="" id="poster_place_1"/>
            </div>
        
            <div>
                <img src="images/blue.gif" alt="" id="poster_place_2" />
            </div>
        
            <div>
                <img src="images/brown.gif" alt="" id="poster_place_3"/>
            </div>
        </div>
        
        <div id="row2">    
            <div>
                <img src="images/cyan.gif" alt="" id="poster_place_4"/>
            </div>
        
            <div>
                <img src="images/darkgreen.gif" alt="" id="poster_place_5"/>
            </div>
        
            <div>
                <img src="images/green.gif" alt="" id="poster_place_6"/>
            </div>
        </div>
        
        <div id="row3">
            <div>
                <img src="images/orange.gif" alt="" id="poster_place_7"/>
            </div>
        
            <div>
                <img src="images/pink.gif" alt="" id="poster_place_8"/>
            </div>
        
            <div>
                <img src="images/purple.gif" alt="" id="poster_place_9"/>
            </div>
        </div>
        
    </div>
    
    <script type="text/javascript" charset="utf-8">
    
    
    function Shuffle(o) {
    	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    	return o;
    };
    
    
    document.onclick = function()
    {
        var testArray = ["poster_place_1","poster_place_2","poster_place_3","poster_place_4","poster_place_5","poster_place_6","poster_place_7","poster_place_8","poster_place_9"];
        Shuffle(testArray);
        document.getElementById("poster_place_9").id = testArray[0];
        document.getElementById("poster_place_8").id = testArray[1];
        document.getElementById("poster_place_7").id = testArray[2];
        document.getElementById("poster_place_6").id = testArray[3];
        document.getElementById("poster_place_5").id = testArray[4];
        document.getElementById("poster_place_4").id = testArray[5];
        document.getElementById("poster_place_3").id = testArray[6];
        document.getElementById("poster_place_2").id = testArray[7];
        document.getElementById("poster_place_1").id = testArray[8];
    
    }
    </script>

and this is the css:

    #poster_place_1 {
        position: absolute;
        left: 0px;
        top: 0px;
    }
    
    #poster_place_2 {
        position: absolute;
        left: 167px;
        top: 0px;
    }
    
    #poster_place_3 {
        position: absolute;
        left: 334px;
        top: 0px;
    }
    
    #poster_place_4 {
        position: absolute;
        left: 0px;
        top: 167px;
    }
    
    #poster_place_5 {
        position: absolute;
        left: 167px;
        top: 167px;
    }
    
    #poster_place_6 {
        position: absolute;
        left: 334px;
        top: 167px;
    }
    
    #poster_place_7 {
        position: absolute;
        left: 0px;
        top: 334px;
    }
    
    #poster_place_8 {
        position: absolute;
        left: 167px;
        top: 334px;
    }
    
    #poster_place_9 {
        position: absolute;
        left: 334px;
        top: 334px;
    }