	$(function() {
		$("#tabs").tabs({
			event: 'click'
		});
	})
	
$(function() {

	$('.infoImg').hover(function(e) {
		var html = '<div id="widthDetails">';
		html +=    '<h4>How to measure your door</h4>';
		html +=	   '<img src="images/Tape.jpg" alt="image" />';
		html +=	   '<p>Measure your aperture width in 3 separate places and then deduct 10mm (20mm on Low Threshold Doors) off your smallest size. This will be your order size.</p>';
		html +=		'</div>';
						
		$('body').append(html).children('#widthDetails').hide().fadeIn(400);
		$('#widthDetails').css('top', e.pageY + -110).css('left', e.pageX + 20);
			
	}, function() {
		$('#widthDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#widthDetails').css('top', e.pageY + -110).css('left', e.pageX + 20);
	});
});



$(function() {

	$('.infoImgH').hover(function(e) {
		var html = '<div id="heightDetails">';
		html +=    '<h4>How to measure your door height</h4>';
		html +=	   '<p>The height is determined by which threshold option you decide to choose. You can either have a top running or low threshold track. With either option you will need to consider where the threshold will finish in relation to your finish floor level, which includes your final floor covering e.g. laminated floor, carpet tiles etc.</p>';
		html +=		'</div>';						
		$('body').append(html).children('#heightDetails').hide().fadeIn(400);
		$('#heightDetails').css('top', e.pageY + -125).css('left', e.pageX + 20);
			
	}, function() {
		$('#heightDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#heightDetails').css('top', e.pageY + -125).css('left', e.pageX + 20);
	});
});



$(function() {

	$('.infoImgDD').hover(function(e) {
		var html = '<div id="schemeDetails">';
		html +=    '<h4>Select a scheme</h4>';
		html +=	   '<img src="images/330-scheme.jpg" alt="image" /><h5>Scheme 330</h5><p>All 3 doors slide from right to left viewed from the outside.The first opening door acts as an independent traffic door, without having to slide the other two doors.</p> ' ;
		html +=	   '<br/>';
		html +=	   '<img src="images/303-scheme.jpg" alt="image" /><h5>Scheme 303</h5><p>All 3 doors slide from left to right viewed from the outside.The first opening door acts as an independent traffic door, without having to slide the other two doors.</p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/321-scheme.jpg" alt="image" /><h5>Scheme 321</h5><p>2 doors slide from right to left viewed from the outside, with a fixed door to the right.The first opening door acts as an independent traffic door, without having to slide the other two doors.</p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/312-scheme.jpg" alt="image" /><h5>Scheme 312</h5><p>2 doors slide from left to right viewed from the outside, with a fixed door to the left.The first opening door acts as an independent traffic door, without having to slide the other two doors.  </p>';	
		html +=	   '<br/>';	
		html +=	   '<p> </p>';
		html +=		'</div>';						
		$('body').append(html).children('#schemeDetails').hide().fadeIn(400);
		$('#schemeDetails').css('top', e.pageY + -350).css('left', e.pageX + 20);
			
	}, function() {
		$('#schemeDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#schemeDetails').css('top', e.pageY + -350).css('left', e.pageX + 20);
	});
});


$(function() {

	$('.infoImgDD220').hover(function(e) {
		var html = '<div id="schemeDetails220">';
		html +=    '<h4>Select a scheme</h4>';
		html +=	   '<img src="images/220-scheme.jpg" alt="image" /><h5>Scheme 220</h5><p>Two doors slide from right to left viewed from the outside. The two opening doors open together to allow outside access. There is no single traffic door.</p> ' ;
		html +=	   '<br/>';
		html +=	   '<img src="images/202-scheme.jpg" alt="image" /><h5>Scheme 202</h5><p>Two doors slide from left to right viewed from the outside. The two opening doors open together to allow outside access. There is no single traffic doo</p>';
		html +=	   '<br/>';

		html +=	   '<p> </p>';
		html +=		'</div>';						
		$('body').append(html).children('#schemeDetails220').hide().fadeIn(400);
		$('#schemeDetails220').css('top', e.pageY + -200).css('left', e.pageX + 20);
			
	}, function() {
		$('#schemeDetails220').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#schemeDetails220').css('top', e.pageY + -200).css('left', e.pageX + 20);
	});
});

$(function() {

	$('.infoImgDD440').hover(function(e) {
		var html = '<div id="schemeDetails">';
		html +=    '<h4>Select a scheme</h4>';
		html +=	   '<img src="images/440-scheme.jpg" alt="image" /><h5>Scheme 440</h5><p>All 4 doors slide from right to left viewed from the outside.The first two opening doors open together to allow outside access. There is no single traffic door.</p> ' ;
		html +=	   '<br/>';
		html +=	   '<img src="images/404-scheme.jpg" alt="image" /><h5>Scheme 404</h5><p>All 4 doors slide from left to right viewed from the outside.The first two opening doors open together to allow outside access. There is no single traffic door.</p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/431-scheme.jpg" alt="image" /><h5>Scheme 431</h5><p>Three doors slide from right to left viewed from the outside, with a fixed door to the right. The fixed door acts,as the traffic door</p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/413-scheme.jpg" alt="image" /><h5>Scheme 413</h5><p>Three doors slide from left to right viewed from the outside, with a fixed door to the left. The fixed door acts,as the traffic door. </p>';	
		html +=	   '<br/>';	
		html +=	   '<p> </p>';
		html +=		'</div>';						
		$('body').append(html).children('#schemeDetails').hide().fadeIn(400);
		$('#schemeDetails').css('top', e.pageY + -200).css('left', e.pageX + 20);
			
	}, function() {
		$('#schemeDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#schemeDetails').css('top', e.pageY + -200).css('left', e.pageX + 20);
	});
});

$(function() {

	$('.infoImgDD550').hover(function(e) {
		var html = '<div id="schemeDetails550">';
		html +=    '<h4>Select a scheme</h4>';
		html +=	   '<img src="images/550-scheme.jpg" alt="image" /><h5>Scheme 550</h5><p>All 5 doors slide from right to left viewed from the outside. The first opening door acts as an independent traffic door, without having to slide the other four doors.</p> ' ;
		html +=	   '<br/>';
		html +=	   '<img src="images/505-scheme.jpg" alt="image" /><h5>Scheme 505</h5><p>All 5 doors slide from left to right viewed from the outside. The first opening door acts as an independent traffic door, without having to slide the other four doors. </p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/532-scheme.jpg" alt="image" /><h5>Scheme 532</h5><p>Three doors slide from right to left viewed from the outside, with 2 opposing  doors sliding to the right. The the traffic door is in the centre.</p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/523-scheme.jpg" alt="image" /><h5>Scheme 523</h5><p>Two doors slide from right to left viewed from the outside, with 3 opposing  doors sliding to the right. The traffic door is in the centre.</p>';	
		html +=	   '<br/>';	
			html +=	   '<img src="images/541-scheme.jpg" alt="image" /><h5>Scheme 541</h5><p>Four doors slide from right to left viewed from the outside, with a  fixed door to the right. </p>';	
		html +=	   '<br/>';
			html +=	   '<img src="images/514-scheme.jpg" alt="image" /><h5>Scheme 514</h5><p>Four doors slide from left to right viewed from the outside, with a  fixed door to the left. </p>';	
		html +=	   '<br/>';
		html +=	   '<p> </p>';
		html +=		'</div>';						
		$('body').append(html).children('#schemeDetails550').hide().fadeIn(400);
		$('#schemeDetails550').css('top', e.pageY + -450).css('left', e.pageX + 20);
			
	}, function() {
		$('#schemeDetails550').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#schemeDetails550').css('top', e.pageY + -450).css('left', e.pageX + 20);
	});
});

$(function() {

	$('.infoImgDD660').hover(function(e) {
		var html = '<div id="schemeDetails550">';
		html +=    '<h4>Select a scheme</h4>';
		html +=	   '<img src="images/633-scheme.jpg" alt="image" /><h5>Scheme 633</h5><p>Two sets of three doors sliding in opposite directions. The two central doors act as a french door set.</p> ' ;
		html +=	   '<br/>';
		html +=	   '<img src="images/651-scheme.jpg" alt="image" /><h5>Scheme 651</h5><p>Five doors slide from right to left viewed from the outside with a fixed door to the right. The fixed door acts as the traffic door.</p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/615-scheme.jpg" alt="image" /><h5>Scheme 615</h5><p>Five doors slide from left to right viewed from the outside with a fixed door to the left. The  fixed door acts as the traffic door. </p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/660-scheme.jpg" alt="image" /><h5>Scheme 660</h5><p>All six doors slide from right to left viewed from the outside. The first two opening doors open together to allow outside access. There is no single traffic door. </p>';	
		html +=	   '<br/>';	
			html +=	   '<img src="images/606-scheme.jpg" alt="image" /><h5>Scheme 606</h5><p>All six doors slide from left to right viewed from the outside. The first two opening doors open together to allow outside access. There is no single traffic door.</p>';	
		html +=	   '<br/>';
		html +=	   '<p> </p>';
		html +=		'</div>';						
		$('body').append(html).children('#schemeDetails550').hide().fadeIn(400);
		$('#schemeDetails550').css('top', e.pageY + -425).css('left', e.pageX + 20);
			
	}, function() {
		$('#schemeDetails550').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#schemeDetails550').css('top', e.pageY + -425).css('left', e.pageX + 20);
	});
});

$(function() {

	$('.infoImgDD770').hover(function(e) {
		var html = '<div id="schemeDetails550">';
		html +=    '<h4>Select a scheme</h4>';
		html +=	   '<img src="images/743-scheme.jpg" alt="image" /><h5>Scheme 743</h5><p>Four doors slide from right to left and three doors slide from left to right viewed from the outside. The  third door from the right as viewed from the outside acts as the traffic door.</p> ' ;
		html +=	   '<br/>';
		html +=	   '<img src="images/734-scheme.jpg" alt="image" /><h5>Scheme 734</h5><p>Three doors slide from right to left and four doors slide from left to right viewed from the outside. The  third door from the left as viewed from the outside acts as the traffic door.</p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/761-scheme.jpg" alt="image" /><h5>Scheme 761</h5><p>Six doors slide from right to left viewed from the outside with a fixed door to the right. The  fixed door acts as the traffic door.</p>';
		html +=	   '<br/>';
		html +=	   '<img src="images/716-scheme.jpg" alt="image" /><h5>Scheme 716</h5><p>Six doors slide from left to right viewed from the outside with a fixed door to the left. The  fixed door acts as the traffic door.</p>';	
		html +=	   '<br/>';	
			html +=	   '<img src="images/770-scheme.jpg" alt="image" /><h5>Scheme 770</h5><p>All seven doors slide from right to left viewed from the outside. The first opening door acts as an independent traffic door, without having to open the other six doors.</p>';	
		html +=	   '<br/>';
		html +=	   '<img src="images/707-scheme.jpg" alt="image" /><h5>Scheme 707</h5><p>All seven doors slide from left to right viewed from the outside. The first opening door acts as an independent traffic door, without having to open the other six doors.</p>';	
		html +=	   '<br/>';
		html +=	   '<p> </p>';
		html +=		'</div>';						
		$('body').append(html).children('#schemeDetails550').hide().fadeIn(400);
		$('#schemeDetails550').css('top', e.pageY + -525).css('left', e.pageX + 20);
			
	}, function() {
		$('#schemeDetails550').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#schemeDetails550').css('top', e.pageY + -525).css('left', e.pageX + 20);
	});
});




$(function() {

	$('.infoImgDDS220').hover(function(e) {
		var html = '<div id="sizeDetails">';
		html +=    '<h4>Select the correct size range</h4>';
		html +=	   '<p>To arrive at the correct price you must select the correct size range e.g. door width = 1565mm , the size range = 1401mm to 1600mm.</p>';
		html +=		'</div>';						
		$('body').append(html).children('#sizeDetails').hide().fadeIn(400);
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
			
	}, function() {
		$('#sizeDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
	});
});
$(function() {

	$('.infoImgDDS330').hover(function(e) {
		var html = '<div id="sizeDetails">';
		html +=    '<h4>Select the correct size range</h4>';
		html +=	   '<p>To arrive at the correct price you must select the correct size range e.g. door width = 2435mm , the size range = 2351mm to 2500mm.</p>';
		html +=		'</div>';						
		$('body').append(html).children('#sizeDetails').hide().fadeIn(400);
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
			
	}, function() {
		$('#sizeDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
	});
});
$(function() {

	$('.infoImgDDS440').hover(function(e) {
		var html = '<div id="sizeDetails">';
		html +=    '<h4>Select the correct size range</h4>';
		html +=	   '<p>To arrive at the correct price you must select the correct size range e.g. door width = 3250mm , the size range = 3201mm to 3350mm.</p>';
		html +=		'</div>';						
		$('body').append(html).children('#sizeDetails').hide().fadeIn(400);
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
			
	}, function() {
		$('#sizeDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
	});
});

$(function() {

	$('.infoImgDDS550').hover(function(e) {
		var html = '<div id="sizeDetails">';
		html +=    '<h4>Select the correct size range</h4>';
		html +=	   '<p>To arrive at the correct price you must select the correct size range e.g. door width = 3725mm , the size range = 3651mm to 3800mm.</p>';
		html +=		'</div>';						
		$('body').append(html).children('#sizeDetails').hide().fadeIn(400);
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
			
	}, function() {
		$('#sizeDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
	});
});
$(function() {

	$('.infoImgDDS660').hover(function(e) {
		var html = '<div id="sizeDetails">';
		html +=    '<h4>Select the correct size range</h4>';
		html +=	   '<p>To arrive at the correct price you must select the correct size range e.g. door width = 4575mm , the size range = 4501mm to 4650mm.</p>';
		html +=		'</div>';						
		$('body').append(html).children('#sizeDetails').hide().fadeIn(400);
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
			
	}, function() {
		$('#sizeDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
	});
});
$(function() {

	$('.infoImgDDS770').hover(function(e) {
		var html = '<div id="sizeDetails">';
		html +=    '<h4>Select the correct size range</h4>';
		html +=	   '<p>To arrive at the correct price you must select the correct size range e.g. door width = 5785mm , the size range = 5701mm to 5850mm.</p>';
		html +=		'</div>';						
		$('body').append(html).children('#sizeDetails').hide().fadeIn(400);
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
			
	}, function() {
		$('#sizeDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#sizeDetails').css('top', e.pageY + -50).css('left', e.pageX + 20);
	});
});
$(function() {

	$('.infoImgDDC').hover(function(e) {
		var html = '<div id="colourDetails">';
		html +=    '<h4>Colour options</h4>';
		html +=	   '<img src="images/upvc-white-Circle-Swatch.png" alt="white pvc folding door colour" /><h5>White</h5>' ;
	    html +=	   '<br/>';
		html +=	   '<img src="images/upvc-oak-Circle-Swatch.png" alt="oak pvc folding door colour /><h5>Oak</h5>';
		html +=	   '<br/>';
		html +=	   '<img src="images/upvc-rosewood-Circle-Swatch.png" alt="rosewood pvc folding door colour" /><h5>Rosewood</h5>';	
		html +=	   '<br/>';	
		html +=	   '<img src="images/upvc-oak-on-white-circle-swatch.png" alt="oak on white pvc folding door colour" /><h5>Oak On White</h5>';	
		html +=	   '<br/>';	
		html +=	   '<img src="images/upvc-rosewood-on-white-circle-swatch.png" alt="rosewood on white pvc folding door colour" /><h5>Rosewood On White</h5>';	
		html +=	   '<br/>';	
		html +=	   '<img src="images/upvc-light-grey-Circle-Swatch.png" alt="grey upvc folding door colour" /><h5>Grey</h5>';	
		html +=	   '<br/>';	
		html +=	   '<img src="images/upvc-black-Circle-Swatch.png" alt="black pvc folding door colour" /><h5>Black</h5>';	
		html +=	   '<br/>';	
		html +=	   '<img src="images/upvc-anthracite-grey-Circle-Swatch.png" alt="grey on white pvc folding door colour" /><h5>Grey on White</h5>';	
		html +=	   '<br/>';	
		html +=	   '<img src="images/upvc-8518-black-white-Circle-Swatch.png" alt="black on white pvc folding door colour" /><h5>Black on White</h5>';	
		html +=	   '<br/>';	
		html +=	   '<p> </p>';
		html +=		'</div>';						
		$('body').append(html).children('#colourDetails').hide().fadeIn(400);
		$('#colourDetails').css('top', e.pageY + -350).css('left', e.pageX + 20);
			
	}, function() {
		$('#colourDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#colourDetails').css('top', e.pageY + -350).css('left', e.pageX + 20);
	});
});



$(function() {

	$('.infoImgDDCill').hover(function(e) {
		var html = '<div id="cillDetails">';
		html +=    '<h4>Choose a cill</h4>';
		html +=	   '<p>The industry standard is 150mm. A stub cill may be required if you have a small reveal or are sitting your door forward in the reveal and want to minimize the projection of the cill.You may choose an 180mm cill if the door is sitting back in the reveal and you need to bridge the brickwork at the base of the door.<p/>';
		html +=	   '<img src="images/cills.jpg" alt="cills" />' ;
		html +=		'</div>';						
		$('body').append(html).children('#cillDetails').hide().fadeIn(400);
		$('#cillDetails').css('top', e.pageY + -350).css('left', e.pageX + 20);
			
	}, function() {
		$('#cillDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#cillDetails').css('top', e.pageY + -350).css('left', e.pageX + 20);
	});
});


$(function() {

	$('.infoImgDDCillTect').hover(function(e) {
		var html = '<div id="cillDetails">';
		html +=    '<h4>TecTURA aluminium cills</h4>';
		html +=	   '<p>The industry standard is 150mm. A stub cill may be required if you have a small reveal or are sitting your door forward in the reveal and want to minimize the projection of the cill.You may choose an 180mm cill if the door is sitting back in the reveal and you need to bridge the brickwork at the base of the door.<p/>';
		html +=	   '<img src="images/tecTURA-aluminium-folding-door-cills.jpg" alt="cills" />' ;
		html +=		'</div>';						
		$('body').append(html).children('#cillDetails').hide().fadeIn(400);
		$('#cillDetails').css('top', e.pageY + -350).css('left', e.pageX + 20);
			
	}, function() {
		$('#cillDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#cillDetails').css('top', e.pageY + -350).css('left', e.pageX + 20);
	});
});


$(function() {

	$('.infoImgDDVent').hover(function(e) {
		var html = '<div id="ventDetails">';
		html +=    '<h4>Do you need a trickle vent</h4>';
		html +=	   '<img src="images/vent.jpg" alt="image" />';
		html +=    '<h5>Is your bi-fold door for an extension</h5>';		
		html +=	   '<p>All our doors are made to such a high specification, they automatically conform to the current building (PART L) regulations. The only other consideration is if trickle ventilation is required. All habitable rooms require 5000mm sq of equivalent air If you have no other means of venting your room ( i.e a brick vent, mechanical ventilation or another door or window with a trickle vent fitted) then a trickle vent will need to be fitted to your bi-fold door. If a trickle vent is required it will befitted to thetop of the first and last door sash. <p/>';
		html +=    '<h5>Is your bi-fold a replacement door</h5>';
		html +=	   '<p>If you are replacing an existing door and not changing the structural width of your opening then building regulations do not apply. If the door you are replacing has trickle ventilation already fitted, then it is a requirement that a trickle vent is fitted to the bi-fold door. You may choose to have a vent fitted regardless of if being a requirement, to aid background ventilation. <p/>';
		
		html +=		'</div>';						
		$('body').append(html).children('#ventDetails').hide().fadeIn(400);
		$('#ventDetails').css('top', e.pageY + -375).css('left', e.pageX + 20);
			
	}, function() {
		$('#ventDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#ventDetails').css('top', e.pageY + -375).css('left', e.pageX + 20);
	});
});



$(function() {

	$('.infoImgDDGlass').hover(function(e) {
		var html = '<div id="glassDetails">';
		html +=    '<h4>Glass Options</h4>';
		html +=	   '<p>The glass in our doors is 28mm  toughened, argon filled , conforming  to building regulations. This is as standard a high specification. However you can configure the choice of Low "E" coating (2), Spacer Bar (3) and internal glass type (4).  The lower the "U" Value the higher the specification combined with  lower energy costs and comfort.<p/>';
		html +=	   '<img src="images/glassspecboxes.png" alt="glss specification for folding sliding doors"/> ';	
		html +=    '<br/>';
		html +=		'</div>';						
		$('body').append(html).children('#glassDetails').hide().fadeIn(400);
		$('#glassDetails').css('top', e.pageY + -205).css('left', e.pageX + 20);
			
	}, function() {
		$('#glassDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#glassDetails').css('top', e.pageY + -205).css('left', e.pageX + 20);
	});
});



$(function() {

	$('.infoImgDDBlinds').hover(function(e) {
		var html = '<div id="blindsDetails">';
		html +=    '<h4>Integral Blinds</h4>';
		html +=	   '<p>Our blinds are the industry leading ScreenLine design, direct from Pellini in Italy. Available in ten colours, they are simple, quick and easy to use.Controlled by a manual cord. As the blinds are made in Italy,there is a 4-6 week lead time, however the doors are delivered without glass, within our standard delivery time, to allow you to continue with your project. As soon the glass is available it will be delivered at no extra cost. <p/>';
		html +=	   '<img src="images/blinds.png" alt="image"/> ';	
		html +=    '<br/>';
		html +=		'</div>';						
		$('body').append(html).children('#blindsDetails').hide().fadeIn(400);
		$('#blindsDetails').css('top', e.pageY + -380).css('left', e.pageX + 20);
			
	}, function() {
		$('#blindsDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#blindsDetails').css('top', e.pageY + -380).css('left', e.pageX + 20);
	});
});



$(function() {

	$('.infoImgDDKit').hover(function(e) {
		var html = '<div id="kitDetails">';
		html +=    '<h4>Fixing Kit</h4>';
		html +=	   '<p>We highly reccomend using our own fixing kits, when installing our Slide and Fold doors. It includes the exact same fixings,drill bits, and sealants that are used on our installations. They have been selected for quality, performance and match exactly the requirement on our installation instructions.<p/>';
		html +=	   '<img src="images/kit.png" alt="image"/> ';	
		html +=    '<br/>';
		html +=    '<h5>INCLUDES:</h5>';
		html +=    '<ul><li>2 x Jobber Size x 6.5mm HSS Drill Bits.</li><li>2 x 148mm x 6.5mm HSS Drill Bits.</li> <li>1 x 6.5mm x 150mm Masonary Drill Bit.</li><li>10 x 7.5mm x150mm  Screws </li><li>20 x 100mm High Specification Screws.</li><li>20 x 120mm High Specification Screws. </li><li>1 x Torx Driver Bit. </li><li>1 x Tube of Dow Corning Silicone.</li><li>1 x  700ml Construction Foam.</li></ul>';
		html +=		'</div>';						
		$('body').append(html).children('#kitDetails').hide().fadeIn(400);
		$('#kitDetails').css('top', e.pageY + -375).css('left', e.pageX + 20);
			
	}, function() {
		$('#kitDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#kitDetails').css('top', e.pageY + -375).css('left', e.pageX + 20);
	});
});



$(function() {

	$('.infoImgDDins').hover(function(e) {
		var html = '<div id="insDetails">';
		html +=    '<h4>Installation</h4>';
		html +=    '<h5>Installation service:</h5>';
		html +=	   '<p>Although our doors are extremely easy to fit we also offer a full installation service, for full peace of mind. The additional cost on a 3 Pane door is £600, to be paid on the morning of installation. A full survey is included. The warranty is one year on labour, plus a standard 5 year parts warranty.  Due to the demand for this service, delivery and installation is 4-6 weeks from date of order. A Fensa certificate is issued on completion<p/>';	
		html +=    '<br/>';
		html +=    '<h5>What we need from you:</h5>';
		html +=    '<p>Before ordering a door with an installation service, you must first be advised that we will undertake your order, by a slideandfold.co.uk representative. You will be given a reference number to validate your order.You will need to e-mail digital pictures of the front and side access of your property. Plus images of the outside and inside view of where your door is to be installed.We do not install where no lintel is fitted. Please note if you advise a lintel is fitted and on survey this is shown not to be the case, you will be required to have a lintel installed by another contractor or you may cancel the order. You will be liable to a £100 charge to cover costs incurred.We do not install above the ground floor.We do not knock out brickwork. You will be bound by all terms and conditions found at <a>www.shop.slideandfold.co.uk. </a><p/>';
		html +=		'</div>';						
		$('body').append(html).children('#insDetails').hide().fadeIn(400);
		$('#insDetails').css('top', e.pageY + -415).css('left', e.pageX + 20);
			
	}, function() {
		$('#insDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#insDetails').css('top', e.pageY + -415).css('left', e.pageX + 20);
	});
});



$(function() {

	$('.infoImgDDTh').hover(function(e) {
		var html = '<div id="thresholdDetails">';
		html +=    '<h4>Threshold Details</h4>';
		html +=	   '<p>You can either have a top running or low threshold track. With either option you will need to consider where the threshold will finish in relation to your finish floor level, which includes your final floor covering e.g. laminated floor, carpet tiles etc. For a full explanation of available thresholds, go to <a>technical.</a><p/>';
		html +=	   '<img src="images/threshold.png" alt="folding door thresholds"/> ';	
		html +=    '<br/>';
		html +=		'</div>';						
		$('body').append(html).children('#thresholdDetails').hide().fadeIn(400);
		$('#thresholdDetails').css('top', e.pageY + -205).css('left', e.pageX + 20);
			
	}, function() {
		$('#thresholdDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#thresholdDetails').css('top', e.pageY + -205).css('left', e.pageX + 20);
	});
});


$(function() {

	$('.infoImgDDThTect').hover(function(e) {
		var html = '<div id="thresholdDetails">';
		html +=    '<h4>TecTURA Threshold Details</h4>';
		html +=	   '<p>You can either have a standard rebated  or low threshold track. With either option you will need to consider where the threshold will finish in relation to your finish floor level, which includes your final floor covering e.g. laminated floor, carpet tiles etc. For a full explanation of available thresholds, go to <a>technical.</a><p/>';
		html +=	   '<img src="images/tecTURA-threshold.jpg" alt="folding door thresholds"/> ';	
		html +=    '<br/>';
		html +=		'</div>';						
		$('body').append(html).children('#thresholdDetails').hide().fadeIn(400);
		$('#thresholdDetails').css('top', e.pageY + -205).css('left', e.pageX + 20);
			
	}, function() {
		$('#thresholdDetails').remove();
	});
	
	$('a').mousemove(function(e) {
		$('#thresholdDetails').css('top', e.pageY + -205).css('left', e.pageX + 20);
	});
});
 	$(document).ready(function(){
		$(function() {
			var options =
			{
				zoomWidth: 450,
				zoomHeight: 450,
				xOffset:30,
				yOffset :-125,
				showEffect: 'fadein',
                hideEffect: 'fadeout',
				fadeinSpeed: 'slow',
				title:false,
				fadeoutSpeed: 'slow',
                preloadImages :true,
                showPreload: true,
                preloadText : 'Loading zoom',
				preloadPosition : 'center'
			
				
			}
			$(".jqzoom").jqzoom(options);


			var options2 =
			{
					zoomWidth: 450,
				zoomHeight: 450,
				xOffset:30,
				yOffset :-125,
				showEffect: 'fadein',
                hideEffect: 'fadeout',
				fadeinSpeed: 'slow',
				title:false,
				fadeoutSpeed: 'slow',
                preloadImages :true,
                showPreload: true,
                preloadText : 'Loading zoom',
				preloadPosition : 'center'
			}

			$(".jqzoom2").jqzoom(options2);   //da sistemare top/bottom


			var options3 =
			{
				zoomWidth: 200,
				zoomHeight: 200,
				xOffset: 20,
				title: false,
				lens:false

			}

			$(".jqzoom3").jqzoom(options3);   //da sistemare top/bottom


			var options4 =
			{

				zoomWidth: 300,
				zoomHeight: 200,
				position : 'right',
				yOffset :-100,
				xOffset :100,
				title :false


			}
			$(".jqzoom4").jqzoom(options4);  //da sistemare errore nella eliminazione zoom window


			var options5 =
			{
				zoomWidth: 250,
				zoomHeight: 250,
				showEffect:'show',
				hideEffect:'fadeout',
				fadeoutSpeed: 'slow',
				title :false
			}
			$(".jqzoom5").jqzoom(options5);


			var options6 =
			{
				zoomWidth: 250,
				zoomHeight: 250
			}
			$(".jqzoom6").jqzoom(options6);   //da sistemare top/bottom


		});

 	$('.expand').click(function(){
	 	var href= jQuery(this).attr('href');
	 	var elclass = href.match('#([a-zA-Z]+)([0-9]+)');

	 	if(elclass[1] == 'html')
	 	{
	 		jQuery('.html'+elclass[2]+'div').show();
	 		jQuery('.js'+elclass[2]+'div').hide();
	 	}else
	 	{
	 		jQuery('.html'+elclass[2]+'div').hide();
	 		jQuery('.js'+elclass[2]+'div').show();
	 	}
	 	jQuery(this).addClass('alert').siblings('a').removeClass('alert');
		return false;
 	});

 	});




function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

/*accordian*/
	$(function() {
		$("#accordion").accordion({
			autoHeight: false,
			navigation: true
		});
			$("#accordion2").accordion({
			autoHeight: false,
			navigation: true
		});
	});
	
/*tabs*/

$(function(){

$('#tabs').tabs();
$('#tabs2').tabs();
$('#tabs3').tabs();
$('#tabs4').tabs();
$('#tabs5').tabs();

});

/*nivo slider*/

$(window).load(function() {
    $('#slider').nivoSlider({
	pauseTime:16000, // How long each slide will show	
	});
});



/*picture roll*/

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}









/*srystock*/

/*var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "integer", {validateOn:["blur"], minValue:1200, maxValue:2450});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "integer", {minValue:1600, maxValue:2750, validateOn:["blur"]});*/
$(function() {
	
var spryselect1;
var spryselect2;
var spryselect3;
var spryselect4;
var spryselect5;
var spryselect6;
var spryselect7;
var spryselect8;
var spryselect9;
var spryselect10;
var spryselect11;
var spryselect12;
var spryselect13;
var sprytextfield1;
var sprytextfield2;
var sprytextfield3;
var sprytextfield4;
var sprytextfield5;
var sprytextfield6;
var sprytextfield7;
var sprytextfield8;
var sprytextfield9;
var sprytextfield10;
var sprytextfield11;
var sprytextfield12;
var sprytextfield13;
var sprytextfield14;
var sprytextfield15;
var sprytextfield16;
var sprytextfield17;

Spry.Utils.addLoadListener(function() {

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "integer", {validateOn:["blur", "change"], minValue:1600, maxValue:2750});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "integer", {validateOn:["blur", "change"], minValue:1200, maxValue:2450});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "integer", {validateOn:["blur", "change"], minValue:2400, maxValue:3650});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "integer", {validateOn:["blur", "change"], minValue:3050, maxValue:4500});
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "integer", {validateOn:["blur", "change"], minValue:3600, maxValue:5400});
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "integer", {validateOn:["blur", "change"], minValue:4800, maxValue:5950});
var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7", "integer", {validateOn:["blur", "change"], minValue:1200, maxValue:1900});
var sprytextfield8 = new Spry.Widget.ValidationTextField("sprytextfield8", "integer", {validateOn:["blur", "change"], minValue:900, maxValue:2250});
var sprytextfield9 = new Spry.Widget.ValidationTextField("sprytextfield9", "integer", {validateOn:["blur", "change"], minValue:300, maxValue:2000});
var sprytextfield10 = new Spry.Widget.ValidationTextField("sprytextfield10", "integer", {validateOn:["blur", "change"], minValue:300, maxValue:2000});
var sprytextfield11 = new Spry.Widget.ValidationTextField("sprytextfield11", "integer", {validateOn:["blur", "change"], minValue:1600, maxValue:3100});
var sprytextfield12 = new Spry.Widget.ValidationTextField("sprytextfield12", "integer", {validateOn:["blur", "change"], minValue:3000, maxValue:4125});
var sprytextfield13 = new Spry.Widget.ValidationTextField("sprytextfield13", "integer", {validateOn:["blur", "change"], minValue:3700, maxValue:5120});
var sprytextfield14 = new Spry.Widget.ValidationTextField("sprytextfield14", "integer", {validateOn:["blur", "change"], minValue:4400, maxValue:6150});
var sprytextfield15 = new Spry.Widget.ValidationTextField("sprytextfield15", "integer", {validateOn:["blur", "change"], minValue:1550, maxValue:2140});
var sprytextfield16 = new Spry.Widget.ValidationTextField("sprytextfield16", "integer", {validateOn:["blur", "change"], minValue:1200, maxValue:2500});
var sprytextfield17 = new Spry.Widget.ValidationTextField("sprytextfield17", "integer", {validateOn:["blur", "change"], minValue:3500, maxValue:5120});
spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {validateOn:["change", "blur"]});
spryselect2 = new Spry.Widget.ValidationSelect("spryselect2", {validateOn:["change", "blur"]});
spryselect3 = new Spry.Widget.ValidationSelect("spryselect3", {validateOn:["blur", "change"]});
spryselect4 = new Spry.Widget.ValidationSelect("spryselect4", {validateOn:["change", "blur"]});
spryselect5 = new Spry.Widget.ValidationSelect("spryselect5", {validateOn:["change", "blur"]});
spryselect6 = new Spry.Widget.ValidationSelect("spryselect6", {validateOn:["change", "blur"]});
spryselect7 = new Spry.Widget.ValidationSelect("spryselect7", {validateOn:["change", "blur"]});
spryselect8 = new Spry.Widget.ValidationSelect("spryselect8", {validateOn:["change", "blur"]});
spryselect9 = new Spry.Widget.ValidationSelect("spryselect9", {validateOn:["change", "blur"]});
spryselect10 = new Spry.Widget.ValidationSelect("spryselect10", {validateOn:["change", "blur"]});
spryselect11 = new Spry.Widget.ValidationSelect("spryselect11", {validateOn:["change", "blur"]});
spryselect12 = new Spry.Widget.ValidationSelect("spryselect12", {validateOn:["change", "blur"]});
});

});

/*popUpBrowser*/

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

   
 $.fn.popOut = function(user_opts) {
    return this.each(function() {
         
        var opts = $.extend({
            useId : "poppedOut",
            padding : 20,
            border : 0,
            speed : 400,
            easing : "easeOutBack"
        },user_opts);
         
         
        $(this).mouseover(function() {
            if( view == "thumb" ) {
                // kill any instace of this already
                $("#"+opts.useId).remove();
                 
                // make a copy of the hovered guy
                var $div = $(this).clone();
                 
                // setup some prelim stuff
                $div.css({
                    "position":"absolute",
                    "border":opts.border,
                    "top":$(this).offset().top,
                    "left":$(this).offset().left,
                    "-moz-box-shadow":" 0px 0px 12px black",
                    "-webkit-box-shadow":" 0px 0px 12px black",
                    "z-index":"99"
                });
                 
                // store all of the old props so it can be animate back
                $div.attr("id",opts.useId)
                    .attr("oldWidth",$(this).width())
                    .attr("oldHeight",$(this).height())
                    .attr("oldTop",$(this).offset().top)
                    .attr("oldLeft",$(this).offset().left)
                    .attr("oldPadding",$(this).css("padding"))
                 
                // put this guy on the page
                $("body").prepend($div);
                 
                // animate the div outward
                $div.animate({
                    "top":$(this).offset().top - Math.abs($(this).height() - opts.height),
                    "left":$(this).offset().left - opts.padding,
                    "height":opts.height,
                    "padding":opts.padding,
                },opts.speed,opts.easing);
                 
                // loop through each selector and animate it to its css object
                for(eachSelector in opts.selectors) {
                    var selectorObject = opts.selectors[eachSelector];
                    for(jquerySelector in selectorObject) {
                        var cssObject = selectorObject[jquerySelector];
                        $div.find(jquerySelector).animate(cssObject,opts.speed,function() {
                            // make sure all css is applied, like those that can't be animated
                            $div.find(jquerySelector).css(cssObject);
                        });
                    }
                }
             
                $div.mouseleave(function() {
                    $("#"+opts.useId).animate({
                        width:$(this).attr("oldWidth"),
                        height:$(this).attr("oldHeight"),
                        top:$(this).attr("oldTop"),
                        left:$(this).attr("oldLeft"),
                        padding:$(this).attr("oldPadding"),
                    },opts.speed / 2,function() {
                        $(this).remove();
                    });
                });
            }
        });
    });
}  
   
 $(".productBox").popOut({
    height : 300,
    useElement: $("#poppedOut"),
    speed : 200,
    border : "1px solid #333",

});   
   
