// don't do anything while things are animating!
var isServiceAnimating;
 isServiceAnimating = 0;
 

// Initialise the effects
	function checkfor_fx(x,fx){
		eval("if(!window." + x + "Fx){create_" + fx + "('" + x + "');}");
	}
	function toggle_fx(x,fx){
		checkfor_fx(x,fx); // makes sure animation object exists, if not, creates it
		eval(x + "Fx.toggle();");
	}
	
	
	// OPENFADE
	// Uses prototype to create fading and expanding divs
	// does not need to be declared - will check to see if it exists, and if not, will create itself
	function create_openfade(x){
		eval(x + "Fx = new fx.Combo('" + x + "', {height: true, opacity: true, duration: 400, onComplete:function(){isServiceAnimating = 0;if ($('"+x+"').offsetHeight > 0) $( '"+x+"').style.height ='auto';}})");
		eval(x + "Fx.hide()");
		eval("$('" + x + "').style.display = 'block'");
	} 




	function morethumbs(x,hideme){
		$(hideme).style.display = 'none';
		toggle_fx(x,"openfade");
	}
	
	function morethumbs2(x,hideme,showme, hideme2){
		if (isServiceAnimating == 0){
			$(hideme).style.display = 'none';
			$(showme).style.display = 'block';
			toggle_fx(x,"openfade");
			isServiceAnimating = 1;
		}
	}
	
	function lessthumbs(x,showme){
		$(showme).style.display = 'block';
		toggle_fx(x,"openfade");
	}
	
	function lessthumbs2(x,hideme, showme, showme2){
		if (isServiceAnimating == 0){
			$(showme).style.display = 'block';
			$(hideme).style.display = 'none';
			toggle_fx(x,"openfade");
			isServiceAnimating = 1;
		}
	}
	
	
	function toggle_services(x,arrow){
		if (isServiceAnimating == 0){
			var r = $(arrow);
			var t = r.style.backgroundImage;
			
			var base = "http://www.hypnodesign.com/";
			
			var url1 = "images/down.gif";
			var url2 = "images/up.gif";
			
			if (t == 'url(' + base + url1 + ')'){
				r.style.backgroundImage = 'url(' + base + url2 + ')';
			}else{
				r.style.backgroundImage = 'url(' + base + url1 + ')';
			}
			 isServiceAnimating = 1;
			toggle_fx(x,"openfade");
		}
	}
	


// DETAILBOX
// hover mouse over a thumbnail div and a box will appear next to it, following the mouse, then disappear when mouse is out
// object creates itself using the showDetailBox function
// should rewrite to accomodate different variables besides img, title, and desc


	function showDetailBox(myDiv,followDiv,img,title,desc){
		// if object does not exist, create it
		eval("if(!window." + myDiv + "Detail){" + myDiv + "Detail = new detailBox('" + myDiv + "','" + followDiv + "','" + img + "','" + title + "','" + desc + "');}");
	}
	
	
detailBox = Class.create();
detailBox.prototype = {
  initialize: function(myDiv,followDiv,img,title,desc) {
		
		// set object variables
		this.myDiv = myDiv;
		this.followDiv = followDiv;
		this.img = img;
		this.title = title;
		this.desc = desc;

		Event.observe( $(this.myDiv), 'mousemove', this.f_mousemove.bindAsEventListener(this) );	
		Event.observe( $(this.myDiv), 'mouseover', this.f_mouseover.bindAsEventListener(this) );		
		Event.observe( $(this.myDiv), 'mouseout', this.f_mouseout.bindAsEventListener(this) );
		
		// show it the first time
		this.f_mouseover();

	},

	
	f_mousemove: function(event){
		$(this.followDiv).style.top = (Event.pointerY(event) + -10) + "px"; 
		$(this.followDiv).style.left = (Event.pointerX(event) + -235) + "px";
	},

	
	f_mouseover: function(event){
		$(this.followDiv).style.display = "block";
		$(this.followDiv).innerHTML = "<div class='imgholder'><img src='" + this.img + "' /></div><h2>" + this.title + "</h2><p>" + this.desc + "</p>";
	},
	
	f_mouseout : function(event){
		$(this.followDiv).style.display = "none";
	}

}