/*
przykladowy css dla el-tow html

#wrapper {
   width:400px;
   height:300px;
   display:block;
   position:relative;
   overflow:hidden;
}

#innerWrapper {
   width:400px;
   margin-top:0px;
   float:left;
}

dobrze też dodać do pliku html załadowane obrazki z używanymi grafikami do scrollera
*/

var _scrollerConf = new Object();
var _scrollerNumber = 1;
var _scrollerConnection = new Object();
var _scrollerCurrent = null;
var _scrollerCurrentAction = 0;
var _scrollerActionId = 1;

//rozne konfiguracje
_scrollerConf['default'] = new Object();
_scrollerConf['default']['width'] = 9;
_scrollerConf['default']['marginLeft'] = 5;
_scrollerConf['default']['marginRight'] = 0;
_scrollerConf['default']['arrowHeight'] = 8;
_scrollerConf['default']['arrowTopImage'] = '/images/scroler/up.png';
_scrollerConf['default']['arrowBottomImage'] = '/images/scroler/down.png';
_scrollerConf['default']['arrowSprite'] = false;
_scrollerConf['default']['connectorImage'] = '/images/scroler/linia.png'; //linia łącząca strzałki
_scrollerConf['default']['sliderImage'] = '/images/scroler/belka.png';
_scrollerConf['default']['sliderSprite'] = false;
_scrollerConf['default']['sliderMinimalHeight'] = 2;
_scrollerConf['default']['arrowMoveDelay'] = 100;
_scrollerConf['default']['arrowMoveJump'] = 20;

//kod scrollera

function _scrollerInit(wrapperId, textId) {
   _scrollerBuilder(wrapperId, textId, 'default');
}

function _scrollerInitConf(wrapperId, textId, conf) {
   _scrollerBuilder(wrapperId, textId, conf);
}

function _scrollerBuilder(wrapperId, textId, conf) {
   var wrapperObj = document.getElementById(wrapperId);
   var textObj = document.getElementById(textId);
   var wrapperHeight = $(wrapperObj).innerHeight();
   var textHeight = $(textObj).height();
   
   //jezeli tekst nie wystaje to nic nie robimy
   
   if (wrapperHeight>textHeight)
      return;
   
   //jezeli wystaje to dodajemy naszego scrollera
   
   //zwezamy tekst
   $(textObj).width(
      $(textObj).width() - _scrollerConf[conf]['width'] 
      - _scrollerConf[conf]['marginLeft'] - _scrollerConf[conf]['marginRight']-3
   );
   $(textObj).css({float:'left'});
   
   //ustawiamy overflowa wrapperowi
   $(wrapperObj).css({overflow:'hidden',position:'relative'});
   
   //kalkulujemy znowu wysokosc po takiej operacji
   textHeight = $(textObj).height();
   
   //budujemy tekst z naszym scrollerem
   var scrollerId = "scroller"+_scrollerNumber;
   _scrollerNumber++;
   //laczymy nasz scroller z wrapperem
   _scrollerConnection[scrollerId+'Wrapper'] = wrapperId;
   _scrollerConnection[scrollerId+'Text'] = textId;
   
   _scrollerConnection[scrollerId+'Conf'] = conf;
   
   var app = "";
   //szerokosc calego scrollera (razem z marginesami)
   var pom = _scrollerConf[conf]['width'] + _scrollerConf[conf]['marginLeft'] + _scrollerConf[conf]['marginRight'];
   app += "<div id=\""+scrollerId+"_wholeWrapper\" style=\"width:"+pom+"px;height:"+wrapperHeight+"px;position:relative;overflow:hidden;\">";
   
   app += "<div id=\""+scrollerId+"_wrapper\" style=\"width:"+_scrollerConf[conf]['width']+"px;margin-left:"+_scrollerConf[conf]['marginLeft']+"px;margin-right:"+_scrollerConf[conf]['marginRight']+"px;\">";
   app += "<a id=\""+scrollerId+"_arrowTop\" onmousedown=\"Javascript:if ($.browser.mozilla) event.preventDefault();\" style=\"display:block;width:"+_scrollerConf[conf]['width']+"px;height:"+_scrollerConf[conf]['arrowHeight']+"px;background:url("+_scrollerConf[conf]['arrowTopImage']+") no-repeat 0px 0px;cursor:pointer;font-size:1px;\"></a>";
   
   //wysokosc linii łączącej
   var pom = wrapperHeight - 2*_scrollerConf[conf]['arrowHeight'];
   app += "<div id=\""+scrollerId+"_connector\" style=\"width:"+_scrollerConf[conf]['width']+"px;height:"+pom+"px;display:block;background:url("+_scrollerConf[conf]['connectorImage']+") repeat-y;font-size:1px;\"></div>";
   app += "<a id=\""+scrollerId+"_arrowBottom\" onmousedown=\"Javascript:if ($.browser.mozilla) event.preventDefault();\" style=\"display:block;width:"+_scrollerConf[conf]['width']+"px;height:"+_scrollerConf[conf]['arrowHeight']+"px;background:url("+_scrollerConf[conf]['arrowBottomImage']+") no-repeat 0px 1px;cursor:pointer;font-size:1px;\"></a>";
   
   //rozmiar scrollera
   pom = Math.round((wrapperHeight/textHeight)*(wrapperHeight - 2*_scrollerConf[conf]['arrowHeight']));
   
   if (pom < _scrollerConf[conf]['sliderMinimalHeight'])
      pom = _scrollerConf[conf]['sliderMinimalHeight'];
   //ile mam się cofnąć relatywnie aby być na miejscu
   var pom2 = -wrapperHeight+_scrollerConf[conf]['arrowHeight'];
   
   app += "<a id=\""+scrollerId+"\" onmousedown=\"Javascript:if ($.browser.mozilla) event.preventDefault();\" style=\"display:block;width:"+_scrollerConf[conf]['width']+"px;height:"+pom+"px;background:url("+_scrollerConf[conf]['sliderImage']+") repeat-y 0px 0px;position:relative;top:"+pom2+"px;z-index:2;cursor:pointer;font-size:1px;\"></a>";
   app += "</div><!-- wrapper -->";
   app += "</div><!-- wholeWrapper -->";
   //alert(app);
   $(wrapperObj).append(app);
   
   
   
   //dodajemy ew. hoovery
   if (_scrollerConf[conf]['arrowSprite']) {
      $('#'+scrollerId+'_arrowTop').hover(  
         function() {  
            _scrollerArrowSprite(this,conf,1);
         },  
         function() {  
            _scrollerArrowSprite(this,conf,0);
         }  
      );  
      
      $('#'+scrollerId+'_arrowBottom').hover(  
         function() {  
            _scrollerArrowSprite(this,conf,1);
         },  
         function() {  
            _scrollerArrowSprite(this,conf,0);
         }  
      );  
   }

   if (_scrollerConf[conf]['sliderSprite']) {
      $('#'+scrollerId).hover(  
         function() {
            _scrollerSliderSprite(this,conf,1);
         },  
         function() {  
            _scrollerSliderSprite(this,conf,0);
         }  
      );  
   }

   //teraz podpinamy eventy naciskania przycisków
   $('#'+scrollerId+'_arrowTop').mousedown(function() {
      _scrollerArrowSprite(this,conf,2);
      _scrollerCurrent = scrollerId; 
      //nowe id akcji i uruchamiamy funkcje move
      _scrollerCurrentAction = _scrollerActionId;
      _scrollerMove(1, _scrollerCurrent, _scrollerActionId);
      _scrollerActionId++;
   }).mouseup(function() {
      _scrollerArrowSprite(this,conf,1);
      _scrollerCurrentAction = 0;
   }).mouseleave(function() {
      _scrollerArrowSprite(this,conf,0);
      _scrollerCurrentAction = 0;
   });
   
   $('#'+scrollerId+'_arrowBottom').mousedown(function() {
      _scrollerArrowSprite(this,conf,2);
      _scrollerCurrent = scrollerId;
      //nowe id akcji i uruchamiamy funkcje move
      _scrollerCurrentAction = _scrollerActionId;
      _scrollerMove(2, _scrollerCurrent, _scrollerActionId);
      _scrollerActionId++;
   }).mouseup(function() {
      _scrollerArrowSprite(this,conf,1);
      _scrollerCurrentAction = 0;
   }).mouseleave(function() {
      _scrollerArrowSprite(this,conf,0);
      _scrollerCurrentAction = 0;
   });
   
   //event podswietlania slidera
   $('#'+scrollerId).mousedown(function() {
      _scrollerSliderSprite(this,conf,2);
   }).mouseup(function() {
      _scrollerSliderSprite(this,conf,2);
   });
   //i teraz event przeciagania slidera
   $('#'+scrollerId).draggable();
   //tylko pionowo
   $('#'+scrollerId).draggable( "option", "axis", 'y' );
   //pozycja na stronie paska laczacego strzalki
   pom = $("#"+scrollerId+"_connector").offset().top;
   pom2 = pom + $("#"+scrollerId+"_connector").height() - $("#"+scrollerId).height();
   
   //maksymalny zasieg ruchu
   
   $('#'+scrollerId).draggable( "option", "containment", [0,pom,0,pom2] );
   $('#'+scrollerId).draggable( "option", "scroll", false );
   //rozpoczecie ruchu
   $('#'+scrollerId).bind( "drag", function(event, ui) {
         
      _scrollerPositionText(this.id);
   });
   
   /*
   //jeśli mouse up (poza el-tem) wszystko zerujemy i wylaczamy
   $(document).mouseup(function() {
      _scrollerArrowSprite(document.getElementById(_scrollerCurrent+"_arrowTop"),conf,0);
      _scrollerArrowSprite(document.getElementById(_scrollerCurrent+"_arrowBottom"),conf,0);
      _scrollerSliderSprite(document.getElementById(_scrollerCurrent),conf,0);
      _scrollerCurrentAction = 0;
   });
   */
}

function _scrollerArrowSprite(obj,conf,nr) {
   if (nr>0 && ! _scrollerConf[conf]['arrowSprite'])
      nr=0;
   $(obj).css('backgroundPosition','-'+(nr*_scrollerConf[conf]['width'])+'px 0px');
}

function _scrollerSliderSprite(obj,conf,nr) {
   if (nr>0 && ! _scrollerConf[conf]['sliderSprite'])
      nr=0;
   $(obj).css('backgroundPosition','-'+(nr*_scrollerConf[conf]['width'])+'px 0px');
}

function _scrollerMove(kierunek, scrollerId, actionId) {
   //kierunek 1-góra, 2-dół
   if (actionId != _scrollerCurrentAction)
      return;
      
   var wrapperObj = $('#'+_scrollerConnection[scrollerId+'Wrapper']);
   var textObj = $('#'+_scrollerConnection[scrollerId+'Text']);
   var conf = _scrollerConnection[scrollerId+'Conf'];
   
   if (kierunek==1) {
      if (!_scrollerCanGoUp(wrapperObj, textObj))
         return;
      else
         _scrollerGoUp(_scrollerConf[conf]['arrowMoveJump'],scrollerId,true);
   }
   else if (kierunek==2) { 
      
      if (!_scrollerCanGoDown(wrapperObj, textObj))
         return;
      
      _scrollerGoDown(_scrollerConf[conf]['arrowMoveJump'],scrollerId,true);
   }
   
   setTimeout('_scrollerMove('+kierunek+',\''+scrollerId+'\','+actionId+')', _scrollerConf[conf]['arrowMoveDelay']);
   
}

function _scrollerStripPX(str) {
   if (str==undefined)
      return 0;
   if (str=='auto')
      return 0;
	return str.substr(0,str.length-2)*1;
}


function _scrollerCanGoUp(wrapperObj, textObj) {
   if (_scrollerStripPX($(textObj).css('margin-top'))<0)
      return true;
   else
      return false;
}

function _scrollerCanGoDown(wrapperObj, textObj) {
   
   if (_scrollerStripPX($(textObj).css('margin-top')) + $(textObj).height() > $(wrapperObj).innerHeight()) {
      return true;
   }
   else {
      
      return false;
   }
}

function _scrollerGoUp(krok, scrollerId, poprawiacSlider) {
   var wrapperObj = $('#'+_scrollerConnection[scrollerId+'Wrapper']);
   var textObj = $('#'+_scrollerConnection[scrollerId+'Text']);
   var limit = -_scrollerStripPX($(textObj).css('margin-top'));
   
   if (krok>limit)
      krok = limit;
      
   $(textObj).css('margin-top',-limit+krok);
   if (poprawiacSlider)
      _scrollerPositionSlider(scrollerId);
}

function _scrollerGoDown(krok, scrollerId, poprawiacSlider) {
   var wrapperObj = $('#'+_scrollerConnection[scrollerId+'Wrapper']);
   var textObj = $('#'+_scrollerConnection[scrollerId+'Text']);
   
   var limit = _scrollerStripPX($(textObj).css('margin-top')) + $(textObj).height() - $(wrapperObj).innerHeight();
   
   if (krok>limit)
      krok = limit;
   
   $(textObj).css('margin-top',_scrollerStripPX($(textObj).css('margin-top'))-krok);
   if (poprawiacSlider)
      _scrollerPositionSlider(scrollerId);
}

function _scrollerPositionSlider(scrollerId) {
   var wrapperObj = $('#'+_scrollerConnection[scrollerId+'Wrapper']);
   var textObj = $('#'+_scrollerConnection[scrollerId+'Text']);
   var conf = _scrollerConnection[scrollerId+'Conf'];
   
   var obszar = $('#'+scrollerId+'_connector').height();
   
   var odleglosc = Math.round( (_scrollerStripPX($(textObj).css('margin-top'))/$(textObj).height())*obszar);
   $('#'+scrollerId).css('top',-$(wrapperObj).innerHeight()+_scrollerConf[conf]['arrowHeight']-odleglosc);
}

function _scrollerPositionText(scrollerId) {
   
   var wrapperObj = $('#'+_scrollerConnection[scrollerId+'Wrapper']);
   var textObj = $('#'+_scrollerConnection[scrollerId+'Text']);
   
   var odleglosc =($("#"+scrollerId).offset().top - $("#"+scrollerId+"_connector").offset().top) / $('#'+scrollerId+'_connector').height();
   
   var margines = - Math.ceil(odleglosc*$(textObj).height());
   
   //poprawianie: jesli wyjechalem za daleko to ograniczenie
   if (margines+$(textObj).height() < $(wrapperObj).innerHeight())
      margines = $(wrapperObj).innerHeight() - $(textObj).height();
   
   //poprawianie: jesli dojechałem sliderem do końca a nie jestem na końcu tekstu, to dojezdzam
   if ( 
      ($("#"+scrollerId).offset().top - $("#"+scrollerId+"_connector").offset().top + $("#"+scrollerId).height() == $('#'+scrollerId+'_connector').height())
      &&
      margines+$(textObj).height()>$(wrapperObj).innerHeight()
      )  {
      
      margines = $(wrapperObj).innerHeight() - $(textObj).height();
      
   }
   $(textObj).css('margin-top',margines);
}