/* Fuer eine Funktionsbeschreibung der Schieberegler siehe 071013_wireframes_vermoegensplaner.pdf
 * Grob zusammengefasst: Die Schieberegler schieben auf einer Skala der Größe scale_size, die wiederum mit den Pfeilen
 * zwischen min und max verschiebbar ist.
 */
$.fn.Rslider = function(settings) {
  
  settings = $.extend({
    'input': jQuery(), // das jQuery-Element zu dem input-Feld, in der der verschiebbare Wert steht
    'factor': 1, // Faktor, mit dem der Wert multipliziert wird, um den Ergebniswert zu berechnen (slider links = 0, rechts = 1) -- de facto immer identisch mit scale_size
    'min': 0, // Minimalwert der Skala
    'max': 75, // Maximalwert der Skala
    'scale_size': 30, // Breite einer Darstellung der Skala
    'value': 0, // Default-Wert beim Aufruf
    'round': function(i) {return i;} // Funktion zum Runden/Nachbearbeiten des Ergebniswerts
  }, settings);

  return this.each(function() {
    var info = $.extend(
			{ 'swidth': parseInt($(this).css('width')) -31 }, // swidth ist die Pixelbreite der Skala -- 31 px werden wegen den Pfeilen abgezogen
			settings);
		

		/* init */
		if (info.value < info.min || info.value > info.max) return -1;
		info.scale_pos = Math.floor((info.value - info.min) / (info.scale_size / 2));
		if (info.scale_pos >= (info.max - info.min) / (info.scale_size / 2) - 1) info.scale_pos = (info.max - info.min) / (info.scale_size / 2) - 2;//info.max / info.scale_size / 2 - 1;

		// Aktuellen links-Wert des handles anhand value berechnen
		info.left =
		(
			(
				(info.swidth - 10)
				* info.value
			)
			-
			(info.scale_pos * (info.scale_size/2))
			* (info.swidth - 10)
		 )
		 /info.factor
		+ 15;

		// HTML-Struktur aufbauen		
    $(this).append('<div class="arrleft"></div><div class="arrright"></div><div class="barleft"></div><div class="barright"></div><div class="handle"></div><div class="slider-labels three-labels"></div>');
    $(this).find('.barleft').css({left: 15, top: 7, width: info.left-5});
    $(this).find('.barright').css({left: info.left, top: 7, width: info.swidth - info.left+14});
    $(this).find('.handle').css({left: info.left});
    $(this).find('.handle')[0].onselectstart = function () { return false; };

		// Alle nötigen Werte in info speichern, das per jQuery.data in der Node gespeichert wird
    info.$handle = $(this).find('.handle');
    info.$labels = $(this).find('.slider-labels');
    info.$labels.append('<div class="Rlabel one"></div><div class="Rlabel two"></div><div class="Rlabel three"></div>');
    info.$elem = $(this);
    $(this).data('info', info);

		// Labels unter dem Schieberegler erstellen
		$.fn.Rslider.updateLabels(info);

		// Default-Wert in das input-Feld
		info.input.val(info.round(info.value));

		// Default-Wert für das handle @TODO: Falsch?
		info.x_start = 0;
    
		// Behandelt die Verschiebung der Skala durch Pfeil-Klick
    $(this).find('.arrleft, .arrright').bind('click', info, function(e) {
      var info = e.data.$elem.data('info');
    	if ($(this).hasClass('arrleft')) {
    		// Verschiebung nach links, nur wenn Wert noch > min
				if ((info.scale_pos * info.scale_size / 2) <= info.min) return false;
				info.scale_pos--;
			} else {
    		// Verschiebung nach rechts, nur wenn Wert noch < max
				if ((info.scale_pos * info.scale_size / 2) + info.scale_size >= info.max) return false;
				info.scale_pos++;
			}
			$.fn.Rslider.updateLabels(info);
			$.fn.Rslider.update(info, info.x_start);
    });
    
    
		// Behandelt die Verschiebung des Handles und Update des Wertes durch ziehen des Handles
    $(this).find('.handle').bind('mousedown', info, function(e){
      var x_start = e.clientX;
      var info = e.data.$elem.data('info');
      info.x_start = x_start;
      $(document).bind('mousemove', info, function(e){
				var info = e.data.$elem.data('info');
				
				info = $.fn.Rslider.update(info, e.clientX);
        
         $(document).bind('mouseup', info, function(e){
           $(document).unbind('mousemove').unbind('mouseup');
         });
      });
    });
  });
}

/* Aktualisiert die Werte im Schieberegler (nach Schieben des Reglers oder während verschieben der Skala)
 */
$.fn.Rslider.update = function(info, clientx) {
	var left = info.$handle.position().left + clientx - info.x_start;
	info.x_start = clientx;
	if (left < 15) left = 15;
	if (left > info.swidth + 5) left = info.swidth + 5;
	info.$handle.css('left', left);
	info.$handle.prevAll('div.barleft').css({width: left-15});
	var rwidth = info.swidth - left + 14;
	info.$handle.prevAll('div.barright').css({width: rwidth, left: left});
	info.left = left;
  info.value = info.round(((info.scale_pos) * info.scale_size  / 2) + (info.left - 15) / (info.swidth-10) * info.factor)
  info.input.val(info.value);

	return info;
}

/* Aktualisiert die Werte der Skala unter dem Schieberegler
 */
$.fn.Rslider.updateLabels = function(info) {
	var start = info.scale_pos * info.scale_size / 2;
	info.$labels.find('.one').text(start);
	info.$labels.find('.three').text(start + info.scale_size);
	info.$labels.find('.two').text(start + (info.scale_size / 2) );
	
	// Ausgrauen der Pfeile, wenn Ende erreicht
	if (info.scale_pos == 0) {
		info.$elem.find('.arrleft').addClass('disabled');
	} else {
		info.$elem.find('.arrleft').removeClass('disabled');
	}

	// Ausgrauen der Pfeile, wenn Ende erreicht
	if (start + info.scale_size >= info.max) {
		info.$elem.find('.arrright').addClass('disabled');
	} else {
		info.$elem.find('.arrright').removeClass('disabled');
	}
	
	info.$labels.find('.Rlabel').each(function(){
		$(this).css({marginLeft:Math.round($(this).outerWidth(true)/2 * -1)});
	});
}