Mannequin Builder

Mannequin.js

/*
	
	Mannequin Builder / Dress Builder 
	----------------------------------
	http://app.carolinearthur.com/
	
	- List thumbnails image src and alt tag
	- Each thumbnail has a class, this class is added to the URL
	- image has class anem of category and style, you can only pick one of each of these classes.
		For example: accessories.shoulders
	
	- Add classes to the URL
	- Parse the URL when loaded and add selected to all classes listed in URL
	- Send email to owner + Send email to Friend
	- Like on facebook url needs updating because it's an iframe. But you could always use share rather than like. Depends if liking a page is better than sharing it...
	
*/ 



	$(function() {
	   $('#print').click(function(){
	       window.print();
	   }
	)
        
        $( "#weddingdate" ).datepicker();
       
       $('#reset').click(function(){
        location.href=root;
       })
       
       
        setupQuote();
        setupSendFriend();

		// This is for the tabs of styles.
		$( "#tabs" ).tabs();
        
        // Body cloning
        $( ".bodice" ).parent().click(function (event,ui) {clickClone( event, ui, $(this).children("img"), "bodice", "#bodice-snap", false);});
		
		// Strap Cloning
        $( ".straps" ).parent().click(function (event,ui) {clickClone( event, ui, $(this).children("img"), "strap", "#straps-snap", false);});
        
        // This is for accessories, you can't mix them all.
        $( ".accessories.waist" ).parent().click(function (event,ui) {clickClone( event, ui, $(this).children("img"), "acc_waist", "#accessories-waist-snap", false);});
        $( ".accessories.shoulder" ).parent().click(function (event,ui) {clickClone( event, ui, $(this).children("img"), "acc_shoulder", "#accessories-shoulder-snap", false);});
        $( ".accessories.corsage" ).parent().click(function (event,ui) {clickClone( event, ui, $(this).children("img"), "acc_corsage", "#accessories-corsage-snap", false);});
        $( ".skirt" ).parent().click(function (event,ui) {clickClone( event, ui, $(this).children("img"), "skirt", "#skirt-snap", true);});
            
        parseArgs();
        
        setInterval("checkHref()",1000);
	});
    
var currentHref = document.location.href;
var acc_waist = '', acc_shoulder = '', acc_corsage = '', skirt = '', strap = '', bodice = '';

function setItem( classname, id )
{
    eval( classname + "= '" + id + "';" );
    refreshURL();
}

function refreshURL()
{
	// Add all the classes to params
    params = "#" + bodice +  skirt + strap + acc_waist + acc_shoulder + acc_corsage;
	
	// Split the URL at the # if there is one... I think removes the hashtag crap every load.
    hashsplit = document.location.href.split("#");

    // Put the parametres at the end of the URL
    document.location.href = hashsplit[0] + params;
    
	// Escape the URL incase there are any characters we don't want.
    escaped_href = encodeURIComponent(document.location.href);
    
    // Get the facebook link ready for the iframe
    facebooklink = "http://www.facebook.com/plugins/like.php?href="+escaped_href+"&send=false&layout=button_count&width=110&show_faces=false&action=like&colorscheme=light&font&height=21"
    
    // When the page loads a new class, reload the facebook like button
    newhtml = '<iframe src="'+facebooklink+'" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>';
    $("#facebook").html(newhtml);   

	// Get the HTML for Print-thumbs
    $("#print-thumbs").html('');	
	// Clone of the thumbnail          
    clone = $(".selected img").clone();
	// move clone into the printing side of things
    clone.appendTo($("#print-thumbs")).wrap("<div class='printcol' />"); 
	// Put a <p> after the title...
    $("#print-thumbs img").after(function (){
        return "<p>" + $(this).attr("title") + "</p>";
    });
    // wrap printable thumbnails in a div...
    $("#print-thumbs img").wrap("<div class='wrap-img'/>");    
}




/* Check the URL for previous classes*/
function checkHref()
{
	// If this HREF is the HREF...
    if (document.location.href != currentHref)
    {
	    // Do parseArgs
        parseArgs();
        // Make the Current URL the HREF
        currentHref = document.location.href;
    }
}




// Go through all classes on page to detect what needs to be selected
 function parseArgs()
 {
	// Split the URL at the # - get all after #
    hashsplit = document.location.href.split("#");
	// Split the url at the / - get the classes /
    args = hashsplit[1].split('/');
    
    // for each class, add the class 'selected' to the thumbnail, then fake a click to make it show on the dolly.
    for (arg in args)
    {
        if(!$("."+args[arg]).hasClass("selected"))
            $("."+args[arg]).children("img").click();
    }
 }







// Clonse the selected onto the .dolly  
 function clickClone( event, ui, obj, classname, snapid, replaceThumb)
 {
   
   classes = $(obj).parents('.thumb').children("img").attr('class');
   classes = classes.replace('ui-draggable', '');   
   classes = classes.replace('image-thumb', '');   
   classes = $.trim(classes);   
   
   classes = "."+classes.replace(" ", ".");
   
   
  if($(obj).parents('.thumb').hasClass("selected"))
  {
    $(snapid).html("");
    $(obj).parents('.thumbs').children(".thumb").removeClass("selected");
    setItem(classname, '');
  }
  else
  {  
    $(snapid).html("");
        
    $(obj).parents('.thumbs').children(".thumb").children(classes).parent().removeClass("selected");
    $(obj).parents('.thumb').addClass("selected");
    
    
    var cloned = $(obj).clone();    
    
    if (replaceThumb)
    {
        src = $(cloned).attr("src");
        src = src.replace("-thumb","");
        src = src.replace(classname+"/",classname+"/full/");

        $(cloned).attr('src',src);
    }
 
    $(cloned).appendTo(snapid);
    
    var id = $(obj).parents('.thumb').attr('class');
    id = $.trim(id.replace('selected', '').replace('thumb', ''));
    
    setItem(classname, id + '/');        
   }
 }
 
 
 
 
 
 
 // Set up Send to Friend
 
 function setupSendFriend()
    {
                // load the modal window
        $('#send-friend').click(function(){
            
            // scroll to top
            $('html, body').animate({scrollTop:0}, 'fast');
            
            // before showing the modal window, reset the form incase of previous use.
            $('.success, .error').hide();
            $('form#sendfriendform').show();
            
            // Reset all the default values in the form fields
            $('#friendname').val('Your name');
            $('#friendemail').val('Your email address');
            $('#friendemail').val('Your friends email address');
            
            //show the mask and contact divs
            $('#mask').show().fadeTo('', 0.7);
            $('div#sendfriendform').fadeIn();
            
            // stop the modal link from doing its default action
            return false;
    });
    
    // close the modal window is close div or mask div are clicked.
    $('div#close, div#mask').click(function() {
        $('div#sendfriendform, div#mask').stop().fadeOut('slow');
    });
 
    $('#sendfriendform .input').focus(function() {
        $(this).val(' ');
    });

    // when the Submit button is clicked...
	$('input#submit2').click(function() {
		//Inputed Strings
		var name = $.trim($('#sendname').val()),
			sendemail = $.trim($('#sendemail').val()),
            friendemail = $.trim($('#friendemail').val());
			url = encodeURIComponent(document.location.href);

		//Error Count
		var error_count=0;

		//Regex Strings
		var email_regex2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

			//Test Username
//			if(!username_regex.test(name)) {
	//			alert('Invalid name entered');
		//		error_count += 1;
			//}

			//Test Email

			if(!email_regex2.test(sendemail)) {
               alert('Invalid email entered.');
				error_count += 1;
			}

            if(!email_regex2.test(friendemail)) {
				alert('Invalid friend email entered.');
				error_count += 1;
			}

        
			//No Errors?
			if(error_count === 0) {
			 
				$.ajax({
					type: "post",
					url: root+"send-friend.php",
					data: "name=" + name + "&email=" + sendemail + "&friendemail=" + friendemail + "&url="+url,
					error: function() {
						$('.error').hide();
						$('#sendError').slideDown('slow');
					},
					success: function () {
						$('.error').hide();
						$('.success').slideDown('slow');
						$('form#sendfriendform').fadeOut('slow');
					}
				});
			}

			else {
                $('.error').show();
            }

		return false;
	});

    }







	// Set up quote
 
     function setupQuote()
    {
                // load the modal window
        $('.modal').click(function(){
            
            // scroll to top
            $('html, body').animate({scrollTop:0}, 'fast');
            
            // before showing the modal window, reset the form incase of previous use.
            $('.success, .error').hide();
            $('form#contactForm').show();
            
            //show the mask and contact divs
            $('#mask').show().fadeTo('', 0.0);
            $('div#contact').slideDown(200);
            
            // stop the modal link from doing its default action
            return false;
    });
    
    // close the modal window is close div or mask div are clicked.
    $('div#close, div#mask').click(function() {
        $('div#mask').stop().fadeOut('slow');
        $('div#contact').slideUp(100);
    });
 
    $('#contactForm .input').focus(function() {
        $(this).val(' ');
    });

    // when the Submit button is clicked...
	$('input#submit1').click(function() {
		//Inputed Strings
		var name = $.trim($('#name').val()),
			email = $.trim($('#email').val()),
			url = encodeURIComponent(document.location.href),
                        tel = $.trim($('#telephone').val()),
                        date = $.trim($('#weddingdate').val())
                        message = $.trim($('#message').val());

		//Error Count
		var error_count=0;

		//Regex Strings
		var username_regex = /^[a-z0-9_-]{3,16}$/,
			email_regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

			//Test Username
//			if(!username_regex.test(name)) {
	//			alert('Invalid name entered');
		//		error_count += 1;
			//}

			//Test Email
			if(!email_regex.test(email)) {
				alert('Invalid email entered.');
				error_count += 1;
			}


			//No Errors?
			if(error_count === 0) {			 
				$.ajax({
					type: "post",
					url: root+"send.php",
					data: "name=" + name + "&email=" + email + "&url="+url +"&message="+message+"&date="+date+"&telephone="+tel,
					error: function() {
						$('.error').hide();
						$('#sendError').slideDown('slow');
					},
					success: function () {
						$('.error').hide();
						$('.success').slideDown('slow');
						$('form#contactForm').fadeOut('slow');
					}
				});
			}

			else {
                $('.error').show();
            }

		return false;
	});

    }