/*
This is the function that will insert the header into all of your pages
*/

var gallery_toggle = function(elementID, onlyShowThisClass, selectedElement) {
	selectedElement = $(selectedElement);
	el = $(elementID);
	
	//higlighting the button that was ust clicked.
	el.find('span.galleryToggle').removeClass('selected');
	selectedElement.addClass('selected');
	
	//hide all images
	el.find('a').hide();
	//unhide only the ones we want
	
	if(onlyShowThisClass != '') {
		onlyShowThisClass = '.' + onlyShowThisClass
	}
	
	el.find('a' + onlyShowThisClass ).show();	

}

var append_header = function( ) {	
		
	var headerString  = '<div id="header">'
	headerString += '<a id="logo-link" href="/index.html"><img src="/Images/versalogo_green.gif" alt="Versa" id="green-logo"/></a>'
	headerString +=   '</div>'
	headerString +=   '<div id="nav" style="height:41px">'
	headerString +=        '<ul>'
	headerString +=            '<li id="collections-li"><a href="../collections.html">collections</a>'
	headerString += '       		<ul id="collections-nav-list" style="display:none">'
	headerString += '					<div id="collection-nav-spacer"></div>'
	headerString += '          			<li><a href="/neck/index.html">neck</a></li>'
	headerString += '           		<li><a href="/ear/index.html">ear</a></li>'
	headerString += '           		<li><a href="/wrist/index.html">wrist</a></li>'
	headerString += '       		</ul>'							
	headerString += '			</li>'
	headerString += '           <li><a href="/about.html">about</a></li>'
	headerString += '           <li><a href="/stockists.html">stockists</a></li>'
	headerString += '           <li><a href="/press.html">press</a></li>'
	headerString += '           <li><a href="/contact.html">contact</a></li>'
	headerString += '           <li><a href="http://versasvices.wordpress.com">blog</a></li>'
	headerString += '           <li><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">'
	headerString += '				<input type="hidden" name="cmd" value="_s-xclick">'
	headerString += ' 			<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIG1QYJKoZIhvcNAQcEoIIGxjCCBsICAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYBbErK0IOEqwMnQXI6jkNVW5Sh4038wjE2CQCpH7ROSqycxO8m+j3SLgo0KdlHnopA6U4KVeeXpKeuDZ57WPBQnOTxwWtXRRwqmeEY4fFxoNkOHGmjGekoNiAbF39V4Ij49WIV/FneyKpZ41sLkpJxYZNrV2S8+yjtGTUQtU5cCdDELMAkGBSsOAwIaBQAwUwYJKoZIhvcNAQcBMBQGCCqGSIb3DQMHBAjyz7QIrDA3SIAwdLy9rMobpiWNbRbodmEUyqILm5CfIR2fqMHC5rOm5QFrdOPqQmCxk6+M3V8MjjSHoIIDhzCCA4MwggLsoAMCAQICAQAwDQYJKoZIhvcNAQEFBQAwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMB4XDTA0MDIxMzEwMTMxNVoXDTM1MDIxMzEwMTMxNVowgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBR07d/ETMS1ycjtkpkvjXZe9k+6CieLuLsPumsJ7QC1odNz3sJiCbs2wC0nLE0uLGaEtXynIgRqIddYCHx88pb5HTXv4SZeuv0Rqq4+axW9PLAAATU8w04qqjaSXgbGLP3NmohqM6bV9kZZwZLR/klDaQGo1u9uDb9lr4Yn+rBQIDAQABo4HuMIHrMB0GA1UdDgQWBBSWn3y7xm8XvVk/UtcKG+wQ1mSUazCBuwYDVR0jBIGzMIGwgBSWn3y7xm8XvVk/UtcKG+wQ1mSUa6GBlKSBkTCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb22CAQAwDAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQUFAAOBgQCBXzpWmoBa5e9fo6ujionW1hUhPkOBakTr3YCDjbYfvJEiv/2P+IobhOGJr85+XHhN0v4gUkEDI8r2/rNk1m0GA8HKddvTjyGw/XqXa+LSTlDYkqI8OwR8GEYj4efEtcRpRYBxV8KxAW93YDWzFGvruKnnLbDAF6VR5w/cCMn5hzGCAZowggGWAgEBMIGUMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbQIBADAJBgUrDgMCGgUAoF0wGAYJKoZIhvcNAQkDMQsGCSqGSIb3DQEHATAcBgkqhkiG9w0BCQUxDxcNMDkwNDI5MDQzMDQwWjAjBgkqhkiG9w0BCQQxFgQU7uXbVTcWaeJJrhN/oFfPN3yxDJMwDQYJKoZIhvcNAQEBBQAEgYBp2bTnmO785JAvmoozvB2/Sg144z7zlJx/JlKIw4t4vLJ+Xs70FbwsCTGX2XszxwSWKMZYF/2wDbNWB4COYc/PozUeFzkmN6xMYf4d1oXYpF3CaY1uAcijpeMBmIqhueiONkSbtf4H5zTyoBH4+l+5XAZB6gfcHfe/67xawEMslA==-----END PKCS7-----">'
	headerString += '			<input id="cart-image" type="image" src="/Images/cartgraphic.gif" border="0" name="submit" alt="Cart">'
	headerString += '			<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">'
	headerString += '			</form></li>'
	headerString += '       </ul>'
	headerString += '     <br clear="all" />'
	headerString += '  </div>'

		
	$('#header-place-holder').append(headerString);
}

var append_footer = function(){
	var footerString = ''
	footerString += '<div id="footer">'
    footerString +=	'	<div id="footer-inner">'
    footerString += '   	<form action="/gdform.php" method="post" id="mailing-form">'
    footerString += '       	<input type="hidden" name="subject" value="Versa Jewelry Mailing List Signup" />'
    footerString += '       	<input type="text" id="address" name="address" value="Enter your email address" size="32" />'
    footerString += '       	<input type="submit" value="Go" id="footer-submit" />'
    footerString += '       	<p>JOIN OUR MAILING LIST</p>'
    footerString += '   	</form>'
    footerString += '   	<p>&copy; 2009 Versa Jewelry</p>'
    footerString += ' 	</div>'
	footerString += '</div>'
	
	$('#footer-place-holder').append(footerString);
}

	//Clear and set the deafult input of the email address field
	var clear_input = function(selector, text) {
		element = $(selector);		
		element.bind('focus', function(){
			if ( element.val() == text ) {
				element.val('');
			}
		});
		
		element.bind('blur', function(){
			if ( element.val() == '' ) {
				element.val(text);
			}
		});				
	}
	
	var ajax_form_submit = function(element ){
		element = $(element);
				
		element.submit( function(){			
			var formData = ''
			$(this).find(':input').not(':submit').each(function(){
				formData = formData + '&' + $(this).attr('name') + '=' + $(this).val();
			});
			$.ajax( {	type: 'POST',
						url: element.attr('action'),
						data: formData,
						success: function(){
						     alert( "Thanks for signing up! We promise not to spam you or send you nudie pictures." );
						   },
						error: function(){
						     alert( "We're sorry, there was an error. You can email me directly at: info@versajewelry.com " );
						   }						
					 });
			return(false); //this prevents the form from actually submitting
		}); 
		
	}
	
//When the document is loaded the foote  r and header get added in.
$(document).ready(function() {
	append_header();
	$('#collections-li').live('mouseover',function(){$('#collections-nav-list').show() } );
	$('#collections-li').live('mouseout',function(){$('#collections-nav-list').hide() } );
								
	append_footer();
	
	//Adding the toggle buttons to the gallery pages. jQuery will still work an id is missing, so we don't 
	// have to worrk about this breaking on a non-gallery page
	$('#one-of-a-kind').click(function(){ gallery_toggle('#gallery-holder', 'one', $(this)) } );
	
	$('#limted-edition').click( function(){ gallery_toggle('#gallery-holder', 'limited', $(this)) } );
	
	$('#all').click( function(){ gallery_toggle('#gallery-holder', '', $(this)) } );
	
	$('#content-right').append('<a id="gallery-link" href="index.html">Back To Gallery</a>');
	
	
	clear_input('#address', 'Enter your email address');			
	ajax_form_submit('#mailing-form')
	
	//setting the height of the collections nav list for safari
	jQuery.each(jQuery.browser, function(i) {
	  if($.browser.safari){
	     $("#collection-nav-spacer").css("height",12);	  
	  }
	});
	
});