// ~~ JQuery conflict fix
var tb_pathToImage = "images/loadingAnimation.gif";
(function($) { //* hide the namespace
// ~~ End JQuery conflict fix

//Custom WhiteBox JS Config 
//9 Parts

// jQuery Delay Set
// Pop-up Portfolio Entries
// Dialog Box Styling
// Ajax Contact Form
// LightBox Plugin
// Custom jQUery Image Over Opacity
// jQuery Image Replacement Gallery
// jQuery ToolTip Setup
// jQuery Url preview script

jQuery.fn.delay = function(time,func){
	this.each(function(){
		setTimeout(func,time);
	});
	
	return this;
};



// #port1
$(document).ready(function() {  
                // Tell jQuery that our div is to be a dialog  
                $('#port1').dialog({ autoOpen: false },{ width: 700 },{ height: 430 },{ modal: true }, 
									{ position: ['center'] }, 
									{show: {effect: "drop", duration: 600}}, 
									{hide: {effect: "drop", duration: 400}} );  
  
                $('.boximg img, .box_text1 h5 a').click(function() { 
                    $('#port1').dialog('open');
					return false;
                });  
				
				
				
				$('#port1 img:first').click(function() {		
				//this delay fixes problems with IE6 opening the lightbox		
				$(this).delay(1,function(){	
				$('#port1').dialog('close');
								});
	
				
			});	
				
				
				
            }); 


//port2
$(document).ready(function() {  
                // Tell jQuery that our div is to be a dialog  
                $('#port2').dialog({ autoOpen: false },{ width: 700 },{ height: 430 },{ modal: true }, 
									{ position: ['center'] }, 
									{show: {effect: "drop", duration: 600}}, 
									{hide: {effect: "drop", duration: 400}} );  
  
                $('.boximg2 img, .box_text2 h5 a').click(function() { 
                    $('#port2').dialog('open');
					return false;
                });  
				
				
				$('#port2 img:first').click(function() {		
				//this delay fixes problems with IE6 opening the lightbox		
					$(this).delay(1,function(){	
						$('#port2').dialog('close');
					});	
				});
				
				
            }); 


//port3
$(document).ready(function() {  
                // Tell jQuery that our div is to be a dialog  
                $('#port3').dialog({ autoOpen: false },{ width: 700 },{ height: 430 },{ modal: true }, 
									{ position: ['center'] }, 
									{show: {effect: "drop", duration: 600}}, 
									{hide: {effect: "drop", duration: 400}} );  
  
                $('.boximg3 img, .box_text3 h5 a').click(function() { 
                    $('#port3').dialog('open');
					return false;
                });  
				
				$('#port3 img:first').click(function() {		
				//this delay fixes problems with IE6 opening the lightbox		
				$(this).delay(1,function(){	
				$('#port3').dialog('close');
								});
				
											   });
				
				
            });


//port4
$(document).ready(function() {  
                // Tell jQuery that our div is to be a dialog  
                $('#port4').dialog({ autoOpen: false },{ width: 700 },{ height: 430 },{ modal: true }, 
									{ position: ['center'] }, 
									{show: {effect: "drop", duration: 600}}, 
									{hide: {effect: "drop", duration: 400}} );  
  
                $('.boximg4 img, .box_text4 h5 a').click(function() { 
                    $('#port4').dialog('open');
					return false;
                });  
				
				
				$('#port4 img:first').click(function() {		
				//this delay fixes problems with IE6 opening the lightbox		
				$(this).delay(1,function(){	
				$('#port4').dialog('close');
								});
				
											   });
				
				
            });


//port5
$(document).ready(function() {  
                // Tell jQuery that our div is to be a dialog  
                $('#port5').dialog({ autoOpen: false },{ width: 700 },{ height: 430 },{ modal: true }, 
									{ position: ['center'] }, 
									{show: {effect: "drop", duration: 600}}, 
									{hide: {effect: "drop", duration: 400}} );  
  
                $('.boximg5 img, .box_text5 h5 a').click(function() { 
                    $('#port5').dialog('open');
					return false;
                });  
				
				
				$('#port5 img:first').click(function() {		
				//this delay fixes problems with IE6 opening the lightbox		
				$(this).delay(1,function(){	
				$('#port5').dialog('close');
								});
				
											   });
				
				
				
            });

//port6
$(document).ready(function() {  
                // Tell jQuery that our div is to be a dialog  
                $('#port6').dialog({ autoOpen: false },{ width: 700 },{ height: 430 },{ modal: true }, 
									{ position: ['center'] }, 
									{show: {effect: "drop", duration: 600}}, 
									{hide: {effect: "drop", duration: 400}} );  
  
                $('.boximg6 img, .box_text6 h5 a').click(function() { 
                    $('#port6').dialog('open');
					return false;
                });  
				
				
				$('#port6 img:first').click(function() {		
				//this delay fixes problems with IE6 opening the lightbox		
				$(this).delay(1,function(){	
				$('#port6').dialog('close');
								});
				
											   });
				
				
            });

//port7
$(document).ready(function() {  
                // Tell jQuery that our div is to be a dialog  
                $('#port7').dialog({ autoOpen: false },{ width: 700 },{ height: 430 },{ modal: true }, 
									{ position: ['center'] }, 
									{show: {effect: "drop", duration: 600}}, 
									{hide: {effect: "drop", duration: 400}} );  
  
                $('.boximg7 img, .box_text7 h5 a').click(function() { 
                    $('#port7').dialog('open');
					return false;
                });  
				
				$('#port7 img:first').click(function() {		
				//this delay fixes problems with IE6 opening the lightbox		
				$(this).delay(1,function(){	
				$('#port7').dialog('close');
								});	
				
											   });
				
				
            });

//port8
$(document).ready(function() {  
                // Tell jQuery that our div is to be a dialog  
                $('#port8').dialog({ autoOpen: false },{ width: 700 },{ height: 430 },{ modal: true }, 
									{ position: ['center'] }, 
									{show: {effect: "drop", duration: 600}}, 
									{hide: {effect: "drop", duration: 400}} );  
  
                $('.boximg8 img, .box_text8 h5 a').click(function() { 
                    $('#port8').dialog('open');
					return false;
                });  
				
				
				$('#port8 img:first').click(function() {		
				//this delay fixes problems with IE6 opening the lightbox		
				$(this).delay(1,function(){	
				$('#port8').dialog('close');
								});
				
											   });
				
            });

//contact-popper
$(document).ready(function() {  
$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$("#dialog").dialog("close");
		
		var name = $("#name"),
			email = $("#email"),
			password = $("#password"),
			allFields = $([]).add(name).add(email).add(password),
			tips = $(".validateTips");

		function updateTips(t) {
			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;
			}

		}
		
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 580,
			width: 450,
			modal: true,
			show: 'drop',
			hide: 'drop',
			buttons: {
				'Send': function() {
					var bValid = true;
					
					var _name = document.getElementById("contact_name").value;
					var _email = document.getElementById("contact_email").value;
					var _email = document.getElementById("contact_tel").value;
					var _postcode = document.getElementById("contact_postcode").value;
					var _comment = document.getElementById("contact_comment").value;
					var _comment = document.getElementById("contact_address").value;

					allFields.removeClass('ui-state-error');
					
					//bValid = bValid && checkRegexp(_name,/^[a-z]([0-9a-z_])+$/i,"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) {
						if(window.XMLHttpRequest)
						{ // only works in IE7+, Firefox, Chrome, Opera, Safari
							xmlhttp=new XMLHttpRequest();
						}else
						{
						}

						xmlhttp.onreadystatechange=function(){
							if(xmlhttp.readyState==4 && xmlhttp.status==200)
							{
						
							}else{
							
							}
						}

						var text = document.getElementById('comment');
						
						xmlhttp.open("GET", "contact_us.php?name="+escape(_name)+"&email="+escape(_email)+"&body="+escape(_comment, true)+"&postcode="+escape(_postcode, true)+"&tel="+escape(tel, true)+"&address="+escape(address, true));
						xmlhttp.send();
						
						$(this).dialog('close'), $('#dialog-form5').dialog('open');
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
		
		
	
			
			
		//set dialog boxes, excluding the previous contact form//	
		$("#dialog-form2").dialog({
			autoOpen: false,
			height: 310,
			width: 350,
			modal: true,
			show: 'drop',
			hide: 'drop'
			});
		
		
		$("#dialog-form3").dialog({
			autoOpen: false,
			height: 170,
			width: 450,
			modal: true,
			show: {effect: "drop", duration: 800},
			hide: 'drop'
			});
		
		
		$("#dialog-form4").dialog({
			autoOpen: false,
			height: 432,
			width: 450,
			modal: true,
			show: "drop",
			hide: 'drop'
			
		});
			
			
		
		$("#dialog-form5").dialog({
			autoOpen: false,
			height: 230,
			width: 450,
			modal: true,
			show: "drop",
			hide: 'drop'
			});
		
		
			$("#dialog-form6").dialog({
			autoOpen: false,
			height: 170,
			width: 400,
			modal: true,
			show: "drop",
			hide: 'drop'
			});
			
			$("#dialog-form7").dialog({
			autoOpen: false,
			height: 170,
			width: 400,
			modal: true,
			show: "drop",
			hide: 'drop'
			});
			
			$("#dialog-form8").dialog({
			autoOpen: false,
			height: 170,
			width: 400,
			modal: true,
			show: "drop",
			hide: 'drop'
			});
			
			$("#dialog-form_pop").dialog({
			autoOpen: false,
			height: 510,
			width: 748,
			modal: true,
			show: "drop",
			hide: 'drop'
			});
		
		//dialog button text //
		$( "#dialog-form2" ).dialog({ buttons: { "Login": function() {$(this).dialog("close"), $('#dialog-form3').dialog('open'); } } });
		$( "#dialog-form3" ).dialog({ buttons: { "Ok": function() {$(this).dialog("close")} } });
		$( "#dialog-form5" ).dialog({ buttons: { "Ok": function() {$(this).dialog("close")} } });
		$( "#dialog-form6" ).dialog({ buttons: { "Visit Boxside": function() {$(this).dialog("close")}, "Cancel": function() {$(this).dialog('close'); } } });
		$( "#dialog-form7" ).dialog({ buttons: { "Visit Logical": function() {$(this).dialog("close")}, "Cancel": function() {$(this).dialog('close'); } } });
		$( "#dialog-form8" ).dialog({ buttons: { "Visit Whitewall": function() {$(this).dialog("close")}, "Cancel": function() {$(this).dialog('close'); } } });	
		$( "#dialog-form_pop" ).dialog({ buttons: { "Close": function() {$(this).dialog("close")} } });
			
		
		
		//set activators //
		$('.create button')
			.button()
			.click(function() {
				$('#dialog-form2').dialog('open');
				return false;
			});
		
				
		$('.create2 button')
			.button()
			.click(function() {
			$('#dialog-form').dialog('open');
			return false;
				
		});	
			
			
		$('.flipper a')
			.click(function() {
			$('#dialog-form').dialog('open');
			$('#dialog-form2').dialog('close');	
				
		});	
		
		

		$('.box_clear .contact')
			.click(function() {
				$('#dialog-form').dialog('open');
				return false;
				
			});	
			
			
		$('.port_meta a')
			.click(function() {
				$('#dialog-form6').dialog('open');
				return false;
				
			});	
			
		
		$('.port_meta2 a')
			.click(function() {
							
				$('#dialog-form7').dialog('open');
				return false;
				
			});	
			
		$('.port_meta3 a')
			.click(function() {
				$('#dialog-form8').dialog('open');
				return false;
				
			});	
		
			
			
		$('ul.nav .contact, #footer-nav .contact, .grid_12 .quote')
			.click(function() {
				$('#dialog-form').dialog('open');
				return false;
				
			});		
			
		
		$('.port_metab .pop-out')
			.click(function() {
				$('#dialog-form_pop').dialog('open');
				return false;
				
			});	




	});
	});




//Set Portfolio Image Over Opacity Split Images//
$(document).ready(function(){

			   
	$("img.a").hover(
	function() {
	$(this).stop().animate({"opacity": "0"}, 600);
	},
	function() {
	$(this).stop().animate({"opacity": "1"}, "slow");
	});
 
});

//irg used in the portfolio page
$(document).ready(function(){
$(function() {
		// When a thumbnail is clicked
		$(".gallery .thumbnails a").click(function() {
			// Get enlarged image attributes
			var largeImg = $(".gallery .feature img");	
			var largeImgPath = $(this).attr("href");
			var largeImgTitle = $(this).children("img").attr("alt");
			var largeThumbnail = $(this);
			// Fade out enlarged image
			$(largeImg).fadeOut('slow', function() {	
				// Change the attributes of the enlarged large image
				$(largeImg).attr({ src: largeImgPath, alt: largeImgTitle, title: largeImgTitle }).load(function() {
					// Once image is loaded:
					// Remove class="current" from all thumbnails and add to clicked thumbnail
					$(".gallery .thumbnails").children().removeClass("current");
					$(largeThumbnail).addClass("current");
					// Fade in enlarged image
					$(largeImg).fadeIn('slow');
					
					
					
				});
			});
			return false;
		});
	});

						   });


//irg used in the portfolio page
$(document).ready(function(){
$(function() {
		// When a thumbnail is clicked
		$(".gallery2 .thumbnails2 a").click(function() {
			// Get enlarged image attributes
			var largeImg = $(".gallery2 .feature2 img");	
			var largeImgPath = $(this).attr("href");
			var largeImgTitle = $(this).children("img").attr("alt");
			var largeThumbnail = $(this);
			// Fade out enlarged image
			$(largeImg).fadeOut('slow', function() {	
				// Change the attributes of the enlarged large image
				$(largeImg).attr({ src: largeImgPath, alt: largeImgTitle, title: largeImgTitle }).load(function() {
					// Once image is loaded:
					// Remove class="current" from all thumbnails and add to clicked thumbnail
					$(".gallery2 .thumbnails2").children().removeClass("current");
					$(largeThumbnail).addClass("current");
					// Fade in enlarged image
					$(largeImg).fadeIn('slow');
					
					
					
				});
			});
			return false;
		});
	});

						   });

//irg used in the portfolio page
$(document).ready(function(){
$(function() {
		// When a thumbnail is clicked
		$(".gallery3 .thumbnails3 a").click(function() {
			// Get enlarged image attributes
			var largeImg = $(".gallery3 .feature3 img");	
			var largeImgPath = $(this).attr("href");
			var largeImgTitle = $(this).children("img").attr("alt");
			var largeThumbnail = $(this);
			// Fade out enlarged image
			$(largeImg).fadeOut('slow', function() {	
				// Change the attributes of the enlarged large image
				$(largeImg).attr({ src: largeImgPath, alt: largeImgTitle, title: largeImgTitle }).load(function() {
					// Once image is loaded:
					// Remove class="current" from all thumbnails and add to clicked thumbnail
					$(".gallery3 .thumbnails3").children().removeClass("current");
					$(largeThumbnail).addClass("current");
					// Fade in enlarged image
					$(largeImg).fadeIn('slow');
					
					
					
				});
			});
			return false;
		});
	});

						   });



/*
 * Url preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.screenshotPreview = function(){	
	/* CONFIG */
		
		xOffset = -20;
		yOffset = -110;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.screenshot").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");								 
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#screenshot").remove();
    });	
	$("a.screenshot").mousemove(function(e){
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	screenshotPreview();
});


 $(document).ready(function() {
        $('.lightbox').lightBox();
    });
 
 
 
 
 
 /*
 * Tooltip script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 


this.tooltip = function(){	
	/* CONFIG */		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - 10) + "px")
			.css("left",(e.pageX + 20) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - 10) + "px")
			.css("left",(e.pageX + 20) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	tooltip();
});

// ~~ JQuery conflict fix
})(jQuery); //* hide the namespace
// ~~ End JQuery conflict fix