// do not use padding in div boxes use class member spacing instead (10 = 10px)
	// usage: var Slide = new ImageSlider();
	// 	 Slide.Property = ...
	//	 Slide.Start();
	
	function ImageSlider(numImages,containerId,horizontalAlign){
        this.divs = new Array(); //all images	
        this.divRingStart = new Object();    // Ring entry point      
        this.lastItemToDisplay = new Object(); // pointer to fifth div
        this.horizontal = horizontalAlign; // alignment (horizontal = true)
        this.numDisplayImages = numImages; // images to display
        this.speed = 10; // start time.
      	this.ImageContainerHeight = 0; // internal sourrounding Div Height (resized automatically)(if alignment is horizontal style.height value is used)
      	this.ImageContainerWidth = 0; // internal sourrounding div width (resized automatically) (if alignment is vertical style.width value is used)
      	this.spacing = 20;  // spacing between images
        this.scrollTime = 30;	 // scroll speed 
        this.newHeight = 0; 	// internal size of the sourrounding div Height after scrolling
        this.newWidth = 0;      // internal size of the sourrounding div Height after scrolling
        this.timeoutStart = 3000;  // wait xxx ms before scrolling the first time
        this.timeoutRunning = 4000; // wait xxx ms before scrolling the next time
        this.ContainerId = containerId; // Id of the sourrounding div.
        this.ContainerElement; // to avoid getElementById 
        this.SlideMethode;        
        this.setPosition;
	}		
	
	// start Slideshow
    ImageSlider.prototype.Start = function(){
    	with(this){    		 
    		var _speed = Init(speed);    		
		    var _self = this; 	      
	  	    setTimeout(function(){ 			   
	     		_self.show();  // start scrolling after _speed
           	}, _speed);
    	}
    }
    // initialize Internal data structure (called only once)
    ImageSlider.prototype.Init = function(time) {		
	  with(this){	      
          var _speed = time;      
          ContainerElement = document.getElementById(ContainerId);
	      imgs = ContainerElement.getElementsByTagName("img");	  	  	  	  	      
	      divs = ContainerElement.getElementsByTagName("div");	  	  		                    	      
          InitDivContainer();//initialize internal data structure.          
          ImageContainerHeight = parseInt((ContainerElement.style.height).substring(0,(ContainerElement.style.height).length-2)); //read container height from div element
          ImageContainerWidth= parseInt((ContainerElement.style.width).substring(0,(ContainerElement.style.width).length-2));     // read container width from div element
	      CalculateContainerDimension(divRingStart);  //sets newHeight,newWidth + lastItemToDisplay (set position of every image, and make sure they fit in the container)
	      _speed += ResizeContainer(_speed); // if container height or width is to small resize Container
	      _speed += timeoutStart; // make sure resize is in time.
	      
	      if(horizontal){	        
	        this.SlideMethode = scrollLeft;	        	  
	      }
	      else{
	        this.SlideMethode = scrollTop;	
	      }
	  return _speed;
		  
	   }
	}
	// initialize internal data structure (ring) (called only once)
	ImageSlider.prototype.InitDivContainer = function()
	{
	    with(this)
	    {	 
	         var item;    	     
	         for(j=0;j<divs.length;j++){					 
		        if(j==0){
		            divRingStart.next = null; 
		            item = divRingStart;	
		        }
		        else{
		         item = new Object(); 
		        }																									  	
	  	        item.id = j; //idx of this element in divs array	  		 
	  	        item.next = null; // pointer to next element 
	  	        item.prev = null; // pointer to previous element	
	  	        item.img = new Image(); 
	  	        item.img = divs[j].getElementsByTagName("img")[0]; // save img pointer in element (to avoid getElementById)
		        item.src = item.img.src; // path to included image
		        item.height =  item.img.height; // included image height
		        item.width  =  item.img.width;  // included image width	
		        item.size;
		        item.div = divs[j];		// save div pointer in element (to avoid getElementById)
		        item.img.style.visibility="hidden"; // hide all images first
		        item.pos;
		        addItem(divRingStart,item); // add image to data structure		
		        	        
	          }
	          closeRing(divRingStart); // close the ring.
	        }
    	        
	    }
	// add new Image to the ring.
	ImageSlider.prototype.addItem = function(root,itm){						
		with(this){		
		    if(itm==root){return;}							
		    tmp = root;					    
		    while(tmp.next != null){												
			    tmp = tmp.next;
		    }			
		    itm.prev = tmp;
		    tmp.next = itm;								
		 }
	}
	// close ring.
	ImageSlider.prototype.closeRing = function(root){
		with(this){
			var tmp3;
			tmp3 = root;
			while(tmp3.next !=null){
					tmp3 = tmp3.next;
			}			
			tmp3.next = root;			
			root.prev = tmp3;
		}
	}
    
	// calculated the Sourrounding div dimension. based on  ImageContainerHeight and ImagecontainerWidth
	ImageSlider.prototype.CalculateContainerDimension = function(StartElement)
	{
	    with(this)	    
	    {	        	        
	    	// offset: is used to store the top or left position of the next element
	    	// current is current ring element	    	
	        var count, current, offset; 
	        var newHeight,newWidth;	 
	        count = offset=newHeight = newWidth = 0;      	    	        
            // walking though the ring.  	          	          	          	       	          	     	     
  	        
  	        current = StartElement;	  	     	          	     	
    	    do{			     	 	
		      current.pos = offset;		      		      	   
		    
		      if(horizontal){current.div.style.left = offset + "px"; current.size=current.width;}
		      else {current.div.style.top = offset + "px"; current.size=current.height;}
		    	          		     
		      offset = (current.pos + current.size + spacing);	// left position of next element
		      // set NumDisplayImages to visible and sum up height and width, set all other divs to hidden.	        		                         	        		      	            
  	          if(count < numDisplayImages){
  		          newHeight += current.height +spacing;  
  	    	      newWidth += current.width + spacing;	  	    	        		 	        		 	   
  		 	      current.img.style.visibility="visible";  		 	        
      		  }      		 
	          else{	            
	             if (count == numDisplayImages){lastItemToDisplay = current;} // save as last visible image      		  	      		     		      	   
	             else if(current==divRingStart){current.img.style.visibility ="visible";}
		     	 else current.img.style.visibility ="hidden";
      		  }      		    
      		  count++;  		 	     
		      current = current.next;		 	 
		    }while(current != StartElement)		    		    		    
      } //end with(this)
  }
     
    // resize the sourrounding div to make sure all images will fit 
    ImageSlider.prototype.ResizeContainer = function(rTime)
    {
       with(this)
       {     
              var _time = rTime;              		    		           		 		  		 		 		 		 		  			     		 			              		        	     	        
	      if(horizontal){	                                                                                      
              	 var from = ImageContainerWidth;
               	 var till= newWidth;                
               	 // bad practice to write fallowing code twice, but i don't know how to do this resizing stuff better.
               	 if(till<=ImageContainerWidth){                
                 for(i=ImageContainerWidth;i>till;i--){
                      var functRef = resizeWidth(ContainerElement, i);                  
                      setTimeout(functRef, _time); // scroll after all elements are at new position 
                     _time+=scrollTime; 
                  }            
                }
                else{                                  
                    for(i=from;i<till;i++){                        
                          var functRef = resizeWidth(ContainerElement, i);                  
                          setTimeout(functRef, _time);		
                          _time+=scrollTime;
                    }
               }
               ImageContainerWidth = newWidth;    
            }
            else{                
                var from= ImageContainerHeight;
                var till = newHeight; 
                
                if(till<=ImageContainerHeight){                 
                 for(i=ImageContainerHeight;i>till;i--){
                     var functRef = resizeHeight(ContainerElement, i);                  
                     setTimeout(functRef, _time);		
                    _time+=scrollTime;
                 }
               } 
               else{                                
                    for(i=from;i<till;i++){
                     var functRef = resizeHeight(ContainerElement, i);                  
                     setTimeout(functRef, _time);		
                     _time+=scrollTime;
                   }
               }
               ImageContainerHeight = newHeight;                
            }                                                                                      
            return _time;            	        
	  } // with this
	} // end protoype		
		
	
	// start scrolling 
	ImageSlider.prototype.show = function(){		        
        with(this){          
         __time = speed;                           
  	     var itemMoveTime = __time;
	     var current = divRingStart;		
	     do{			    	      
    		__time = Slide(current,itemMoveTime); 
		    current = current.next;		 	 
	     }while(current != lastItemToDisplay.next)			     		                   	            	
 	   
          var self = this;           
          setTimeout(function(){ 	 	             
 	      // will start after scrolling     
                 self.CalculateContainerDimension(self.divRingStart.next); // make sure all visible images fit into sourrounding Container		       
                 self.__time += self.ResizeContainer(0); // if images don't fit resize sourounding Container
                 self.divRingStart = self.divRingStart.next;  // set Ring entry point to next element.	       
 	      },__time);               
 	        
 	     // start new slide after  timoutRunning
         __time+=timeoutRunning;
	     setTimeout(function(){ 			     
              	self.speed = 0;	        
 	         	self.show(); 
	     }, __time);
		  
	    }
	}   
  // scroll images up
  ImageSlider.prototype.Slide = function(itm,t1){    
  	with(this){		  	   
		var tim1 = t1; // local time
		var from = itm.pos;				
		var scrollAmount = divRingStart.size + spacing;
		var till = from - scrollAmount;			        
		if(itm.next == lastItemToDisplay){		    
			var functShow  = showImg(lastItemToDisplay.img);		    
			setTimeout(functShow,tim1);		   
			// display new image before scrolling to avoid blinking 
		}		    
		for(j=from;j>=till;j--){      	              	        
			//var functRef = scrollTop(itm.div, j);   	                       
            var functRef = SlideMethode(itm.div, j);   	                        			
            setTimeout(functRef, tim1);	// scroll			
			tim1 +=scrollTime;
		}
		return tim1;
	}				
  }   
  // helper function to pass arguments to setTimout
  function scrollTop(div, pos){    
    return (function(){                
       div.style.top=pos+"px";      
    });
  }
  // helper function to pass args to setTimout
  function scrollLeft(div, pos){
    return (function(){        
       div.style.left=pos+"px";       
    });
  }
  // helper function to pass args to setTimout (resize sourrounding div)
  function resizeWidth(div, pos){
    return (function(){        
       div.style.width=pos+"px";       
    });
  }
  // helper function to pass args to setTimout (resize sourrounding div)
  function resizeHeight(div, pos){
    return (function(){        
       div.style.height=pos+"px";       
    });
  }
  // helper function to pass args to setTimout (display new images)
  function showImg(img){
    return (function(){        	
       	img.style.visibility="visible";                   
    });
  }