$(document).ready( function() {
							
	$("div.lightbox").hide();
	$('body').append('<div id="mask"></div>');
	$('.lightbox').append('<div class="lightbox_close"></div>');					
    
	//the slider
	$(".next").bind("mouseover", function(){
        $("#bagscroll").ScrollLeft({line:1,timer:1000,speed:500});
     }); 
	
	$(".next").bind("mouseout", function(){
        clearInterval(timerID);
     });
    
	$(".pre").bind("mouseover", function(){
        $("#bagscroll").ScrollRight({line:1,timer:1000,speed:500});
     }); 
	
	$(".pre").bind("mouseout", function(){
        clearInterval(timerID);
     });
	
	
    //click to pop up the lightbox
	$('.lightbox_toggle').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//tick the item
		var item_id = $(this).attr('id');
		$(this).append('<div class="tickbox"></div>');
		
		//Get the A tag
		var id = $(this).attr('href');
		
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set height and width to mask to fill up the whole screen
		$('#mask').css({
			'width': maskWidth,
			'height': maskHeight,
			'opacity' : 0
		});
		
		//transition effect		
		$('#mask').show();
		
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
		
		//Set the popup window posistion
		$(id).css('top',  172); 		
		$(id).css({
			'left': (winW/2+31),
			'position': "absolute",
			'z-index': 9999
		});
		//transition effect
		$(id).animate({ "marginTop": "-30px" }, { queue:false, duration:500 }).fadeIn(10);
	});
	
	//click to enlarge the picture
	$('#bag1').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/envirapaper1.jpg' alt='EnviraPaper' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 200gsm 'Greengrocer Bag' with screen printed logo</p></div>");
	});
	$('#bag2').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/envirapaper2.jpg' alt='EnviraPaper' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 110gsm 'Euro Tote' bag in white</p></div>");
	});
	$('#bag3').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/envirapaper3.jpg' alt='EnviraPaper' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 110gsm 'Shop Slimline' bag</p></div>");
	});
	$('#bag4').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/envirapaper4.jpg' alt='EnviraPaper' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 80gsm 'Take Out' bag</p></div>");
	});

	$('#jutebag1').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/jute1.jpg' alt='Jute' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 14/15 weave Jute bag with screen printed logo</p></div>");
	});
	$('#jutebag2').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/jute2.jpg' alt='Jute' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 14/15 weave Jute 'Custom' bag</p></div>");
	});
	$('#jutebag3').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/jute3.jpg' alt='Jute' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 17/17 weave Jute 'Greengrocer' bag in smoke grey</p></div>");
	});
	$('#jutebag4').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/jute4.jpg' alt='Jute' /></p></div>");
		$('.description').html("<div class='description'><p>Image: JuteCo, embroidered logo &amp; webbing handle</p></div>");
	});

	$('#nwbag1').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/nonwoven1.jpg' alt='Non Woven' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 110gsm 'Greengrocer' bag with screen printed logo</p></div>");
	});
	$('#nwbag2').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/nonwoven2.jpg' alt='Non Woven' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 90gsm 'Lunch Mini' bag with screen printed logo</p></div>");
	});
	$('#nwbag3').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/nonwoven3.jpg' alt='Non Woven' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 90gsm folding 'Metro' bag with printed display card</p></div>");
	});
	$('#nwbag4').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/nonwoven4.jpg' alt='Non Woven' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 110 gsm 'Chilled' bag with neoprene inner</p></div>");
	});

	$('#rpetbag1').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/rpet1.jpg' alt='rPET' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 90gsm, full-colour, photo-printed 'Euro tote' bag</p></div>");
	});
	$('#rpetbag2').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/rpet2.jpg' alt='rPET' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 110gsm, full-colour, photo-printed 'Euro Tote' bag</p></div>");
	});
	$('#rpetbag3').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/rpet3.jpg' alt='rPET' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 110gsm, full-colour, photo-printed 'Custom' bag</p></div>");
	});
	$('#rpetbag4').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/rpet4.jpg' alt='rPET' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 110gsm, full-colour, photo-printed 'Worksach A4'</p></div>");
	});

	$('#flaxbag1').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/flax1.jpg' alt='Flax-Viscose' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 150gsm 'Magazine' bag</p></div>");
	});
	$('#flaxbag2').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/flax2.jpg' alt='Flax-Viscose' /></p></div>");
		$('.description').html("<div class='description'><p>Image: Logos can be over-printed up to 15% bag coverage</p></div>");
	});
	$('#flaxbag3').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/flax3.jpg' alt='Flax-Viscose' /></p></div>");
		$('.description').html("<div class='description'><p>Image: Logos are screen printed in up to 5-colours</p></div>");
	});
	$('#flaxbag4').click(function(e){
		$('.enlarge').html("<div class='enlarge'><p><img src='images/bags/flax4.jpg' alt='Flax-Viscose' /></p></div>");
		$('.description').html("<div class='description'><p>Image: 150gsm 'Shop Folio' bag</p></div>");
	});

	//if close button is clicked
	$('.lightbox_close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		$('.lightbox').animate({ "marginTop": "30px" }, { queue:false, duration:500 }).hide();
		$('#mask').hide();
		$('div.tickbox').hide();
	});	
	
});