Hi

i am trying to do some results pinning using FX sort, so basically
when a result is clicked it goes to the top of the result set and is
pinned there , and so on if you click another that goes to the top
along with the first pinned one etc

As far as I can see my code is OK, maybe not the best but it seems to
debug correctly but ... the sorting is messed up. I cant actually show
you the HTML and code as its on an internal system etc , but i have
created a stripped down version for you to look at this gives the same
issues.

An example can be found here: [i cant post links] so you gonna have to work this out

homecheeq[dot]com/sort[dot]html


You can see if you click on say "7" and then "4" , crazy stuff happens
at the moment it , alerts out the ID of the click div and the current
sort order AFTER the sort has been called , the sort order look
correct but the sorting seems to be not the same as the sort order
given in the alert box .

My code is also below , HTML and JSCRIPT, i need help and i dont get
whats going on

HTML CODE

Code:
<html>
<head>
 I HAD TO REMOVE CALL TO JSCRIPT FILES HERE ... because they were links
</head>
<body>

<div class="products">
<div class="product">
0
<div class="sortdiv">
              <a href="#" id="0">Sort </a>
</div>

</div>

<div class="product">
1
<div class="sortdiv">
   <a href="#" id="1">Sort </a>
</div>

</div>

<div class="product">
2
<div class="sortdiv">
   <a href="#" id="2">Sort </a>

</div>

</div>

<div class="product">
3
<div class="sortdiv">
  <a href="#" id="3">Sort </a>

</div>

</div>

<div class="product">
4
<div class="sortdiv">
  <a href="#" id="4">Sort </a>

</div>

</div>

<div class="product">
5
<div class="sortdiv">
  <a href="#" id="5">Sort </a>

</div>

</div>

<div class="product">
6
<div class="sortdiv">
  <a href="#" id="6">Sort </a>

</div>

</div>

<div class="product">
7
<div class="sortdiv">
 <a href="#" id="7">Sort </a>

</div>

</div>

<div class="product">
8
<div class="sortdiv">
 <a href="#" id="8">Sort </a>

</div>

</div>

<div class="product">
9
<div class="sortdiv">
 <a href="#" id="9">Sort </a>

</div>

</div>

</div>

</body>
</html>

JSCRIPT CODE

Code:
var PinningOrder = new Array('0','1','2','3','4','5','6','7','8','9');
var vert;

window.addEvent('domready',function()
{

    vert = new Fx.Sort($$('.product'), {transition:
Fx.Transitions.Back.easeInOut, duration: 1000});

     $$("[class=product]").each(function(obj) {
        $$("[class=sortdiv] a").addEvent('click', PinResults)

   });

 });

function PinResults()
{
  alert(this.id);

  var id = this.id;

  PinningOrder.erase(id);

  var PinningOrderFirst = new Array(this.id);

  var SortOrder = PinningOrderFirst.concat(PinningOrder);
    alert(SortOrder);

  vert.sort(SortOrder).chain(vert.rearrangeDOM.bind(vert));

  PinningOrder.empty(); // empty the pinning order array and fill
again below
  PinningOrder = SortOrder;

 this.id = "xx";
 this.removeEvents('click');
 this.innerHTML = "done";

//   $$("[class=result]").each(function(obj,index) {
//         if (index == 0)
//         {
//           var obj3 =  $$("[class=iconholder] img")[index];
//          // obj3.id = index;
//           var pinValue = index;
//          /// PinningOrder[index] = pinValue;
//           // alert(obj.className);
//           // obj.className = "pinned";
//           /// alert(obj.className);
//           // $$("[class=iconholder] img")[index].addEvent('click',
UnPinResults);
//         }
//         else
//         {
//           var obj2 =  $$("[class=iconholder] img")[index];
//            var pinValue = index;
//          // PinningOrder[index] = pinValue;
//          // alert(obj2);
//          //obj2.id = index;
//
//         }
//
//   });

   /// vert = new Fx.Sort($$('.result'), {transition:
Fx.Transitions.Back.easeInOut, duration: 1000});
//     vert.sort(PinningOrder).chain(vert.rearrangeDOM.bind(vert));

}

Any ideas let me know some of the commeted out code kind of shows what
I have been trying to do but none of it works ;(