/**
 * Rules for hyperlink behaviour
 */
var hyperlink_rules = {

    'a.popup' : function(el) {

        /**
         * Event:  click
         * Action: open a popup window
         */
        Event.observe(el, 'click', function(e) {
            var me = Event.findElement(e,'A');
            var params = Element.getClassParameters(me);
            var width = params.width || 684;
            var height = params.height || 350;
            var top = params.top || 200;
            var left = params.left || '50%';
            Event.stop(e);
            window.open(me.href,
                'PopUp',
                'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left + ',scrollbars=0,status=no,resizable=0,toolbar=0,titlebar=0,menubar=0,location=0');
            return false;
        }, false);
    },

    'a.status' : function(el) {
        /**
         * Event:  mouseover
         * Action: display the hyperlinks title in the status bar
         */
        Event.observe(el, 'mouseover', function(e) {
            var me = Event.findElement(e,'A');
            window.status=me.title;
            return true;
        },false);

        /**
         * Event:  mouseout
         * Action: clear the status bar
         */
        Event.observe(el, 'mouseout', function(e) {
            window.status='';
            return true;
        },false);
    },

    'a.switch' : function(el) {
        /**
         * Event:  click
         * Action: show / hide the element with the same ID minus "_switch"
         */
        Event.observe(el, 'click', function(e) {
            var me = Event.findElement(e,'A');
            var c = $(me.id.replace('_switch',''));
            if (c) {
                Element.toggle(c);
            }
        }, false);
    },
		'a.switch2' : function(el) {
        /**
         * Event:  mouseover
         * Action: show an element with the same ID minus "_switch", hide all others.
         */

        Event.observe(el, 'mouseover', function(e) {
            var me = Event.findElement(e,'A');

            // Hide all others.
            var nodes = $('switch2').getElementsByClassName('project');
            if(nodes.length > 0){
                for (i=0; i < nodes.length; i++){
                    var b = $(nodes[i]);
                    if (b.visible()) {
                        Element.toggle(b);
                    }
                }
            }
            var c = $(me.id.replace('_switch',''));
            if (c) {
                Element.toggle(c);
            }
            return false;
        }, false);
		},

    'a.submit' : function(el) {
    	/**
    	* Event: click
    	* Action: submit the form given as a param. (used by captcha)
    	*/
    	Event.observe(el, 'click', function(e) {
            var me = Event.findElement(e,'A');
            var params = Element.getClassParameters(me);
            var form = $(params.form);
            if (form){
            	form.submit();
            }
			Event.stop(e);
            return false;
        }, false);
    },
	'a.external' : function(el) {
    	/**
    	* Event: click
    	*/
		el.target = "_blank";
//		el.addEvent('click', function(e){
//			if (!e.ctrlKey && !e.altKey && !e.shiftKey) {
//				window.open(this.href);
//				(new Event(e)).stop();
//				return false;
//			}
//			return false;
//		});
    }
}

Behaviour.register(hyperlink_rules);
/**
 * Behaviour rules for form elements
 */

var form_rules = {
    'input.auto_upper' : function(el) {

        /**
         * Event:  blur
         * Action: convert field value to upper case
         */
        Event.observe(el, 'blur', function(e) {
            me = Event.element(e);
            me.value = me.value.toUpperCase();
        }, false);

        /**
         * Event:  change
         * Action: convert field value to upper case
         */
        Event.observe(el, 'change', function(e) {
            me = Event.element(e);
            me.value = me.value.toUpperCase();
        }, false);
    },

    'input.auto_blur' : function(el) {

        /**
         * Event:  focus
         * Action:
         *   - replace field's classname from "_off" to "_on"
         *   - if labeled, replace label's classname from "_off" to "_on"
         *   - if label is image, replace image with "_hover" version
         */
        Event.observe(el, 'focus', function(e) {
            me = Event.element(e);
            me.className = me.className.replace('_off','_on');
            var fieldLabel = $(me.id + '_label');
            if (fieldLabel) {
                  fieldLabel.className = fieldLabel.className.replace('_off','_on');
                var image = fieldLabel.getElementsByTagName('img')[0];
                if (image) {
                    image.src = image.src.replace('_normal','_hover');
                }
            }
        }, false);

        /**
         * Event:  blur
         * Action:
         *   - replace field's classname from "_on" to "_off"
         *   - if labeled, replace label's classname from "_on" to "_off"
         *   - if label is image, replace image with "_normal" version
         */
        Event.observe(el, 'blur', function(e) {
            me = Event.element(e);
            me.className = me.className.replace('_on','_off');
            var fieldLabel = $(me.id + '_label');
            if (fieldLabel) {
                  fieldLabel.className = fieldLabel.className.replace('_on','_off');
                var image = fieldLabel.getElementsByTagName('img')[0];
                if (image) {
                    image.src = image.src.replace('_hover','_normal');
                }
            }
        }, false);
    },
    'input.auto_blur_multiple' : function(el) {

        /**
     * This is the multiple variant of auto_blur. It will highlight the
     * label of replace the image. The id of the label must be the same
     * as the id of the field, minus the last underscore and digits.
     * Now you can do those fancy multiple fields with one label :)
         */
        Event.observe(el, 'focus', function(e) {
            me = Event.element(e);
            me.className = me.className.replace('_off','_on');
            var fieldLabel = $(me.id.sub(/_\d+$/, '') + '_label');
            if (fieldLabel) {
                  fieldLabel.className = fieldLabel.className.replace('_off','_on');
                var image = fieldLabel.getElementsByTagName('img')[0];
                if (image) {
                    image.src = image.src.replace('_normal','_hover');
                }
            }
        }, false);

        Event.observe(el, 'blur', function(e) {
            me = Event.element(e);
            me.className = me.className.replace('_on','_off');
            var fieldLabel = $(me.id.sub(/_\d+$/, '') + '_label');
            if (fieldLabel) {
                  fieldLabel.className = fieldLabel.className.replace('_on','_off');
                var image = fieldLabel.getElementsByTagName('img')[0];
                if (image) {
                    image.src = image.src.replace('_hover','_normal');
                }
            }
        }, false);
    },
    'input.auto_clear' : function(el) {

        /**
         * Event:  focus
         * Action:
         *   - clear value
         *   - remove auto_clear class
         */
        Event.observe(el, 'focus', function(e) {
            var me = Event.element(e);
            if (Element.hasClassName(me,'auto_clear')) {
                me.value='';
            }
            Element.removeClassName(me,'auto_clear');
        }, false);
    },
    '#display_changepw' : function(el) {

        /**
         * Event:  onclick
         * Action:
         *   - check if div is displayed
         *   - display or hide div
         */
        Event.observe(el, 'click', function(e) {
            if($('changepw').style.display == 'block'){
              $('changepw').style.display = 'none';
            }else{
              $('changepw').style.display = 'block';
            }
        }, false);
    },
    'input.rollover' : function(el) {

        /**
         * Event:  mouseover
         * Action:
         *   - if not "active", replace classname by "_hover" classname
         *   - if type is "image", replace image by "_hover" version
         */
        Event.observe(el,'mouseover',function(e) {
            var me = Event.element(e);
            if (!Element.hasClassName(me,'active')) {
                me.className = me.className.replace('_normal','_hover');
                if (me.type == 'image') {
                    me.src = me.src.replace('_normal','_hover');
                }
            }
        },false);

        /**
         * Event:  mouseout
         * Action:
         *   - replace classname by "_hover" classname
         *   - if type is "image", replace image by "_hover" version
         */
        Event.observe(el,'mouseout',function(e) {
            me = Event.element(e);
            if (!Element.hasClassName(me,'active')) {
                me.className = me.className.replace('_hover','_normal');
                if (me.type == 'image') {
                    me.src = me.src.replace('_hover','_normal');
                }
            }
        },false);
    },
    'select.change_submit' : function (el){
    /**
    * Event: change
    * Action:
    *  - submit the form
    */
        Event.observe(el,'change',function() {
      this.form.submit();
        },false);
    }
}
Behaviour.register(form_rules);

var rollover_rules = {
    'img.rollover' : function(el) {

//        /**
//         * Event:  mouseover
//         * Action: show hover version
//         */
//				Event.observe(el, 'mouseover', function(e) {
//            me = Event.element(e);
//            me.src = me.src.replace('_normal','_hover');
//        }, false);
//
//        /**
//         * Event:  mouseout
//         * Action: show normal version
//         */
//        Event.observe(el, 'mouseout', function(e) {
//            me = Event.element(e);
//            me.src = me.src.replace('_hover','_normal');
//        }, false);
        /**
         * Event:  mouseover
         * Action: show hover version
         */
		$(el).addEvent('mouseover', function(e) {
            this.src = this.src.replace('_normal','_hover');
        });

        /**
         * Event:  mouseout
         * Action: show normal version
         */
        $(el).addEvent('mouseout', function(e) {
            this.src = this.src.replace('_hover','_normal');
        });
    },

    'img.bw_rollover' : function(el) {
	      /**
	       * Event:  mouseover
	       * Action: show hover version
	       */
	    $(el).addEvent('mouseover', function(e) {
            this.src = this.src.replace('_smallbw','_small');
        });

        $(el).addEvent('mouseout', function(e) {
            this.src = this.src.replace('_smallbw','_small');
            this.src = this.src.replace('_small','_smallbw');
        });
	}
}
Behaviour.register(rollover_rules);

//var slide_behaviour = {
//		'div#background': function(el) {
//			var slides = [$('pic1'),$('pic2')];
//		},
//		'a.slide_control': function(el) {
//
//			$(el).addEvent('click', function(e) {
//				var mySlide1 = new Fx.Slide('pic1', {mode: 'horizontal', wait: false});
//				var mySlide2 = new Fx.Slide('pic2', {mode: 'horizontal', wait: false});
//				mySlide1.slideOut();
//				mySlide2.slideIn();
//			});
//		}
//}
//Behaviour.register(slide_behaviour);

var visibility_rules = {
    '.js_visible' : function(el) {
        el.style.display = 'block';
    }
}
Behaviour.register(visibility_rules);

var ajax_rules = {
    'a.get_project' : function(el) {
	    /**
	     * Event:  mouseclick
	     * Action: update div content_projects_right
	     */
	    $(el).addEvent('click', function(e) {
            e = new Event(e).stop();
 			
 			var projectParams = Element.getClassParameters(this);
			var url = "projects_ajax.php?action=getProject&itemID=" + projectParams.itemID;
			
			/**
			 * The simple way for an Ajax request, use onRequest/onComplete/onFailure
			 * to do add your own Ajax depended code.
			 */
			var getProjects = new Ajax(url, {
				method: 'get',
				update: $('project01')
			}).request();
			
			var nodes = $('projects').getElementsByClassName('active');
			
			nodes.each( function (e){
				e.src = e.src.replace('_small','_smallbw');
				e.removeClass('active');
				e.addClass('bw_rollover');
				e.fireEvent('mouseover');
				e.fireEvent('mouseout');
			});
			
			var img = this.firstChild;
			img.removeEvents();
			img.src = img.src.replace('_smallbw','_small');
			img.removeClass('bw_rollover');
			img.addClass('active');
        });
	},
	
	'a.get_projectresults' : function(el) {
	    /**
	     * Event:  mouseclick
	     * Action: update div content_projects_right
	     */
	    $(el).addEvent('click', function(e) {
            e = new Event(e).stop();

 			var projectParams = Element.getClassParameters(this);
 			var url = "projects_ajax.php?action=getProjectResults";

			if ( projectParams.regionID != null) {
				url += "&regionID=" + projectParams.regionID;
			}

			if ( projectParams.applicationID != null) {
				url += "&applicationID=" + projectParams.applicationID;
			}

			if ( projectParams.techniqueID != null) {
				url += "&techniqueID=" + projectParams.techniqueID;
			}

			if ( projectParams.materialID != null) {
				url += "&materialID=" + projectParams.materialID;
			}

			/**
			 * The simple way for an Ajax request, use onRequest/onComplete/onFailure
			 * to do add your own Ajax depended code.
			 */
			var getProjectResults = new Ajax(url, {
				method: 'get',
				onComplete: getResultLinks,
				update: $('system_results')
			}).request();
			
			function getResultLinks() {			
				var resultLinks = $('system_results').getElementsByClassName('rollover');
				
				resultLinks.each( function (e){
					/**
			         * Event:  mouseover
			         * Action: show hover version
			         */
					$(e).addEvent('mouseover', function(e) {
			            this.src = this.src.replace('_normal','_hover');
			        });
			
			        /**
			         * Event:  mouseout
			         * Action: show normal version
			         */
			        $(e).addEvent('mouseout', function(e) {
			            this.src = this.src.replace('_hover','_normal');
			        });
				});
			}

			var nodes = $('systems').getElementsByClassName('active');
			
			nodes.each( function (e){
				e.setStyles({
				    color: '#fff',
				    background: 'none'
				});
				
				e.removeClass('normal');
				e.addClass('active');
			});
			
			this.setStyles({
			    color: '#000',
			    background: '#fff'
			});
			
			this.removeClass('normal');
			this.addClass('active');
        });
	}
}

Behaviour.register(ajax_rules);

var print_rules = {
    'a.print' : function(el) {
        el.onclick = function() {
            window.print();
            return false;
        }
    }
}
Behaviour.register(print_rules);

var background_rules = {
    'a.show_next_image' : function(el) {
        var imageCounter = 1;
        var backgroundImage = $('background').firstChild;
        var nextBackgroundImage = $('background_next_hidden').firstChild;
		var backgroundImageFx = new Fx.Style(backgroundImage, 'opacity', {duration: 2000});
		var busy = false;
		
        $(el).addEvent('click', function(e) {
    		e = new Event(e).stop();
			
			if (!busy) {
				busy = true;
				
				backgroundImageFx.start(1,0).chain(function(){
				    if (imageCounter >= 10) {
				    	imageCounter = imageCounter - 10;
				    	backgroundImage.src = backgroundImage.src.replace('bg_10', 'bg_1');
				    	nextBackgroundImage.src = nextBackgroundImage.src.replace('bg_11', 'bg_2');
				    } else {
				    	backgroundImage.src = backgroundImage.src.replace('bg_'+imageCounter, 'bg_'+(imageCounter+1));
				    	nextBackgroundImage.src = nextBackgroundImage.src.replace('bg_'+(imageCounter+1), 'bg_'+(imageCounter+2));
				    	
				    	imageCounter++;
				    }
					
				    backgroundImageFx.start(0,1);
				}).chain(function(){
				    busy = false;
				});
			}
    	});
    }
}
Behaviour.register(background_rules);

var timer = false;

var project_rules = {
	'.projects' : function (el) {
		if (!timer) {
			var projectContainers = new Array();
			var divs = $('content_block_projects').getElementsByTagName('div');
			for (i in divs) {
				if (divs[i].className && divs[i].className.match(/^project$|^project /)) {
					projectContainers.push(divs[i]);
					if (divs[i].className.match(/active/)) {
						var activeItem = projectContainers[i];
						var activeIndex = i;
					}
				}
			}
			function getActiveLoader(activeItem) {
				var divs = activeItem.getElementsByTagName('div');
				for(i in divs) {
					if (divs[i].className && divs[i].className.match(/jukebox_loader/)) {
						return divs[i];
					}
				}
			}
			var activeLoader = getActiveLoader(activeItem);
			timer = true;
			new MUIL.Timer({
				timeout: 10,
				fps: 24,
				frameFn:function(){
					activeLoader.style.width = (this.getPercentage())+'%';
				},
				loopFn: function(){
					if (activeIndex == projectContainers.length -1) {
						activeIndex = 0;
					} else {
						activeIndex++;
					}
					activeItem.className = activeItem.className.replace(' active','');
					projectContainers[activeIndex].className += ' active';
					activeItem = projectContainers[activeIndex];
					activeLoader = getActiveLoader(activeItem);
				}.bind(this)
			});
		}
	}
}
Behaviour.register(project_rules);