Element.addMethods('DIV', {      
      /**
       *  Metoda zaznacza miniaturki które aktualnie są widoczne  
       *  
       *  @param ind - indeks elementu aktualnie wybranego                  
       */      
      selectIco: function(objSender, ind)
      {
        /**
         *  Wszytkie ikonki oznaczam jako domyslne
         */              
        var icoBox = $(objSender.readAttribute('icoBox'));
        
        
       
        
        /**
         *  Miniaturki zaznaczane sa po tyle ile widac duzych elementow 
         *  dlatego do obliczen potrzebuje ilosci wszystkich elementow 
         *  i ilosci widocznych jednoszsnie                          
         */                
        var visibleElements = parseInt(objSender.readAttribute('visibleElements'));
        
        var childsCount = parseInt(objSender.readAttribute('childsCount'));
        
        /**
         *  zmienne first i last wyznaczaja przedzial pierwszej i ostatnniej miniaturki
         *  do zaznaczenia                 
         */        
         ind = ind.abs();
        var first = ind;
        var last = first + visibleElements -1;
        
        /**
         *  przypadek nie pozwala wyjsc zazanczonym miniaturkom poza zakres         
         */        
        if (first + visibleElements > childsCount)
        {
          first = childsCount - visibleElements;     
          last = childsCount-1;          
        }
                
      
        var icoSelected = objSender.up().config.icoSelected;
        var icoUnselected = objSender.up().config.icoUnselected;
                
        if (icoBox != null) 
        {
          /**
           *  Oznaczam wybrane miniaturki - maja id o nazwie epro_icoXXX gdzie XXX to numer miniaturki liczony od 0
           */   
          icoBox.childElements().each(function(el, index)
          {
            if (index <= first && index >= last)
            {
              el.setStyle(icoSelected);
            }
            else
            {
              el.setStyle(icoUnselected);
            }            
          });                        
         }  
                
        
        objSender.writeAttribute('current', -first);
                         
        var leftTriggerObj = $(objSender.up().config.sliderLeftTrigger);
        var rightTriggerObj = $(objSender.up().config.sliderRightTrigger);        
        
        leftTriggerObj.setOpacity(1);        
        rightTriggerObj.setOpacity(1);
          
        
        /* strzalki bez akcji robie polprzezroczyste - w zaleznosci gdzie wskazuja indeksy ukrywam odpowiednia strzalke*/
        if (  first == 0)
        {
         rightTriggerObj.setOpacity(0.2);
        }
                
        if (  last == (childsCount - 1))
        {
         leftTriggerObj.setOpacity(0.2);
        }
        
        return objSender;
      },
      
      /**
       *  Przesuniecie w prawo lub w lewo
       *  
       *  @param direction - kierunek przesuniecia, -1 w lewo, 1 w prawo              
       */             
      slide: function(objSender, direction)
      {                        
        var width = objSender.down().getWidth();
        
        var direction = parseInt(direction);
        var current = parseInt(objSender.readAttribute('current'));
        var childsCount = parseInt(objSender.readAttribute('childsCount'));
        var visibleElements = parseInt(objSender.readAttribute('visibleElements'));
        var effectDuration = parseFloat(objSender.readAttribute('effectDuration'));        
        
        
                                                                
        if (  (current == 0 && direction > 0) || (current < -childsCount && direction < 0)) 
        {
          // blokada kierunku w lewo;                              
        }
        else if ((current - visibleElements <= -childsCount) && direction < 0) 
        {
          //blokada kierunku w prawo;          
        }
        else
        {                  
          current = parseInt(current + direction); // obliczam element na ktory ma sie przesunac slider                                                         
          // przesuniecie  
          new Effect.Move(objSender, {  x: direction * width, y: 0, mode: 'relative', transition: effectTransitions,  duration: effectDuration, queue: {position: 'end', scope: 'global', limit: 0} });
          
          objSender.selectIco(current); // oznaczam ikonki
        }
        return objSender;
      }, 
      
      
      /**
       *  Tworzy ikonki automatycznie
       */             
      createIcons: function(objSender)
      {        
        var current = parseInt(objSender.readAttribute('current'));
        var childsCount = parseInt(objSender.readAttribute('childsCount'));
        var visibleElements = parseInt(objSender.readAttribute('visibleElements'));
        var itemWidth = parseInt(objSender.readAttribute('itemWidth'));
        var icoBoxId = objSender.readAttribute('icoBox');
        
        
        var iconsBox = $(icoBoxId);
                
        
        if (iconsBox == null) return; // nie ma kontenera na ikonki to ich nie tworz
                
                                
        /* dla wszystkich elementów w sliderze */
        objSender.childElements().each(function(el, index) 
        {                    
          var ico = new Element('div'); /* utowrz nowy div */
          
          
          ico.update(index+1); /* nadaj mu numer */  
          ico.writeAttribute("id", "epro_ico" + index);
          ico.writeAttribute("class", "epro_smallIco"); 
          iconsBox.appendChild(ico);
                  
          var icoHeight = ico.getHeight();
          
          
          /* ikonki przesowam aby nie nachodzily na siebie */          
          ico.setStyle({            
            marginLeft:  parseInt(index * parseInt(ico.getStyle('width'))) + "px"            
          });                  
          
          
          /* w zaleznosci od ilosci widocznych itemow w oknie oznaczam tyle miniaturek */  
                                 
          var bindIndex = 0;
          
          if (index < childsCount - visibleElements +1  ) 
          {                                         
            bindIndex = -index;
          }
          else // aby nei wyjsc poza zakres - ostatnie elementy zaznaczane w miniaturkach po kilka maja ta sama akce co pierwszy eleemnt z zaznaczenia
          {
            bindIndex = -index + visibleElements - 1;
          }          
          
          var effectDuration = parseFloat(objSender.readAttribute('effectDuration'));
          
          
          /* po kliknieciu w ikonke przechodzi do odpowiedniego stanu */
          ico.observe('click', function()
          {
            objSender.writeAttribute('current', bindIndex);
            objSender.selectIco(-bindIndex);
            
            
            new Effect.Move(objSender, {  
                                        x: bindIndex * itemWidth,  
                                        mode: 'absolute', 
                                        transition: effectTransitions,  
                                        duration: effectDuration, 
                                        queue: { position: 'end', scope: 'global', limit: 0} 
                                        });
          });
          
                             
        });        
              
        return objSender;
      },
      
      
      /* automatyczne przesowanie */
      slidePlay: function(objSender)
      {
        /* ustawiam funkcje okresowa do przesuwania */
        var slidePlayTimer = setInterval(function()
        {          
          var current = parseInt(objSender.readAttribute('current'));
          var childsCount = parseInt(objSender.readAttribute('childsCount'));
          var visibleElements = parseInt(objSender.readAttribute('visibleElements'));
          
          var direction = objSender.readAttribute('currentDirection');
                    
          var repeat = objSender.readAttribute('repeat');                            
          
          if (direction == null) direction = -1;
              
          /* jezeli ma nie powatarzac to bedzie na zasadzie odbijania */              
          if(repeat == null)
          {                       
              /* zmiana kierunkow po dojsciu do zakresow */
              if (current.abs() == 0 && direction > 0)
              {
               direction = -direction;
              }
              
              if (  current.abs() == childsCount - visibleElements && direction < 0)
              {
               direction = -direction;                                       
              }
              
              objSender.writeAttribute('currentDirection', direction);
                                                
              objSender.slide(direction);
          }
          else /* przypadek jak dojdzie do ostatniego przesunie sie na pierwszy */
          {          
              /* jak dojdzie do konca */            
              if (  current.abs() == childsCount - visibleElements && direction < 0)
              {
                var effectDuration = parseFloat(objSender.readAttribute('effectDuration'));                
                
                /* to przesun do poczatku */
                new Effect.Move(objSender, {  
                                        x: 0,  
                                        mode: 'absolute', 
                                        transition: effectTransitions,  
                                        duration: effectDuration, 
                                        queue: { position: 'end', scope: 'global', limit: 0} 
                                        });    
                           
                /* zanzacz pierwszy element */                  
                objSender.selectIco(0);
                clearInterval(slidePlayTimer);
                
                                
                /* zacznij oddtarzac od poczatku */
                objSender.slidePlay();
               } 
               else
               {
                objSender.slide(direction); // jak jeszcze nie doszlo do konca to przesun na nastepny
               }               
          }
          objSender.writeAttribute('slidePlayTimer', slidePlayTimer);            
        }, parseInt(objSender.readAttribute("duration")));
      },
      
      /**
       *  Metoda tworzy slider
       *  leftTrigger - id na element przesuwajacy w lewo
       *  rightTrigger - id na element przesuwajacy w prawo
       *  icoBox - kontener w ktorym maja byc generowanie miniaturki jak null to nie bedzie miniaturek
       *  playStop - przycisk do wlaczania i wylaczania automatycznego oddtwarzania - jak null to nie bedzie mozna sterowac              
       *  loop - czy ma przesuwac ikonki
       *  repeat - czy ma oddtwarzac cyklicnie czy ma odbijac od prawego do lewego
       *  duration - czas w milisekundach                             
       */
      createSlider: function(objSender, config)
      {        
        /* kontener na slajdy musi wewnatrz zawierac element z itemami do przwijania */                
        var slideContainer = objSender.down();
        
        /* szerokosc pojedynczego itemu do przewijania - kazdy element musi miec taka sama */
        var width = slideContainer.down().getWidth();
        /* 
          obliczam ilosc elementow widocznych - aby skrypt poprawnei dzialal
          wymagane jest aby elemetny przewijane mialy stala szerokosc
          oraz div z overflowem mial szerokosc bedaca wielekrotnoscia szerokosci przewijanego itema
        */
        var visibleElements = (objSender.getWidth() / width).round();
                
        
        var leftTrigger =  config.sliderLeftTrigger;
        var rightTrigger = config.sliderRightTrigger;
        var icoBox = config.icoBox; 
        var playStop = config.playStop;
        var loop = config.loop;
        var repeat = config.repeat; 
        var duration = config.duration;
        var effectDuration = config.effectDuration;
        var transitions = config.transitions;
        var icoSelected = config.icoSelected;
        var icoUnselected = config.icoUnselected;
        
        objSender.config = config;
        
        
                         
        /**
         *  ilosc wszystkich itemow do przwijania
         */                 
        var count = slideContainer.childElements().length;
        
        /* zapisuje w atrybutach aby miec dostep do tych danych */
        slideContainer.writeAttribute('current', 0);
        slideContainer.writeAttribute('childsCount', count)
        slideContainer.writeAttribute('visibleElements', visibleElements);
        slideContainer.writeAttribute('itemWidth', width);
        slideContainer.writeAttribute('icoBox', icoBox);
        slideContainer.writeAttribute('play_stop', playStop);
        slideContainer.writeAttribute('playState', 1);
        slideContainer.writeAttribute('loop', loop);
        slideContainer.writeAttribute('repeat', repeat);        
        slideContainer.writeAttribute('duration', parseInt(duration));
        slideContainer.writeAttribute('effectDuration', parseFloat(effectDuration));
        
        var slidePlayTimer = 0;
        slideContainer.writeAttribute('slidePlayTimer', slidePlayTimer);
        
        effectTransitions = transitions;
                        
                
        /* ustawiam szerokosc elementu na faktyczna - ie6 fix */
        slideContainer.setStyle({width: (width * count) + "px"});
        
        var leftTriggerObj = $(leftTrigger);
        var rightTriggerObj = $(rightTrigger);            
        /**
         *  zdarzenia na strzalki
         */           
                      
        leftTriggerObj.observe('click', function(event){slideContainer.slide(-1)});
        rightTriggerObj.observe('click', function(event){slideContainer.slide(1)});        
        
        /* po zaladowaniu nalezy strzoyc miniaturowe ikonki */
        slideContainer.createIcons();
        
        if (loop) slideContainer.slidePlay();
        
        
        if ($(playStop))
        {                    
          $(playStop).observe('click', function()
          {
            var state = slideContainer.readAttribute('playState');
            
            var slidePlayTimer = slideContainer.readAttribute('slidePlayTimer');
            
            slideContainer.writeAttribute('playState', (state == 1) ? 0 : 1);
                               
            if (state == 1)
            {                            
              $(playStop).down().src = 'image/template/play.gif';                                          
              if(slidePlayTimer) clearInterval(slidePlayTimer);
            }
            else
            {
              $(playStop).down().src = 'image/template/pause.gif';
              
              slideContainer.slidePlay();
            }
          }); 
          
          objSender.observe('mouseover', function()
          {          
            slideContainer.writeAttribute('playState', 0);
                                                           
            $(playStop).down().src = 'image/template/play.gif';   
            var slidePlayTimer = slideContainer.readAttribute('slidePlayTimer');
            if (slidePlayTimer) clearInterval(slidePlayTimer);           
          });
          
          rightTriggerObj.observe('mouseover', function()
          {          
            slideContainer.writeAttribute('playState', 0);
                                                           
            $(playStop).down().src = 'image/template/play.gif';  
            var slidePlayTimer = slideContainer.readAttribute('slidePlayTimer'); 
            if (slidePlayTimer) clearInterval(slidePlayTimer);
          });
          
          leftTriggerObj.observe('mouseover', function()
          {           
            slideContainer.writeAttribute('playState', 0);
                                                           
            $(playStop).down().src = 'image/template/play.gif'; 
            var slidePlayTimer = slideContainer.readAttribute('slidePlayTimer');  
            if (slidePlayTimer) clearInterval(slidePlayTimer);
          });
          
          
          
          
                    
        }    
       
              
        
        /* zazanczenie pierwszego elementu */
        slideContainer.selectIco(0);
              
        return objSender;
      }
    });