$(document).ready(function() {  
      
    //if submit button is clicked  
    $('#submit').click(function () {          
          
        //Get the data from all the fields  
        var email = $('input[name=email]');  
    
        //Simple validation to make sure user entered something  
        //If error found, add hightlight class to the text field  
        //if (email.val()=='') {  
        //    email.addClass('hightlight');  
        //    return false;  
        //} else email.removeClass('hightlight');  
      
        //organize the data properly  
        var data = 'email=' + email.val();
        
        //disabled all the text fields  
        $('.text').attr('disabled','true');  
          
        //show the loading sign  
        //$('.loading').show();  
          
        //start the ajax  
        $.ajax({  
            //this is the php file that processes the data and send mail  
            url: "newsletter_signup.php",   
              
            //GET method is used  
            type: "GET",  
  
            //pass the data           
            data: data,       
              
            //Do not cache the page  
            cache: false,  
              
            //success  
            success: function (html) {                
             
                //if process.php returned 1/true (send mail success)  
                //if (html == 1) {                    
                    //hide the form  
                    $('.form').fadeOut('slow', function () {  
                    //show the success message    
	                    $("#response").html(html).fadeIn('slow');  
					});
                //if process.php returned 0/false (send mail failed)  
                //} else alert('Sorry, unexpected error. Please try again later.');                 
            }         
        });  
          
        //cancel the submit button default behaviours  
        return false;  
    });   
}); 

$(document).ready(function() {  
		// find the coresponding style of the jewelry items that will be featured
		//var style = $("#pageSelector ul").attr('class')
		//var singlestyle = style.replace('items ','')
		// add a 1 so we can target the 1st list item of that style
		//var styleclass = style + "1";
		// add a # so we can slect it as an ID
		//var listitem = $( "#" + style );
		// turn the list in an object
		//var list = $('#pageSelector li')
		// check the index of the list to get the position of target element
		//var linenum = list.index( listitem );
		// output debugging info to the footer
		 //$('#col-main').append("<b>[" + singlestyle + "]</b>"); 
		// reorder the list so that target style is up top
		//var neworder = $('#pagerSlides li:lt('+linenum+')');
		//$(neworder).insertAfter($('#pagerSlides li:last'));
		// add current to first target slide
		//$('#pager li:first a').addClass('current');
        //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.  
        $('.items li:first').before($('.items li:last'));   
  		//$('#pagerSlides li:gt(30)').before($('#pagerSlides li:last'));
  
        //when user clicks the image for sliding right  
        $('.pageRight').click(function(){  
  
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '  
            var item_width = $('.items li').outerWidth() + 10;  
  
            //calculate the new left indent of the unordered list  
            var left_indent = parseInt($('.items').css('left')) - item_width;  
  
            //make the sliding effect using jquery's anumate function '  
            $('.items:not(:animated)').animate({'left' : left_indent},500,function(){      
  
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
                $('.items li:last').after($('.items li:first'));   
  
                //and get the left indent to the default -210px  
                $('.items').css({'left' : '-73px'});  
            });  
        });  
  
        //when user clicks the image for sliding left  
        $('.pageLeft').click(function(){  
  
            var item_width = $('#pager li').outerWidth() + 10;  
  
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */  
            var left_indent = parseInt($('.items').css('left')) + item_width;  
  
            $('.items:not(:animated)').animate({'left' : left_indent},500,function(){      
  
            /* when sliding to left we are moving the last item before the first item */  
            $('.items li:first').before($('.items li:last'));   
  
            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */  
            $('.items').css({'left' : '-73px'});  
            });  
  
        });  
  });
  
  // Fade Featured slide in and out when selections are made in the pager area
  $(document).ready(function(){
  	$('.items a').click(function(){
  		// Get the name of slide that is clicked
  		var slideDiv = $(this).attr("class");
  		// Get the style so we know what category to show
  		var style = $("#pageSelector ul").attr('class')
  		var singlestyle = style.replace('items ','')
  		//$('#col-left').append("<b>[" + slideDiv + "]</b>");
  		var url ="gallerySlides.htm";
  		
  		var nurl = url +" #" + singlestyle + " ." + slideDiv;
  		// Fade out the current slide  
  		$('#slides .current').fadeOut(400,function() {
  			// Load and Fade in selected slide then add class current
  			$("#slides").addClass('loading');
  			$("#slides").load( nurl,function() {
  				$("#slides").removeClass('loading');
  				$('.' + slideDiv).fadeIn(300).addClass('current')
  			});
  		// Remove class current from previous slide	
  		 }).removeClass('current');
  		 // Change switch class current from previous to currentl selected slide in pager
  		$('#pager .current').removeClass('current');
  		$(this).addClass('current');		
  		// Now move the pager over by 1
  		//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '  
  	//	var pagerStyle = $("#pager ul").attr('id');
  	//	var pagerName = '#' + pagerStyle ;
  		 
  	//	var item_width = $( pagerName + ' li').outerWidth() + 10;  
  		//calculate the new left indent of the unordered list  
  	//	var left_indent = parseInt($( pagerName ).css('left')) - item_width;  
  		
  		//make the sliding effect using jquery's anumate function '  
  	//	$( pagerName + ':not(:animated)').animate({'left' : left_indent},500,function(){      
  		
  		  //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
  	//	  $( pagerName + ' li:last').after($( pagerName + ' li:first'));   
  		
  		  //and get the left indent to the default -210px  
  	//	  $( pagerName ).css({'left' : '-112px'});  
  	//	});  
  					
  	});
  });
  
  
$(document).ready(function(){
  	$('#featured').cycle({
	  	fx:    'fade',
  		speed:  5000
  	}); 
});

$(document).ready(function(){	
	$('.info1').click(function(){
		$('#slides .current').fadeOut(400,function() {
  			$('#slides .info1').fadeIn(300).addClass('current')
  		 }).removeClass('current');
  		$('#pager .current').removeClass('current');
  		$(this).addClass('current');									
  	});
  	$('.info2').click(function(){
  		$('#slides .current').fadeOut(400,function() {
  			$('#slides .info2').fadeIn(300).addClass('current')
  		 }).removeClass('current');
  		$('#pager .current').removeClass('current');
  		$(this).addClass('current');		
  	});
  	$('.info3').click(function(){
  		$('#slides .current').fadeOut(400,function() {
  			$('#slides .info3').fadeIn(300).addClass('current')
  		 }).removeClass('current');
  		$('#pager .current').removeClass('current');
  		$(this).addClass('current');		
  	});
  });