// JavaScript Document

//HEADER IMAGE HOVER EFFECT
 $(function() {
				//custom animations to use
				//in the transitions
				var animations		= ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
				var total_anim		= animations.length;
				//just change this to one of your choice
				var easeType		= 'swing';
				//the speed of each transition
				var animSpeed		= 450;
				//caching
				var $hs_container	= $('#hs_container');
				var $hs_areas		= $hs_container.find('.hs_area');
				
				//first preload all images
                $hs_images          = $hs_container.find('img');
                var total_images    = $hs_images.length;
                var cnt             = 0;
                $hs_images.each(function(){
                    var $this = $(this);
                    $('<img/>').load(function(){
                        ++cnt;
                        if(cnt == total_images){
							$hs_areas.each(function(){
								var $area 		= $(this);
								//when the mouse enters the area we animate the current
								//image (random animation from array animations),
								//so that the next one gets visible.
								//"over" is a flag indicating if we can animate 
								//an area or not (we don't want 2 animations 
								//at the same time for each area)
								$area.data('over',true).bind('mouseenter',function(){
									if($area.data('over')){
										$area.data('over',false);
										//how many images in this area?
										var total		= $area.children().length;
										//visible image
										var $current 	= $area.find('img:visible');
										//index of visible image
										var idx_current = $current.index();
										//the next image that's going to be displayed.
										//either the next one, or the first one if the current is the last
										var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();
										//show next one (not yet visible)
										$next.show();
										//get a random animation
										var anim		= animations[Math.floor(Math.random()*total_anim)];
										switch(anim){
											//current slides out from the right
											case 'right':
												$current.animate({
													'left':$current.width()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the left
											case 'left':
												$current.animate({
													'left':-$current.width()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the top	
											case 'top':
												$current.animate({
													'top':-$current.height()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'top'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the bottom	
											case 'bottom':
												$current.animate({
													'top':$current.height()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'top'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the right	and fades out
											case 'rightFade':
												$current.animate({
													'left':$current.width()+'px',
													'opacity':'0'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px',
														'opacity'	: '1'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the left and fades out	
											case 'leftFade':
												$current.animate({
													'left':-$current.width()+'px','opacity':'0'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px',
														'opacity'	: '1'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the top and fades out	
											case 'topFade':
												$current.animate({
													'top':-$current.height()+'px',
													'opacity':'0'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'top'		: '0px',
														'opacity'	: '1'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the bottom and fades out	
											case 'bottomFade':
												$current.animate({
													'top':$current.height()+'px',
													'opacity':'0'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'top'		: '0px',
														'opacity'	: '1'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;		
											default:
												$current.animate({
													'left':-$current.width()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
										}	
									}
								});
							});
							
							//when clicking the hs_container all areas get slided
							//(just for fun...you would probably want to enter the site
							//or something similar)
							$hs_container.bind('click',function(){
								$hs_areas.trigger('mouseenter');
							});
						}
					}).attr('src',$this.attr('src'));
				});			
				

            });
			
// NAVIGATION MENU			
$(document).ready(function(){
	var animSpeed=450; //fade speed
	var hoverTextColor="#fff"; //text color on mouse over
	var hoverBackgroundColor="#999"; //background color on mouse over
	var textColor=$("#nav li a").css("color");
	var backgroundColor=$("#nav li").css("background-color");
	//text color animation
	$("#nav li a").hover(function() {
		$(this).stop().animate({ color: hoverTextColor }, animSpeed);
	},function() {
		$(this).stop().animate({ color: textColor }, animSpeed);
	});
	//background color animation
	$("#nav li").hover(function() {
		$(this).stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
	},function() {
    	$(this).stop().animate({ backgroundColor: backgroundColor }, animSpeed);
	});
});

// STYLE MY TOOL-TIPS
(function($){  
 $.fn.style_my_tooltips = function(options) {  
	var defaults = {  
		tip_follows_cursor: "on", 
		tip_delay_time: 1000
	};
	var options = $.extend(defaults, options);
	$("body").append("<div id='s-m-t-tooltip'></div>"); //create the tooltip container
	smtTip=$("#s-m-t-tooltip"); 
	smtTip.hide(); //hide it
    return this.each(function() {  
		function smtMouseMove(e){
			smtMouseCoordsX=e.pageX;
			smtMouseCoordsY=e.pageY;
			smtTipPosition();
		}
		function smtTipPosition(){
			var cursor_tip_margin_x=0; //horizontal space between the cursor and tooltip
			var cursor_tip_margin_y=30; //vertical space between the cursor and tooltip
			var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();
			var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();
			if(leftOffset<=$(window).width()){
				smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x);
			} else {
				var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
				smtTip.css("left",thePosX);
			}
			if(topOffset<=$(window).height()){
				smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y);
			} else {
				var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
				smtTip.css("top",thePosY);
			}
		}
		$(this).hover(function(e) {  
			// mouseover
			var $this=$(this);
			$this.data("smtTitle",$this.attr("title")); //store title 
			var theTitle=$this.data("smtTitle");
			$this.attr("title",""); //remove title to prevent native tooltip showing
			smtTip.empty().append(theTitle).hide(); //set tooltip text and hide it
			smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //set tooltip delay
			if(options.tip_follows_cursor=="off"){
				smtMouseMove(e);
			} else {
				$(document).bind("mousemove", function(event){
					smtMouseMove(event); 
				});
			}
		}, function() {  
			// mouseout
			var $this=$(this);
			if(options.tip_follows_cursor!="off"){
				$(document).unbind("mousemove");
			}
			clearInterval(smtTip_delay);
			if(smtTip.is(":animated")){ 
				smtTip.hide();
			} else {
				smtTip.fadeTo("fast",0);
			}
			$this.attr("title",$this.data("smtTitle")); //add back title
		});
		function smtTip_fadeIn(){
			smtTip.fadeTo("fast",1,function(){clearInterval(smtTip_delay);});
		}
	});  
 };  
})(jQuery); 

// OVERLAY
 $(function() {
                $('#activator').click(function(){
                    $('#overlay').fadeIn('fast',function(){
                        $('#box').animate({'top':'160px'},500);
                    });
                });
                $('#boxclose').click(function(){
                    $('#box').animate({'top':'-1000px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                });

            });
			
$(function() {
                $('#activator2').click(function(){
                    $('#overlay').fadeIn('fast',function(){
                        $('#box2').animate({'top':'160px'},500);
                    });
                });
                $('#boxclose2').click(function(){
                    $('#box2').animate({'top':'-1000px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                });

            });
			
$(function() {
                $('#activator3').click(function(){
                    $('#overlay').fadeIn('fast',function(){
                        $('#box3').animate({'top':'160px'},500);
                    });
                });
                $('#boxclose3').click(function(){
                    $('#box3').animate({'top':'-1000px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                });

            });
$(function() {
                $('#activator4').click(function(){
                    $('#overlay').fadeIn('fast',function(){
                        $('#box4').animate({'top':'160px'},500);
                    });
                });
                $('#boxclose4').click(function(){
                    $('#box4').animate({'top':'-1000px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                });

            });