// JavaScript Document
// bør generaliseres og instiatieres i stedet for singleton
// funktionen der kaldes i control skal blandt andet overføres som parameter
// det samme skal bredden af feltet, midten af feltet osv.

var ImageSliderControl = new function() 
{

	this.pixelIncrement = 1;  // disse kan overføres som parametre til init hvis generalisering
	
	this.sliderWidget = null;
	
	this.valueX = 125;  // midten af feltet
	this.originX = null;
	
	this.init = function()
	{
		var self = ImageSliderControl;
		self.sliderWidget = document.getElementById("sliderWidget");
		if (self.sliderWidget)
		{
			attachEventListener(self.sliderWidget, "mousedown", mousedownImageSlider);
			self.originX = self.valueX;
			
			self.sliderWidget.style.left = self.valueX + "px"; // sætter slideren i midten af feltet
		}
	}
	this.mouseDown = function(clientX)
	{
		
		var self = ImageSliderControl;
		self.originX = clientX;    // vi gemmer musepositionen 
		//nu kan vi senere se, hvor bevægelsen startede
		attachEventListener(document, "mousemove", mousemoveImageSlider);  // læg mærke til at det er documentet og ikke slideren
		attachEventListener(document, "mouseup", mouseupImageSlider);
		
	}
	this.mouseMove = function(clientX)
	{
		var self = ImageSliderControl;
		var sliderLeft = self.valueX;	
		
		sliderLeft += clientX - self.originX;  // sidstnævnte er sat i mousedown
		if (sliderLeft < 0)
		{
			sliderLeft = 0;
		}
		else if (sliderLeft > (self.sliderWidget.parentNode.offsetWidth - self.sliderWidget.offsetWidth))
 		// større end intervallet i pixels, se css - her er det 250 px
 		{
			sliderLeft = self.sliderWidget.parentNode.offsetWidth - self.sliderWidget.offsetWidth;
			// sættes til max - her lig 250 px
		}
		else  // den er midt imellem 
		{
    		self.originX = clientX;   // musepos gemmes som nyt udgangspunkt
		}
		self.sliderWidget.style.left = Math.round(sliderLeft / self.pixelIncrement) * self.pixelIncrement + "px"; // så afrundes til hele pixels
		self.valueX = sliderLeft;  
	}
	this.control = function()
	{
		var self = ImageSliderControl;
		Roundaboutimages.action(self.valueX);
		
	}
		
	
}

addLoadListener(ImageSliderControl.init);

mousedownImageSlider = function(event)
{
	if (typeof event == "undefined")
  	{
      event = window.event;
  	}
	
	
	ImageSliderControl.mouseDown(event.clientX);
}
mousemoveImageSlider = function(event)
{
	if (typeof event == "undefined")
  	{
      event = window.event;
  	}
		
	ImageSliderControl.mouseMove(event.clientX);
	ImageSliderControl.control();
}
mouseupImageSlider = function(event)
{
	if (typeof event == "undefined")
  	{
      event = window.event;
  	}
	
	detachEventListener(document, "mousemove", mousemoveImageSlider);
	detachEventListener(document, "mouseup", mouseupImageSlider);
	ImageSliderControl.control();
		
}

	
function detachEventListener(target, eventType, functionRef, capture)
// tre forskellige metoder alt efter browser
{
    if (typeof target.removeEventListener != "undefined")
    {
        target.removeEventListener(eventType, functionRef, capture)
    }
    else if (typeof target.detachEvent != "undefined")
    {
        target.detachEvent("on" + eventType, functionRef);
    }
    else
    {
        target["on" + eventType] = null;
    }

    return true;
};