// creating my own custom dropzone

var CustomDropzone = Class.create();
CustomDropzone.prototype = (new Rico.Dropzone()).extend( {
	initialize: function( htmlElement, setArray ) {
		var node = document.getElementById(htmlElement);
		this.htmlElementString = node.id;
		this.htmlElement  = $(htmlElement);
		this.absoluteRect = null;
		this.setArray = setArray;		
	},
	
	accept: function(draggableObjects) {
		// now put code here to do what you need to when something is dropped
		// this.htmlElement is the name of the dropzone
		// draggableObjects[0].htmlElement is the name of the first draggable element
		var htmlElement = this.getHTMLElement();
      if ( htmlElement == null )
         return;
      //htmlelement is the id of the dropzone where the draggableObject is droped
      n = draggableObjects.length;
      //alert(n);      
      
      for ( var i = 0 ; i < n ; i++ )
      {
         var theGUI = draggableObjects[i].getDroppedGUI();
         //alert(theGUI.id);
         if ( RicoUtil.getElementsComputedStyle( theGUI, "position" ) == "absolute" )
         {
            theGUI.style.position = "static";
            theGUI.style.top = "";
            theGUI.style.top = "";
         }
         //place the dragged element on the image placeholder below 
         //and push other sets one back or viceversa
         //id of the image that has been dragged
         var draggedsetid = theGUI.id;
         //id of the dropzone on which image has been dropped
         var dropzoneid = this.htmlElement.id; 	
         if( dropzoneid == 'toprevpage' || 	dropzoneid == 'tonextpage'){
         	if(dropzoneid == 'toprevpage')
            	this._movefromthispagetoprev(draggedsetid);
            else
                this._movefromthispagetonext(draggedsetid);	
         }else{
         //id of set associated to the current dropzone 
         var droppedoversetid = dropzoneid.substring(9,200);
         droppedoversetid = 'imagedrag' + droppedoversetid;              
         
         //swap the images corresponding to ids
         this._invokedrag(draggedsetid, droppedoversetid);
         }
         //htmlElement.appendChild(theGUI);         
      }
    },    
    
   _movefromthispagetoprev: function(draggedsetid){
        index = draggedsetid.substring(9,200);
   		index = index*1;
   		if(index < 48){
   		   alert("Sorry you can't move the prev page");
   		}else{
   		   currpage = parseInt(index/48);
   		   newindexofset = (currpage - 1)*48;
   		   startindex = currpage * 48;
   		   endindex = startindex + 47;
   		   if(this.setArray.length < endindex)
   		        endindex = this.setArray.length;
   		   //adjust for numbr opf images moved to next page
   		   numofmove = parseInt(new getObj('noofmovetoprev').value);   		   
   		   //alert(numofmove);
   		   startindex =  startindex + numofmove;  		   
     	   //rearrange the setArray and the images on the 
   		   this._resetimagesonpagetoprev(index, startindex);
   		   this._deregisterfirstimage(startindex);
   		   this._reordersetarraytoleft(index, newindexofset);
   		   new getObj('noofmovetoprev').value = numofmove + 1;
   		   var setValue = "";
	       for(k = 0; k< this.setArray.length; k++){
	          setValue += this.setArray[k] + ",";
	       }       
	       new getObj('setarrayid').value = setValue;
	   	}
   },   
   
   
   _resetimagesonpagetoprev: function(index, startindex){
       for(i = index; i > startindex; i--){
           this._moveimagetoprev(i, i-1);
       }
   },
   
   _moveimagetoprev: function(index, index1){
      droptitle =  new getObj('imagedrop' + index1).title;  
      thumbfile = (new getObj('imagedrag' + index1)).src;      
      dragtitle =  new getObj('imagedrag' + index1).title;
      new getObj('imagedrop' + index).title = droptitle;
      new getObj('imagedrag' + index).src = thumbfile;
      new getObj('imagedrag' + index).title = dragtitle;
   },
   
   _reordersetarraytoleft: function(index, newindexofset){
      temp = this.setArray[index];
      //alert("index : " + index + " newindexofset : " + newindexofset);
      for(i = index; i > newindexofset; i--){
           this.setArray[i] = this.setArray[i - 1];
       }
       this.setArray[newindexofset] = temp;
       
   },
   
   _deregisterfirstimage: function(index){
        
        
        //deregister drop zone 
        imagedropid = new getObj('imagedrop' + index).id;
        imagedrop = new CustomDropzone(imagedropid, setArray);    
        dndMgr.deregisterDropZone(imagedrop);
        
        //register draggable
        imagedragid = new getObj('imagedrag' + index).id;
        imagedrag = new Rico.Draggable('rico draggable',imagedragid);    
        dndMgr.deregisterDraggable(imagedrag);
        
        new getObj('imagedrop' + index).title = "";  
        new getObj('imagedrag' + index).src = "skins/main/images/account/icons/image_moved.gif";   
        new getObj('dropimageholder' + index).src = "skins/main/images/account/dot.gif";                     
        new getObj('imagedrag' + index).title = "";
        
   		
   },
   
   _movefromthispagetonext: function(draggedsetid){
        index = draggedsetid.substring(9,200);
   		index = index*1;
   		if(this.setArray.length < (parseInt(index/48)+1)*48){
   		   alert("Sorry you can't move the next page");
   		}else{
   		   currpage = parseInt(index/48);
   		   newindexofset = (currpage + 2)*48 - 1;
   		   if(newindexofset > this.setArray.length - 1){
   		      newindexofset = this.setArray.length - 1;
   		   }
   		   startindex = currpage * 48;
   		   endindex = startindex + 47;
   		   //adjust for numbr opf images moved to next page
   		   numofmove = parseInt(new getObj('noofmovetonext').value);
   		   //alert(numofmove);
   		   endindex =  endindex - numofmove;  		   
     	   //rearrange the setArray and the images on the 
   		   this._resetimagesonpagetonext(index, endindex);
   		   this._deregisterlastimage(endindex);
   		   this._reordersetarraytoright(index, newindexofset);
   		   new getObj('noofmovetonext').value = numofmove + 1;
   		   var setValue = "";
	       for(k = 0; k< this.setArray.length; k++){
	          setValue += this.setArray[k] + ",";
	       }       
	       new getObj('setarrayid').value = setValue;
	   	}
   		
   },
   
     
   
   _resetimagesonpagetonext: function(index, endindex){
       for(i = index; i < endindex; i++){
           this._moveimagetonext(i, i+1);
       }
   },
   
   _moveimagetonext: function(index, index1){
      droptitle =  new getObj('imagedrop' + index1).title;  
      thumbfile = (new getObj('imagedrag' + index1)).src;      
      dragtitle =  new getObj('imagedrag' + index1).title;
      new getObj('imagedrop' + index).title = droptitle;
      new getObj('imagedrag' + index).src = thumbfile;
      new getObj('imagedrag' + index).title = dragtitle;
   },
   
   _reordersetarraytoright: function(index, newindexofset){
      temp = this.setArray[index];
      //alert("index : " + index + " newindexofset : " + newindexofset);
      for(i = index; i < newindexofset; i++){
           this.setArray[i] = this.setArray[i + 1];
       }
       this.setArray[newindexofset] = temp;
       
   },
   
   _deregisterlastimage: function(index){
        
        
        //deregister drop zone 
        imagedropid = new getObj('imagedrop' + index).id;
        imagedrop = new CustomDropzone(imagedropid, setArray);    
        dndMgr.deregisterDropZone(imagedrop);
        
        //register draggable
        imagedragid = new getObj('imagedrag' + index).id;
        imagedrag = new Rico.Draggable('rico draggable',imagedragid);    
        dndMgr.deregisterDraggable(imagedrag);
        
        new getObj('imagedrop' + index).title = "";  
        new getObj('imagedrag' + index).src = "skins/main/images/account/icons/image_moved.gif";   
        new getObj('dropimageholder' + index).src = "skins/main/images/account/dot.gif";                     
        new getObj('imagedrag' + index).title = "";
        
   		
   },
   
   _invokedrag: function(draggedsetid, droppedoversetid){
   		   
   		   index1 = draggedsetid.substring(9,200);
   		   index1 = index1*1;
   	  	   index2 = droppedoversetid.substring(9,200);
   	  	   index2 = index2*1;
   	  	   //alert(index1 + " " + index2);
        if(index1 > index2){
            //alert("index1 greater" + " " + index1 + " " + index2);            
        	for(g = index1 ; g > index2; g--){
        	    this._swapimages(g, g-1);
        	}
        }
        if(index1 < index2){
          //alert("index2 greater" + " " + index1 + " " + index2);
        //alert(typeof(index1) + " " + typeof(index2));
            for(g = index1 ; g < index2-1; g++){               
        	    this._swapimages(g, g*1 + 1);
        	}
        }
                   
       var setValue = "";
       for(k = 0; k< this.setArray.length; k++){
          setValue += this.setArray[k] + ",";
       }       
       new getObj('setarrayid').value = setValue;
       //alert(new getObj('setarrayid').value);	   
   		
   },   
   
   
   _swapimages: function(index1, index2){      
      
       //get the titles of the drop zones
       droptitle1 =  new getObj('imagedrop' + index1).title;
       droptitle2 =  new getObj('imagedrop' + index2).title;
       
       //get the srcs of the images to be swapped       
       thumbfile1 = (new getObj('imagedrag' + index1)).src;    	   
       thumbfile2 = (new getObj('imagedrag' + index2)).src;   
       
       //get the titles of two images to be swapped
       dragtitle1 =  new getObj('imagedrag' + index1).title;
       dragtitle2 =  new getObj('imagedrag' + index2).title;
	   
	   //swap the dropzone titles
	   new getObj('imagedrop' + index1).title = droptitle2;
	   new getObj('imagedrop' + index2).title = droptitle1;
	   
	   //swap the images
	   new getObj('imagedrag' + index1).src = thumbfile2;
	   new getObj('imagedrag' + index2).src = thumbfile1;  
	   
	   //swap the image titles
	   new getObj('imagedrag' + index1).title = dragtitle2;
	   new getObj('imagedrag' + index2).title = dragtitle1; 	
	   
	   //change the setArray
	   temp = this.setArray[index1];
	   this.setArray[index1] = this.setArray[index2];   
       this.setArray[index2] = temp;
   }
    
} );


function getElementsByClass1(node, classname)
{
	var a = [];
	var re = new RegExp('\\b' + classname + '\\b');
	var els = node.getElementsByTagName("*");
	for(var i=0,j=els.length; i<j; i++)
		if(re.test(els[i].className))a.push(els[i]);
	return a;
}

function getObj(name)
{
  if (document.getElementById)
  {
      this.obj = document.getElementById(name);
  }
  else if (document.all)
  {
        this.obj = document.all[name];
  }
  else if (document.layers)
  {
       this.obj = document.layers[name];
  }
  return this.obj;
}