function jsiHScrollbar (pObjVariableName, pScrollbarId, pContentId, pAutoSize)
{
   //
   // attributes
   //
   this.Id = pScrollbarId;
   this.Name = pObjVariableName;
   this.Parent;
   this.Element = document.getElementById (pScrollbarId);
   this.ElementContent = document.getElementById (pContentId);
   this.ElementLeft;
   this.ElementRight;
   this.ElementLine;
   this.ElementButton;
   this.AutoSizeButton = pAutoSize;
   this.MouseLeftKeyDown  = false;
   this.MouseRightKeyDown = false;
   this.PrevPosX = 0;

   //
   // functions
   //
   this.Click          = jsiHScrollbar_Click;
   this.MouseDown      = jsiHScrollbar_MouseDown;
   this.MouseUp        = jsiHScrollbar_MouseUp;
   this.MouseMove      = jsiHScrollbar_MouseMove;
   this.Resize         = jsiHScrollbar_Resize;
   this.ButtonResize   = jsiHScrollbar_ButtonResize;
   this.ButtonPosition = jsiHScrollbar_ButtonPosition;
   this.Scroll         = jsiHScrollbar_Scroll;

   //
   // constructor
   //

   // create child divs for scrollbar
   if (jsiById (this.Id + "left")   != null) jsiRemoveElement (this.Id + "left");
   if (jsiById (this.Id + "right")  != null) jsiRemoveElement (this.Id + "right");
   if (jsiById (this.Id + "line")   != null) jsiRemoveElement (this.Id + "line");
   if (jsiById (this.Id + "button") != null) jsiRemoveElement (this.Id + "button");
   this.ElementLeft   = jsiCreateElement ("div", this.Id + "left",   "hsb_left",   this.Element);
   this.ElementRight  = jsiCreateElement ("div", this.Id + "right",  "hsb_right",  this.Element);
   this.ElementLine   = jsiCreateElement ("div", this.Id + "line",   "hsb_line",   this.Element);
   this.ElementButton = jsiCreateElement ("div", this.Id + "button", "hsb_button", this.Element);

   this.ElementLine.setAttribute ("onClick", this.Name + ".Click(event, this);");

   this.ElementButton.setAttribute ("onMouseDown", this.Name + ".MouseDown (event, this);");
   this.ElementButton.setAttribute ("onMouseUp",   this.Name + ".MouseUp   (event, this);");
   this.ElementButton.setAttribute ("onMouseMove", this.Name + ".MouseMove (event, this);");

   // horizantal bar ' lar standart overflow visible yaratılırlar ki..
   // border, border shadow gibi effectler gözükebilsin..
   // hatta (-) margin yada (-) pozisyon ayarlama ile istenilen effectler verilebilsin...
   this.Element.style.overflow = "visible";
   // scrollbar'lar standart 20 px genişliğinde yaratılırlar.			
   // tüm scrollbar tasarım ve sezaynları bu karala uymalıdırlar...
   // widget'lar buna göre yer ayırmalıdırlar...
   this.Element.style.height = "20px";

}

function jsiHScrollbar_Click (e, pElement) {
var clickedPos;
var ButtonLeft, buttonWidth;

   // clicked position = screen position - left offset of hsb_line
  	clickedPos  = e.clientX - jsiGetOffsetLeft(pElement);
  	ButtonLeft  = parseInt (this.ElementButton.style.left);
  	buttonWidth = parseInt (this.ElementButton.style.width);

  	if (clickedPos < ButtonLeft)               this.Scroll (-10);
  	if (clickedPos > ButtonLeft + buttonWidth) this.Scroll (+10);

}

function jsiHScrollbar_MouseDown (e) {

	// if e is not supported by the browser use window.event instead
   if (!e) var e = window.event;

   // mouse'a ilk bastığı yer tutulur ki sonradan ne kadar haraket ettiği bulunabilsin...
   this.PrevPosX = e.clientX;

   // if e.which is supported by the browser use it
   if (e.which) {
		rightclick = (e.which == 3);
	}
   // else use e.button
   else if (e.button) {
			  rightclick = (e.button == 2);
		  }

   if (rightclick) {
      this.MouseRightKeyDown = true;
   }
	else {
        this.MouseLeftKeyDown = true;
   }

   return true;
}

function jsiHScrollbar_MouseUp (e) {

	// if e is not supported by the browser use window.event instead
   if (!e) var e = window.event;

   // clear all mouse relted variables
   this.MouseLeftKeyDown = false;
   this.MouseRightKeyDown = false;
	this.PrevPosX = 0;

   return true;
}

function jsiHScrollbar_MouseMove (e) {
var movementX,    // mouse'un kaç pixel hareket ettirildiği
    percentage;   // mouse'un line üzerinde yüzde kaç hareket ettirildiği

   if (!this.MouseLeftKeyDown) return false;

	// if e is not supported by the browser use window.event instead
   if (!e) var e = window.event;

   // mouse'un ne kadar hareket ettirildiği bulunur...
   movementX = e.clientX - this.PrevPosX;
	// current pozisyon'da önceki pozisyon olarak saklanır.
	this.PrevPosX = e.clientX;
   // mouse'un, scrollbar-line üzerinde % kaç hareket ettirildiği bulunur...
	percentage = (movementX * 100.0) / this.ElementLine.clientWidth;

	this.Scroll (percentage);

   return true;

} 

function jsiHScrollbar_Resize () {

   // eğer buton autoresize ise boyutunu ayarla 
   if (this.AutoSizeButton) {
		this.ButtonResize ();
	}

   // resize event'de autosize olsa da olmasa da butonun yeri yeniden ayarlanır...
	this.ButtonPosition ();

}

function jsiHScrollbar_ButtonResize () {
var scrollWidth,  // içerik alanının toplam genişliği
    clientWidth,  // içerik alanının gösterilen genişliği
	 widthPercent, // içeriğin yüzde kaçının göserildiği
	 buttonWidth;  // scrollbar olarak gösterilen alanın genişliği

   scrollWidth = this.ElementContent.scrollWidth;
   clientWidth = this.ElementContent.clientWidth;
	widthPercent = clientWidth / scrollWidth;
   // bulunan oran doğrultusunda scrollbar genişliğine göre butonun genişliği ayarlanır.
	buttonWidth = this.ElementLine.clientWidth
   this.ElementButton.style.width = buttonWidth * widthPercent + "px";

}

function jsiHScrollbar_ButtonPosition () {
var scrollWidth,  // içerik alanının toplam genişliği
    scrollLeft,   // içerik alanının soldan ne kadar alanının gösterilmediği
	 widthPercent, // içeriğin soldan yüzde kaçının göserilmediği
	 buttonWidth;  // scrollbar olarak gösterilen alanın genişliği

   scrollWidth = this.ElementContent.scrollWidth;
   scrollLeft = this.ElementContent.scrollLeft;
	widthPercent = scrollLeft / scrollWidth;

   // bulunan oran kadar scrollbarda da soldan alan ayarlanır.
	buttonWidth = this.ElementLine.clientWidth
   this.ElementButton.style.left = buttonWidth * widthPercent + "px";

}

function jsiHScrollbar_Scroll (pDirection) {
var scrollWidth,      // içerik alanının toplam genişliği
    widthPercent,     // içeriğin yüzde kaçının göserildiği
    offsetLeft;       // soldan nereden itibaren gösteriliyor

   // pDirection -1 yada +1 gibi değerdir....
	// - değerler sola, + değerler ise sağa ilerlemeyi gösterir
	// değer yüzde olarak kullanılır, örneğin +10 --> %10 sağa scroll eder
	// 1 birim ile toplam alanın %10'u oranında kaydırma yapılır

   clientWidth = this.ElementContent.scrollWidth;
	widthPercent = clientWidth * (pDirection / 100);

  	// scroll the division contains the data
   offsetLeft = this.ElementContent.scrollLeft;
   offsetLeft = offsetLeft + widthPercent;
	// soldan pay bırakma değeri eğer 0 dan küçük olursa, 0'a çevirilir...
	if (offsetLeft < 0) offsetLeft = 0;

   this.ElementContent.scrollLeft = offsetLeft;

   // reaarange the position of the button
	this.ButtonPosition ();

}

////////////////////////////
/// HORIZONTAL SCROLLBAR ///
////////////////////////////

function jsiHorSBar (pVariableName,
                     pWidgetId)
{
   //
   // attributes
   //
   this.Name = pVariableName;
   this.Id = pWidgetId;
   this.eContent = jsiById (this.Id + '_wcontentbody');
   this.eHSBar;
   this.eLeft;
   this.eRight;
   this.eLine;
   this.eButton;

   //
   // functions
   //
   this.Click          = jsiHorSBar_Click;
   this.MouseDown      = jsiHorSBar_MouseDown;
   this.MouseUp        = jsiHorSBar_MouseUp;
   this.MouseMove      = jsiHorSBar_MouseMove;
   this.Resize         = jsiHorSBar_Resize;
   this.ButtonResize   = jsiHorSBar_ButtonResize;
   this.ButtonPosition = jsiHorSBar_ButtonPosition;
   this.Scroll         = jsiHorSBar_Scroll;

   //
   // constructor
   //
   this.eHSBar  = jsiCreateElement ("div", this.Id + "_hsbar",   "hsbar",   jsiById(this.Id + "_wcontentwrapper"));
   this.eLeft   = jsiCreateElement ("div", this.Id + "_hleft",   "left",    this.eHSBar);
   this.eRight  = jsiCreateElement ("div", this.Id + "_hright",  "right",   this.eHSBar);
   this.eLine   = jsiCreateElement ("div", this.Id + "_hline",   "hline",   this.eHSBar);
   this.eButton = jsiCreateElement ("div", this.Id + "_hbutton", "hbutton", this.eHSBar);

   this.eHSBar.style.left   = "0";
   this.eHSBar.style.bottom = "0";
   this.eHSBar.style.right  = "0";
   this.eHSBar.style.visibility = "hidden";
   jsiSetClass (this.eHSBar, jsiById(this.Id).getAttribute("jsiScrollbar") ); 


   this.eLeft.setAttribute   ("onClick",     this.Name + ".Scroll    (-1);");
   this.eRight.setAttribute  ("onClick",     this.Name + ".Scroll    (+1);");
   this.eLine.setAttribute   ("onClick",     this.Name + ".Click     (event, this);");
   this.eButton.setAttribute ("onMouseDown", this.Name + ".MouseDown (event, this);");
   this.eButton.setAttribute ("onMouseUp",   this.Name + ".MouseUp   (event, this);");
   this.eButton.setAttribute ("onMouseMove", this.Name + ".MouseMove (event, this);");

}

function jsiHorSBar_Click (e, pElement) {
var clickedPos;
var buttonLeft, buttonWidth;

  	clickedPos  = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - jsiGetOffsetLeft(pElement);
  	buttonLeft  = parseInt (this.eButton.style.left);
  	buttonWidth = parseInt (jsiGetCSSProperty (this.eButton, "width"));

  	if (clickedPos < buttonLeft)               this.Scroll (-1);
  	if (clickedPos > buttonLeft + buttonWidth) this.Scroll (+1);

}

function jsiHorSBar_MouseDown (e) {

   return true;
}

function jsiHorSBar_MouseUp (e) {

   return true;

}

function jsiHorSBar_MouseMove (e) {

   return true;

} 

function jsiHorSBar_Resize () {


}

function jsiHorSBar_ButtonResize () {


}

function jsiHorSBar_Resize () {


}

function jsiHorSBar_ButtonResize () {

}

function jsiHorSBar_ButtonPosition () {
var contentPercent,
    lineWidth;

   if (this.eContent.scrollWidth != this.eContent.clientWidth) {
      contentPercent = this.eContent.scrollLeft / (this.eContent.scrollWidth - this.eContent.clientWidth);
      lineWidth = this.eLine.clientWidth - this.eButton.clientWidth;
      this.eButton.style.left = ((lineWidth * contentPercent) + jsiGetCSSProperty (this.eLeft, "left") + this.eLeft.clientWidth )  + "px";
   }
   else this.eButton.style.left = (jsiGetCSSProperty (this.eLeft, "left") + this.eLeft.clientWidth)  + "px";

}

function jsiHorSBar_Scroll (pDirection) {
var scrollWidth,     // içerik alanının toplam yüksekliği
    widthPercent,    // içeriğin yüzde kaçının göserildiği
    offsetLeft;      // yukarıdan nereden itibaren gösteriliyor

   // pDirection -1 yada +1 gibi değerdir....
	// - değerler yukarı, + değerler ise aşağı ilerlemeyi gösterir
	// değer yüzde olarak kullanılır, örneğin +10 --> %10 aşağı scroll eder
	// 1 birim ile toplam alanın %10'u oranında kaydırma yapılır

   if (pDirection == +1 || pDirection == -1) pDirection *= 95;
	widthPercent = this.eContent.clientWidth * (pDirection / 100);

  	// scroll the division contains the data
   offsetLeft = this.eContent.scrollLeft;
   offsetLeft = offsetLeft + widthPercent;
	// soldan pay bırakma değeri eğer 0 dan küçük olursa, 0'a çevirilir...
	if (offsetLeft < 0) offsetLeft = 0;
	if (offsetLeft > this.eContent.scrollWidth - this.eContent.clientWidth) offsetLeft = this.eContent.scrollWidth - this.eContent.clientWidth;

   if (pDirection < 0) 
   	     jsiAnimation_ScrollContent ("LEFT",  this.eContent.id, offsetLeft, this);
      else jsiAnimation_ScrollContent ("RIGHT", this.eContent.id, offsetLeft, this);

}

//////////////////////////
/// VERTICAL SCROLLBAR ///
//////////////////////////

function jsiVerSBar (pVariableName,
                     pWidgetId)
{
   //
   // attributes
   //
   this.Name = pVariableName;
   this.Id = pWidgetId;
   this.eContent = jsiById (this.Id + '_wcontentbody');
   this.eVSBar;
   this.eUp;
   this.eDown;
   this.eLine;
   this.eButton;

   //
   // functions
   //
   this.Click          = jsiVerSBar_Click;
   this.MouseDown      = jsiVerSBar_MouseDown;
   this.MouseUp        = jsiVerSBar_MouseUp;
   this.MouseMove      = jsiVerSBar_MouseMove;
   this.Resize         = jsiVerSBar_Resize;
   this.ButtonResize   = jsiVerSBar_ButtonResize;
   this.ButtonPosition = jsiVerSBar_ButtonPosition;
   this.Scroll         = jsiVerSBar_Scroll;

   //
   // constructor
   //
   this.eVSBar  = jsiCreateElement ("div", this.Id + "_vsbar",   "vsbar",   jsiById(this.Id + "_wcontentwrapper"));
   this.eUp     = jsiCreateElement ("div", this.Id + "_vUp",     "up",      this.eVSBar);
   this.eDown   = jsiCreateElement ("div", this.Id + "_vright",  "down",    this.eVSBar);
   this.eLine   = jsiCreateElement ("div", this.Id + "_vline",   "vline",   this.eVSBar);
   this.eButton = jsiCreateElement ("div", this.Id + "_vbutton", "vbutton", this.eVSBar);

   this.eVSBar.style.top    = "0";
   this.eVSBar.style.bottom = "0";
   this.eVSBar.style.right  = "0";
   this.eVSBar.style.visibility = "hidden";
   jsiSetClass (this.eVSBar, jsiById(this.Id).getAttribute("jsiScrollbar") ); 

   this.eUp.setAttribute     ("onClick",     this.Name + ".Scroll    (-1);");
   this.eDown.setAttribute   ("onClick",     this.Name + ".Scroll    (+1);");
   this.eLine.setAttribute   ("onClick",     this.Name + ".Click     (event, this);");
   this.eButton.setAttribute ("onMouseDown", this.Name + ".MouseDown (event, this);");
   this.eButton.setAttribute ("onMouseUp",   this.Name + ".MouseUp   (event, this);");
   this.eButton.setAttribute ("onMouseMove", this.Name + ".MouseMove (event, this);");

}

function jsiVerSBar_Click (e, pElement) {
var clickedPos;
var buttonTop, buttonHeight;

  	clickedPos   = e.clientY + document.body.scrollTop + document.documentElement.scrollTop - jsiGetOffsetTop(pElement);
  	buttonTop    = parseInt (this.eButton.style.top);
  	buttonHeight = parseInt (jsiGetCSSProperty (this.eButton, "height"));

  	if (clickedPos < buttonTop)                this.Scroll (-1);
  	if (clickedPos > buttonTop + buttonHeight) this.Scroll (+1);

}

function jsiVerSBar_MouseDown (e) {

   return true;
}

function jsiVerSBar_MouseUp (e) {

   return true;

}

function jsiVerSBar_MouseMove (e) {

   return true;

} 

function jsiVerSBar_Resize () {


}

function jsiVerSBar_ButtonResize () {


}

function jsiVerSBar_Resize () {


}

function jsiVerSBar_ButtonResize () {

}

function jsiVerSBar_ButtonPosition () {
var contentPercent,
    lineHeight;

   if (this.eContent.scrollHeight != this.eContent.clientHeight) {
      contentPercent = this.eContent.scrollTop / (this.eContent.scrollHeight - this.eContent.clientHeight);
      lineHeight = this.eLine.clientHeight - this.eButton.clientHeight;
      this.eButton.style.top = ((lineHeight * contentPercent) + jsiGetCSSProperty (this.eUp, "top") + this.eUp.clientHeight )  + "px";
   }
   else this.eButton.style.top = (jsiGetCSSProperty (this.eUp, "top") + this.eUp.clientHeight )  + "px";
}

function jsiVerSBar_Scroll (pDirection) {
var scrollHeight,     // içerik alanının toplam yüksekliği
    heightPercent,    // içeriğin yüzde kaçının göserildiği
    offsetTop;        // yukarıdan nereden itibaren gösteriliyor

   // pDirection -1 yada +1 gibi değerdir....
	// - değerler yukarı, + değerler ise aşağı ilerlemeyi gösterir
	// değer yüzde olarak kullanılır, örneğin +10 --> %10 aşağı scroll eder
	// 1 birim ile toplam alanın %10'u oranında kaydırma yapılır

   if (pDirection == +1 || pDirection == -1) pDirection *= 95;
	heightPercent = this.eContent.clientHeight * (pDirection / 100);

  	// scroll the division contains the data
   offsetTop = this.eContent.scrollTop;
   offsetTop = offsetTop + heightPercent;
	// soldan pay bırakma değeri eğer 0 dan küçük olursa, 0'a çevirilir...
	if (offsetTop < 0) offsetTop = 0;
	if (offsetTop > this.eContent.scrollHeight - this.eContent.clientHeight) offsetTop = this.eContent.scrollHeight - this.eContent.clientHeight;

   if (pDirection < 0) 
   	     jsiAnimation_ScrollContent ("UP",   this.eContent.id, offsetTop, this);
      else jsiAnimation_ScrollContent ("DOWN", this.eContent.id, offsetTop, this);

}