// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

function $P(value) {
  return parseInt(document.documentElement.clientWidth * value / 100.0);
}

function mirrorFieldValues(field1,field2) {
	//$(field2).disabled = true;
	new Form.Element.Observer(field1,1,function() {
		$(field2).value = $F(field1);
	});
}

// create a rollover effect for the element give in parameter 
function core_rollover(element, backgroundColor, highlightColor) {
  if (((typeof element == 'object') || 
        (typeof element == 'function')) && 
        (element.length))
    element = element;
  else
    element = $(element);

  Event.observe(element, 'mouseover', function(e) { Element.setStyle(element,{backgroundColor: highlightColor}); }, false);
  Event.observe(element, 'mouseout', function(e) { Element.setStyle(element,{backgroundColor: backgroundColor}); }, false);       
}

// create a rollover effect on each element which owns a specific className for IE !
function rolloverForIE(className, backgroundColor, highlightColor) {
    if (/MSIE/.test(navigator.userAgent) == false)
      return;

    if (className == null || className.length == 0)
      return false;

		var nodesList = document.getElementsByClassName(className);
		
		$A(nodesList).each(function(node) {
		    if (/headerRow/.test(node.className) == false)
				  core_rollover(node, backgroundColor, highlightColor);
			});
}

function showRelatedProductName(e, id) {
	//alert(e);
  var tooltip = $('relatedProductName_' + id);
  
  //Position.prepare();
  //var position = Position.cumulativeOffset($('relatedProduct_' + id));    
  //tooltip.style.top = (position[1] + 36) + "px";
  //tooltip.style.left = (position[0] + 36) + "px";
  
	// tooltip.style.top = (e.clientY + 20) + "px";
	// tooltip.style.left = (e.clientX + 20) + "px";

	// alert(Event.pointerX(e) + ", " + Event.pointerY(e));
	// alert(Event.pointerX(e) + ", " + Event.pointerY(e));

	tooltip.style.top = (Event.pointerY(e) + 20) + "px";
	tooltip.style.left = (Event.pointerX(e) + 20) + "px";

  Element.show(tooltip);
}

function hideRelatedProductName(id) {
  var tooltip = $('relatedProductName_' + id);
  Element.hide(tooltip);
  
}

/* === CAROUSEL === */

function buttonStateHandler(button, enabled) {
 // if (button == "prev-arrow") 
 //   $('prev-arrow').src = enabled ? "images/left3-enabled.gif" : "images/left3-disabled.gif"
 // else 
 //   $('next-arrow').src = enabled ? "images/right3-enabled.gif" : "images/right3-disabled.gif"
}

function animHandler(carouselID, status, direction) {
  var region = $(carouselID).down(".carousel-clip-region")
  if (status == "before") {
    Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carousel" }, duration: 0.2})
  }
  if (status == "after") {
    Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carousel" }, duration: 0.2})
  }
}

/* === RollOverOnList === */

var RollOverOnList = Class.create();

RollOverOnList.prototype = {
	initialize: function(elementName) {	
		this.list = $(elementName);
		this.listName = elementName;
		
   	this.options = Object.extend({
      tag: 'li',
			hoverClassName: 'hover',
			except: 'active',			
			alternateClasses: null,
			show: null,
			disableFor: null
    }, arguments[1] || {});	

		this.refresh();
	},
	refresh: function() {
		var list = this;
		var even = 0;
				
		$$("#" + this.listName + " " + list.options.tag).each(function(element) {		
			/* reset all the behaviours */
			Element.removeClassName(element, 'hover');
			
			if (list.options.show) {
				$A(document.getElementsByClassName(list.options.show, element)).each(function(elementToHide) {
					if (!hasClassName(element, list.options.disableFor))
						Element.hide(elementToHide);
				});
			}
			
			if (list.options.alternateClasses) {
				Element.removeClassName(element, list.options.alternateClasses[0]);
				Element.removeClassName(element, list.options.alternateClasses[1]);
				
				if (!hasClassName(element, list.options.except))
					Element.addClassName(element, !even ? list.options.alternateClasses[0] : list.options.alternateClasses[1]);
				even = even ? 0 : 1;
			}

			if (!list.options.disableFor || !hasClassName(element, list.options.disableFor)) {
				Event.observe(element, 'mouseover', function(e) { 		
					// if (dragging)
					// 	return ;
							
					if (list.options.show) {
						$A(document.getElementsByClassName(list.options.show, element)).each(function(elementToShow) {
							Element.show(elementToShow);
						});
					}
					Element.addClassName(element, 'hover');
	 			}, false);

				Event.observe(element, 'mouseout', function(e) { 
					if (list.options.show) {
						$A(document.getElementsByClassName(list.options.show, element)).each(function(elementToHide) {
							Element.hide(elementToHide);
						});
					}			
					Element.removeClassName(element, 'hover');
	 			}, false);
			}
		});
	},
	forceMouseout: function(element) {
		Element.removeClassName(element, 'hover');
		if (this.options.outFunction)
			this.options.outFunction(element);
	}
}

// =======================================================================


function hasClassName(element, classes) {
	if (classes == null)
		return false;
	if (typeof classes == 'string') {
		// actually, only one class to test 
		return Element.hasClassName(element, classes);
	} else {
		for (var i = 0; i < classes.length; i++) {
			if (Element.hasClassName(element, classes[i]))
				return true;
		}
	}
	return false;
}

function wishListPopup(){
  var x=document.viewport.getWidth();
  $('wishlist_popup').style.left = ((x/2)-250) + 'px';
  $('wishlist_popup').toggle();
  $('wishlist_popup_shim').style.left = ((x/2)-250) + 'px';
  $('wishlist_popup_shim').toggle();
}