/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.

Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.

You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.

Visit http://ryanfait.com/ for more information.

*/

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "86";

/* No need to change anything after this */

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; }</style>');

var Custom = {
   init: function() {
      var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
      for(a = 0; a < inputs.length; a++) {
         if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
            span[a] = document.createElement("span");
            span[a].className = inputs[a].type;

            if(inputs[a].checked == true) {
               if(inputs[a].type == "checkbox") {
                  position = "0 -" + (checkboxHeight*2) + "px";
                  span[a].style.backgroundPosition = position;
               } else {
                  position = "0 -" + (radioHeight*2) + "px";
                  span[a].style.backgroundPosition = position;
               }
            }
            inputs[a].parentNode.insertBefore(span[a], inputs[a]);
            inputs[a].onchange = Custom.clear;
            span[a].onmousedown = Custom.pushed;
            span[a].onmouseup = Custom.check;
            document.onmouseup = Custom.clear;
         }
      }
      inputs = document.getElementsByTagName("select");
      for(a = 0; a < inputs.length; a++) {
         if(hasClassName("styled",inputs[a].className)) {
            option = inputs[a].getElementsByTagName("option");
            active = option[0].childNodes[0].nodeValue;
            textnode = document.createTextNode(active);
            for(b = 0; b < option.length; b++) {
               if(option[b].selected == true) {
                  textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
               }
            }
            span[a] = document.createElement("span");
            span[a].className = "select";
            span[a].id = "select" + inputs[a].name + a;
            span[a].appendChild(textnode);
            inputs[a].parentNode.insertBefore(span[a], inputs[a]);
            inputs[a].onchange = Custom.choose;
         }
      }
   },
   pushed: function() {
      element = this.nextSibling;
      if(element.checked == true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
      } else if(element.checked == true && element.type == "radio") {
         this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
      } else if(element.checked != true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
      } else {
         this.style.backgroundPosition = "0 -" + radioHeight + "px";
      }
   },
   check: function() {
      element = this.nextSibling;
      if(element.checked == true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 0";
         element.checked = false;
      } else {
         if(element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
         } else {
            this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
            group = this.nextSibling.name;
            inputs = document.getElementsByTagName("input");
            for(a = 0; a < inputs.length; a++) {
               if(inputs[a].name == group && inputs[a] != this.nextSibling) {
                  inputs[a].previousSibling.style.backgroundPosition = "0 0";
               }
            }
         }
         element.checked = true;
      }
   },
   clear: function() {
      inputs = document.getElementsByTagName("input");
      for(var b = 0; b < inputs.length; b++) {
         if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
         } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
         } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
         } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
         }
      }
   },
   choose: function() {   
	(this.id == 'orderby') ? document.getElementById('fform').submit() : '';
      option = this.getElementsByTagName("option");
      for(d = 0; d < option.length; d++) {
         if(option[d].selected == true) {
            document.getElementById(this.parentNode.getElementsByTagName("span")[0].id).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
         }
      }
   }
}

/* webcoders.eu add */
function hasClassName(needle, stock) {
	classTmp = stock.split(" ");
	for (i=0; i < classTmp.length; i++) {
		if (needle == classTmp[i]) return true;
	}
	
	return false
}

window.onload = Custom.init;


/*
---
script: rotater.js
description: MGFX.Rotater, the base class that provides slides and transitions. 
authors: Sean McArthur (http://seanmonstar.com) 
license: MIT-style license 
requires:
 core/1.3.0: [Event, Element.Event, Fx.CSS]
 more/1.3.0.1: [Fx.Elements]
provides: [MGFX.Rotater]
...
*/

//MGFX.Rotater. Copyright (c) 2008-2010 Sean McArthur <http://seanmonstar.com/>, MIT Style License.

if(!window.MGFX) MGFX = {};

MGFX.Rotater = new Class({
	
	Implements: [Options, Events],
	
	options: {
		slideInterval: 5000,
		transitionDuration: 1000,
		startIndex: 0,
		autoplay: true,
		hover:true,
		hash: true
		/*onAutoPlay: function() {},
		onRotate: function() {},
		onShowSlide: function() {},
		onStop: function() {},
		onPause: function() {},
		onResume: function() {}*/
	},
	
	initialize: function(slides,options){
		this.setOptions(options);
		this.slides = $$(slides);
		this.createFx();
		this.showSlide(this.options.startIndex);
		if(this.slides.length < 2) this.options.autoplay = false;
		if(this.options.autoplay) this.autoplay();
		return this;
	},
	
	createFx: function(){
		if (!this.slideFx) this.slideFx = new Fx.Elements(this.slides, {duration: this.options.transitionDuration, link: 'cancel'});
		this.slides.each(function(slide){
			slide.setStyle('opacity',0);
		});
	}.protect(),
	
	setupHover: function() {
		var _timeLastRotate = new Date(),
			_timeLastPause,
			_timeTillRotate = this.options.slideInterval;

		this._resumeDelay = null;
			
		var onRotate = this._onRotate = function() {
			if(this.slideshowInt) {
				_timeLastRotate = new Date();
				_timeTillRotate = this.options.slideInterval;
			}
		};
		var onMouseEnter = this._onMouseEnter = function() {
			this.stop();
			_timeLastPause = new Date();
			clearTimeout(this._resumeDelay);
			this.fireEvent('onPause');
		}.bind(this);
		
		var onMouseLeave = this._onMouseLeave = function() {
			var timePassed = (_timeLastPause - _timeLastRotate);
			_timeLastRotate = new Date() - timePassed;
			this._resumeDelay = (function() {
				this.autoplay();
				this.rotate();
				this.fireEvent('onResume');
			}).delay(_timeTillRotate - timePassed, this);			
		}.bind(this);
		
		this.addEvent('onRotate', onRotate);
		this.slides.addEvents({
			'mouseenter': onMouseEnter,
			'mouseleave': onMouseLeave
		});
		
		this._hoverSet = true;
	}.protect(),
	
	removeHover: function() {
		this.removeEvent('onRotate', this._onRotate);
		this.slides.removeEvents({
			'mouseenter': this._onMouseEnter,
			'mouseleave': this._onMouseLeave
		});
		clearTimeout(this._resumeDelay);
		this._hoverSet = false;
	},
	
	showSlide: function(slideIndex){
		if(slideIndex == this.currentSlide) return this;
		var action = {},
			curSlide = this.currentSlide;
		this.slides.each(function(slide, index){
			if(index == slideIndex && index != curSlide){ //show
				action[index.toString()] = { opacity: 1, visibility:'visible' };
			} else {
				action[index.toString()] = { opacity:0, visibility:'hidden' };
			}
		});
		this.fireEvent('onShowSlide', slideIndex);
		this.currentSlide = slideIndex;
		this.slideFx.start(action);
		return this;
	},
	
	autoplay: function(){
		if(this.slideshowInt) return this;
		if(this.options.hover && !this._hoverSet) this.setupHover();
		this.slideshowInt = this.rotate.periodical(this.options.slideInterval, this);
		this.fireEvent('onAutoPlay');
		return this;
	},
	
	stop: function(not_pause){
		clearInterval(this.slideshowInt);
		this.slideshowInt = null;
		this.fireEvent('onStop');
		if(not_pause && this.options.hover) this.removeHover();
		return this;
	},
	
	rotate: function(){
		var next = this.getNext();
		this.showSlide(next);
		this.fireEvent('onRotate', next);
		return this;
	},
	
	random: function() {
		var index = Math.floor(Math.random() * this.slides.length);
		index = index == this.currentSlide ? this.getNext() : index;
		this.showSlide(index);
		this.fireEvent('onRandom', index);
		return this;
	},
	
	getNext: function() {
		var current = this.currentSlide;
		return (current+1 >= this.slides.length) ? 0 : current+1
	}.protect()
	
});

if(!window.Rotator) var Rotater = MGFX.Rotater;

/*
---
script: tabs.js
description: MGFX.Tabs, extension of base class that adds tabs to control the rotater. 
authors: Sean McArthur (http://seanmonstar.com) 
license: MIT-style license 
requires:
 core/1.3.0: [Event, Element.Event, Fx.CSS]
 more/1.3.0.1: [Fx.Elements]
provides: [MGFX.Tabs]
...
*/

//MGFX.Tabs. Copyright (c) 2008-2011 Sean McArthur <http://seanmonstar.com/>, MIT Style License.

if(!window.MGFX) MGFX = {};

MGFX.Tabs = new Class({
	
	Extends: MGFX.Rotater,
	
	options: {
		autoplay: false,
		onShowSlide: function(slideIndex) {
			this.tabs.removeClass('active');
			this.tabs[slideIndex].addClass('active');
		}
	},
	
	initialize: function(tabs, slides, options){
		this.tabs = $$(tabs);
		this.createTabs();
		if(options.hash && window.location.hash) {
			this.getHashIndex(options);
		}
		return this.parent(slides,options);
	},
	
	createTabs: function () {
		var that = this;
		this.tabs.forEach(function(tab,index){
			//need index, thats why theres the forEach
			tab.addEvent('click', function(event){ 
				event.preventDefault();
				that.showSlide(index);
				that.stop(true);
			});
		});
	}.protect(),
	
	getHashIndex: function(options) {
		var hash = window.location.hash.substring(1);
		this.tabs.forEach(function(el, index) {
			if(el.get('id') == hash) {
				options.startIndex = index;
			}
		});
	}.protect()
	
});

if(!window.Tabs) var Tabs = MGFX.Tabs;