// JavaScript Document

// ValzButtons - 2007, Tom Auger

// version history

// 2.0.2 - Summerlee.com
// script self-registers with the document's onLoad handler
// This WILL break if site uses "onLoad" within the BODY tag

// 2.0.1
// a few bugfixes - error trapping
// added support for .png file format

// 2.0 - GliSODin Skin Nutrients
// added preload support for buttons!

// 1.0 - IntelliResponse

var DEBUG_MODE = true;

var BTN_ROLLOVER_EXTENSION = "-selected";
var BTN_DOWN_EXTENSION = "-down";
var BTN_ACTIVATE_PREFIX = "-a";
var BTN_SELECTED_PREFIX = "-s";

var gSnapDistance = 15; // 15 pixel snap distance

var draggingObject = new Object();



// Run code when the page loads.
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
addLoadEvent(valzButtons);


function valzButtons() {
	if (document.getElementsByTagName) {
		var links = document.getElementsByTagName("a");
		for (var i=0; i < links.length; i++) {
			if (links[i].className.match(/valzButton/)){ 
				var elem = links[i]; //alert (elem.nodeName);
				var img = elem.getElementsByTagName("img")[0];
				var nameArray = img.src.match(/^(.+)\.(gif|jpg|png)$/i);
				if (nameArray){
					var rootName = nameArray[1]; 
					var fileExt = nameArray[2];
					var isSelected = elem.className.match(/valzButton-selected/);
					
					elem.valzButton = true;
					elem.rootName = rootName;
					elem.fileExt = fileExt;
					elem.img = img;
					
					elem.activated = false;
					elem.selected = isSelected;
					
					preloadBtnStates(elem);
					createBtnEventHandlers(elem);
					
					elem.onmouseout(); // what the hell does this do??? Sometimes I confound even myself...
				} else {
					alert ("ValzButtons error: nameArray mismatch. Check image name: img.src=\"" + img.src + "\"");
				}
			}
		}

		var links = document.getElementsByTagName("div");
		for (var i=0; i < links.length; i++) {
			if (links[i].className.match(/^valzSlider$/)){ 
				var elem = links[i]; //alert (elem.nodeName);
				var sliderBar = new Object();
				var sliderControl = new Object();
				
				for (var j=0; j < elem.childNodes.length; j++){
					if (elem.childNodes[j].className.match(/valzSliderBar/))  sliderBar = elem.childNodes[j];
					if (elem.childNodes[j].className.match(/valzSliderControl/))  sliderControl = elem.childNodes[j];																				 
				}
				
				if (sliderControl && sliderBar){
					sliderControl.dragging = false;
					sliderControl.onmousedown = createSliderMouseDown(sliderControl, sliderBar);
					draggingObject.dragEnabled = true;
				} else {
					if (DEBUG_MODE) alert ("error: You must define both a sliderControl AND a sliderBar class for each valzSlider instance");
				}
			}
		}
	}
	
	if (draggingObject.dragEnabled) {
		document.onmousemove = sliderDrag;
		document.onmouseup = sliderRelease;
	}
}

function createBtnEventHandlers(btnElement){
	var activatePrefix = btnElement.activated ? BTN_ACTIVATE_PREFIX : ""; 
	var selectedPrefix = btnElement.selected ? BTN_SELECTED_PREFIX : "";
	btnElement.onmouseover = createButtonRollover(btnElement.img, btnElement.rootName + selectedPrefix + activatePrefix, btnElement.fileExt);
	btnElement.onmouseout = createButtonRollout(btnElement.img, btnElement.rootName + selectedPrefix + activatePrefix, btnElement.fileExt);
	btnElement.onmousedown = createButtonPress(btnElement.img, btnElement.rootName + selectedPrefix + activatePrefix, btnElement.fileExt);
	btnElement.onmouseup = createButtonRelease(btnElement.img, btnElement.rootName + selectedPrefix + activatePrefix, btnElement.fileExt);
	btnElement.activate = createButtonActivate(btnElement.img, btnElement.rootName + selectedPrefix + activatePrefix, btnElement.fileExt);
	btnElement.deactivate = createButtonActivate(btnElement.img, btnElement.rootName + selectedPrefix, btnElement.fileExt);

	// non-DOM methods
	if (btnElement.id){ btnElement.simulatePress = function() { btnElement.onmousedown(); setTimeout('document.getElementById("' + btnElement.id + '").onmouseout()', 300); } }
}
function createButtonRollover (imageElement, baseName, fileExtension){
	return (function() {
		var newName = baseName + BTN_ROLLOVER_EXTENSION + "." + fileExtension;
		var imgLoader = new Image();
		imgLoader.onload = (function() { imageElement.src = this.src; });
		imgLoader.src = newName;
//		if(typeof(imageElement.rollover.src) != 'undefined') imageElement.src = imageElement.rollover.src;
	});
}
function createButtonPress (imageElement, baseName, fileExtension){
	return (function() { 
		var newName = baseName + BTN_DOWN_EXTENSION + "." + fileExtension;
		var imgLoader = new Image();
		imgLoader.onload = (function() { imageElement.src = this.src; });
		imgLoader.src = newName;
	});
}
function createButtonRelease (imageElement, baseName, fileExtension){
	return (function() { 
		var newName = baseName + BTN_ROLLOVER_EXTENSION + "." + fileExtension;
		var imgLoader = new Image();
		imgLoader.onload = (function() { imageElement.src = this.src; });
		imgLoader.onerror = (function() { imageElement.src = baseName + "." + fileExtension; });
		imgLoader.src = newName;
	});
}
function createButtonRollout (imageElement, baseName, fileExtension){
	return (function() { imageElement.src = baseName + "." + fileExtension; });
}
function createButtonActivate (imageElement, baseName, fileExtension){ 
	return(function() { imageElement.src = baseName + "." + fileExtension; });
}

function preloadBtnStates(btnElement) {
	var imgName = new String();

	var imgLoader1 = new Image();
	imgName = btnElement.rootName + BTN_ROLLOVER_EXTENSION + "." + btnElement.fileExt;	
	btnElement.rollover = new Image();
	imgLoader1.onload = (function() { btnElement.rollover.src = this.src; });
	imgLoader1.src = imgName;

	var imgLoader2 = new Image();	
	imgName = btnElement.rootName + BTN_DOWN_EXTENSION + "." + btnElement.fileExt;
	btnElement.down = new Image();
	imgLoader2.onload = (function() { btnElement.down.src = this.src; });
	imgLoader2.src = imgName;
}



function activateValzButton(targetButtonId, sourceElement, callBack) {
	var targetButton = document.getElementById(targetButtonId);
	if (targetButton && targetButton.valzButton) {
		targetButton.activated = true;
		createBtnEventHandlers(targetButton);
		targetButton.activate();
		
		if (callBack){
			sourceElement[callBack]();
		}
	} else {
		if (DEBUG_MODE){
			if (targetButton) { alert ("error: targetButton is not a valzButton element"); }
			else { alert ("error: targetButton id \"" + targetButtonId + "\" is not defined."); }
		}
	}
	
}

function deactivateValzButton(targetButtonId, sourceElement, callBack) {
	var targetButton = document.getElementById(targetButtonId);
	if (targetButton && targetButton.valzButton) {
		targetButton.activated = false;
		createBtnEventHandlers(targetButton);
		targetButton.deactivate();
		
		if (callBack){
			sourceElement[callBack]();
		}
	} else {
		if (DEBUG_MODE) alert ("error: targetButton is not a valzButton element");
	}
}

/* SLIDER drag and drop controls */
function createSliderMouseDown(sliderObj, sliderBarObj) {
	return (function() {
		draggingObject.dragging = true;
		draggingObject.control = sliderObj;
		draggingObject.bar = sliderBarObj; 
		
		draggingObject.opts = new Object();		
		// check if we've enabled notched controls
		if (sliderBarObj.getAttribute("notches")) {
			draggingObject.opts.snapping = true;
			draggingObject.opts.notchAry = sliderBarObj.getAttribute("notches").split(/\s*,\s*/);
			draggingObject.opts.snapDistance = parseInt(sliderBarObj.getAttribute("stickiness")) || gSnapDistance;
		}
		if (sliderBarObj.getAttribute("form")){
			var formObj = document.getElementById(sliderBarObj.getAttribute("form")) || document[sliderBarObj.getAttribute("form")];
			if (formObj && typeof(formObj == "object")){
				draggingObject.opts.form = formObj;
				
      			if (sliderBarObj.getAttribute("field")){
					var formField = document.getElementById(sliderBarObj.getAttribute("field")) || formObj[sliderBarObj.getAttribute("field")];
					if (formField && typeof(formField) == "object"){
						draggingObject.opts.formField = formField;
					} else {
						if (DEBUG_MODE) alert ("error: slider targets field \"" + sliderBarObj.getAttribute("field") + "\" of form \"" + sliderBarObj.getAttribute("form") + "\" that does not exist");
					}
				}
			} else {
				if (DEBUG_MODE) alert ("error: slider targets form \"" + sliderBarObj.getAttribute("form") + "\" that does not exist");
			}
		}
		
		if (sliderBarObj.getAttribute("onenddrag")){
			draggingObject.opts.onenddrag = sliderBarObj.getAttribute("onenddrag");
		}

		
		
		
		return false;
	 });
}


function sliderDrag(e){
	if (draggingObject.dragging){
		var dragElem = draggingObject.control;
		var barElem = draggingObject.bar;
		
		var posx = 0;
		var posy = 0;
		if (!e) var e = window.event;
		if (e.pageX || e.pageY) 	{
			posx = e.pageX;
			posy = e.pageY;
		}
		else if (e.clientX || e.clientY) 	{
			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}

		// posx and posy now contain the mouse position relative to the document

		// check slider limits
		if (posx - (dragElem.width/2) < 0 ){
			posx = dragElem.width/2;
		} else if (posx + (dragElem.width/2) > barElem.width) {
			posx = barElem.width - (dragElem.width/2);
		}
		
		if (draggingObject.opts.snapping){
			var snapObj = getNearestSnap(posx, draggingObject.opts.notchAry);
			draggingObject.opts.nearestSnap = snapObj.value;
			draggingObject.opts.nearestSnapIndex = snapObj.index;
			if (posx > draggingObject.opts.nearestSnap - draggingObject.opts.snapDistance && posx < draggingObject.opts.nearestSnap + draggingObject.opts.snapDistance){
				dragElem.style.left = draggingObject.opts.nearestSnap - barElem.width - (dragElem.width/2) + 'px';
			} else {
				dragElem.style.left = posx - barElem.width - (dragElem.width/2) + 'px';
			}
		} else {		
			dragElem.style.left = posx - barElem.width - (dragElem.width/2) + 'px';
		}


		//document.getElementById("test").value = posx + ":" + (barElem.width - (dragElem.width/2)) + " > " + (draggingObject.opts.nearestSnap - draggingObject.opts.snapDistance) + " < " + (draggingObject.opts.nearestSnap + draggingObject.opts.snapDistance);
		
		
		
		
		
		//draggingObject.dragging = false;
		return false;
	}
	
	return true;
}

function sliderRelease(e){
	if (draggingObject.dragging){
		if (draggingObject.opts.snapping){
			draggingObject.control.style.left = draggingObject.opts.nearestSnap - draggingObject.bar.width - (draggingObject.control.width/2) + 'px';
			draggingObject.dragging = false;
		}

		if (draggingObject.opts.form){
			if (draggingObject.opts.formField){
				if (draggingObject.opts.snapping){
					draggingObject.opts.formField.value = draggingObject.opts.nearestSnapIndex;
				}
			}
			
			if (draggingObject.opts.onenddrag){
				eval (draggingObject.opts.onenddrag);
			} else {
				//draggingObject.opts.form.submit();
			}
		}
		return false;
	}
	return true;
}


// from www.quirksmode.org
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

function getNearestSnap(pos, snapAry){
	var nearestSnap;
	var nearestDelta = 9999;
	var snapObj = new Object();
	
	for (i=0; i<snapAry.length; i++){
		var delta = Math.abs(snapAry[i] - pos);
		if (delta < nearestDelta){
			nearestDelta = delta;
			//nearestSnap = snapAry[i];
			snapObj.value = parseInt(snapAry[i]);
			snapObj.index = i;
		}
	}
	//return parseInt(nearestSnap);
	return snapObj;
}