// JavaScript Document
    $(document).ready(function(){
        		
		$("ul.sub-menu").parent().append("<div class=\"drop_shadow\">&nbsp;</div>");
		$("ul.sub-menu").parent().append("<div class=\"drop_shadow_bottom\">&nbsp;</div>");
		
		$(".tab").css( "background-image", "none" );
		
        $("ul.menu li a.tab").mouseover(function() { //When trigger is clicked...  
      		$(this).toggleClass( "tabOver", true );
			
			submenu = $(this).parent().find("ul.sub-menu");
			dropshadow = $(this).parent().find("div.drop_shadow");
			dropshadow_bottom = $(this).parent().find("div.drop_shadow_bottom");
			
			h = Math.ceil(submenu.children().length / 2) * 130;
			submenu.height( h ); 
            submenu.show();
    		
			dropshadow.height( h-6 );
			dropshadow.show();
			  
	  		dropshadow_bottom.css("top", h+160+'px');
			dropshadow_bottom.show();
			
            $(this).parent().hover(function() { 
            }, function(){
			   $(this).parent().find("a").toggleClass( "tabOver", false );
			   $(this).parent().find("ul.sub-menu").hide(); //When the mouse hovers out of the subnav, move it back up  
               $(this).parent().find("div.drop_shadow").hide();
			   $(this).parent().find("div.drop_shadow_bottom").hide();
			});  
      		
            //Following events are applied to the trigger (Hover events for the trigger)  
        }); 
		
		$("#text_holder div").hide();
		$("#text_holder div:first-child").fadeIn('slow');
		
		$('#sub_panel_but').click( function() {	
			$("#text_holder").children("div:visible").fadeOut('normal', function(){
				//once the fade out is completed, we start to fade in the right div
				var div_len = $('#text_holder div').length;
				var this_index = $(this).index() + 1;
				//alert(div_len + ' : ' + this_index);
				if(this_index == div_len){
					$("#text_holder div:first-child").fadeIn('slow');
				}else{
					$(this).next().fadeIn('slow');
				}
			});
		});
		
		$( "#dialog-modal" ).dialog({
			modal: true,
			autoOpen: false,
			resizable: false,
			buttons: {
				"Send Request": function() { 
					var name = $( '#name' ),
						email = $( '#email' ),
						phone = $( '#phone' ),
						message = $( '#message' ),
						allFields = $( [] ).add( name ).add( email ).add( phone ).add( message );
						
						
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( name, "name", 3, 16 );
					bValid = bValid && checkLength( email, "email", 6, 80 );
					bValid = bValid && checkLength( phone, "phone", 3, 16 );
					bValid = bValid && checkLength( message, "message", 6, 80 );
					
					bValid = bValid && checkRegexp( name, /[^a-zA-Z0-9s|]/, "Name may consist of a-z, 0-9, underscores, begin with a letter." );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
					
					if( bValid ){						
						data = {'name':name.val(),
								'email':email.val(),
								'phone':phone.val(),
								'message':message.val()}
								
						$.post('../../emails/callback_request.php', data, 
							function(callBack){
								if(callBack.name){
									name.addClass( "ui-state-error" );
									updateTips( callBack.name );	
								};
								if(callBack.email){
									email.addClass( "ui-state-error" );
									updateTips( callBack.email );	
								};
								if(callBack.phone){
									phone.addClass( "ui-state-error" );
									updateTips( callBack.phone );	
								};
								if(callBack.message){
									message.addClass( "ui-state-error" );
									updateTips( callBack.message );	
								};
								if(callBack.sending == 'success'){
									alert("Your Callback request has been sent");
									$( "#dialog-modal" ).dialog( "close" );
								}else{
									updateTips( "Message send error: Please email us directly and let us know, Thanks" );
								}
							}, 'json');
						
					}
				}
			}
		});
		$( "#call_back" ).click( function(){
			$( "#dialog-modal" ).dialog ( "open" );
		});
		
		var header_Image = $( ".current_page_item" ).find( "a" ).css( "background-image" ) + ' 60px top no-repeat';
		$( "#sub_page_header" ).css( "background", header_Image );
		
		function updateTips( t ) {
			tips = $( ".validateTips" );
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
		
		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
    });