// <![CDATA[
var SI_Works_Custom = {
	loadConentScroller : function () {
		if ($('page_content') && $('content_paging_links')) {
			/**
			** Here we check wich of the headers is active.
			**/
			var origional = $$('#page_content div.active')[0].readAttribute('id');
			//var identity = this.readAttribute('id').split("_")[0];
			/**
			** create an array from the navigation's ul's childelements using prototype's
			** $A function, then loop through them each using .each itterator
			**/
			$A($('content_paging_links').down('ul').childElements()).each (function ( element, index ) {
				element.down('a').observe("click", function ( event ) {
					/**
					** Stop the default event
					**/
					event.stop();
					if ( this.hasClassName('active') ) {
						return;
					}
					else {
						/**
						** navigate through the divs with active class, and remove the class.
						** remember to fade the element so that when it's opacity is set to 0
						** the element has display: none;
						**/
						$$('#page_content div.active')[0].removeClassName('active').setStyle({'display' : 'none'});
						/**
						** loop through all li's with active class, and remove the active class
						** so that we can set the correct active class relevant to the link we 
						** click on
						**/
						$A($$('#content_paging_links li a.active')).each(function ( element ) {
							element.removeClassName('active');
						});
						/**
						** set the active link on the correct li
						**/
						this.addClassName('active');
						
						/**
						** add the active class to the correct element (for the main header) and
						** use the appear effect to fade it in.
						**/
						$(this.readAttribute('class').split(' ')[0]).addClassName('active').setStyle({'display' : 'block'});
						window.location.hash="content_top"; 
					}
				})
			})
		}
	},
	/**
	* load the video/audio player
	*
	* @param string url - iframe url
	* @param int width
	* @param int height
	* @param string title
	*	
	**/
	loadLightviewMediaPlayer : function ( url , width, height, title ) {
		Lightview.show({
	    href: url,
	    rel: 'iframe',
	    title : title,
	    options: {
	      autosize: true,
	      topclose: true,
	      width: width,
	      height: height
	    }
	  });		
	},
	/**
	* swaps active tabs for related products on front end
	* @version 1.0
	* @author Greg Shiers
	*/
	setActiveTab : function ( element , link ) {
		element = $(element);
		$A($('top_nav').childElements()).each (function ( element, index ) {
			element.down('a').removeClassName('active');
		})
		link.addClassName('active');
		$A($$('.tab_content')).each( function ( elem ) {
			elem.addClassName('none');
			
		});
		element.removeClassName('none');
	}
}
/**
**	These methods will control the way that we post information to 
**  the database from an ajax call
**/
var SI_Works_Ajax_Forms = {
	/**
	* Function that will login the user
	* From the ajax opener
	* @param element
	* @version 1.0
	* @author Greg Shiers
	*/
	loadLoginForm : function ( ) {
		/**
		** Fire the first lightbox window, which fetches the form and displays it
		**/
		Lightview.show({
			href: '/ajax/login/?&call=form',
			rel: 'ajax',
			options: {
				topclose: true,
	     		 width: 400,
	     		 height: 190,
				ajax: {
				/**
				** when the first lightbox object has finished the ajax call, we have to fire another one
				** to fetch the contents of the error message or the thank you for adding message
				**/
				onComplete: function( ) {						
					// once the request is complete we observe the form for a submit, here we will send another Ajax Call.
						$('ajax_form').observe('submit', function ( event ) {
							/**
							** Stop the default event from submitting the form
							**/
							Event.stop(event);
							/**
							** Fire the second lightview window which calls the message
							**/
							Lightview.show({
								href: '/ajax/login/?&call=form',
								rel: 'ajax',
								options: {
									menubar: false,
									topclose: true,
									autosize: true,
									ajax : {
										parameters: Form.serialize('ajax_form'),
										/**
										** Finally when the ajax has completed itself, we fire a ajax call via
										** prototype's ajax handler to refresh the base content and whichever
										** element it is that needs to be refreshed with the new content from the DB
										**/
										onComplete: function () {
											/**
											** Here is where we set the time out for the new inner HTML tow refresh
											**/
											setTimeout(function () {
												location.reload();
												
											},2500); // end setTimeOut
											/**
											** We make sure to remove the lightbox object once we've refreshed the innerHTMl
											**/
											setTimeout(function () {
												Lightview.hide();
											},30000); // end SetTimeOut
										}
									}
								}
							});// End lightview object set up
						}); // End submit observe on second for submission
					}
				}
			}
		}); // End first lightview object set up
	},
	/**
	* Function that will send to frind
	* From the ajax opener
	* @param element
	* @version 1.0
	* @author Greg Shiers
	*/
	loadSendtofriendForm : function (pagetosend, item_id) {
		/**
		** Fire the first lightbox window, which fetches the form and displays it
		**/
		Lightview.show({
			href: '/ajax/sendtofriend?p=' + pagetosend + '&i=' + item_id,
			rel: 'ajax',
			options: {
				topclose: true,
	     		 width: 600,
	     		 height: 400,
				ajax: {
				/**
				** when the first lightbox object has finished the ajax call, we have to fire another one
				** to fetch the contents of the error message or the thank you for adding message
				**/
				onComplete: function( ) {						
					// once the request is complete we observe the form for a submit, here we will send another Ajax Call.
						$('sendtofriend_form').observe('submit', function ( event ) {
							/**
							** Stop the default event from submitting the form
							**/
							Event.stop(event);
							/**
							** Fire the second lightview window which calls the message
							**/
							Lightview.show({
								href: '/ajax/sendtofriend',
								rel: 'ajax',
								options: {
									menubar: false,
									topclose: true,
									autosize: true,
									ajax : {
										parameters: Form.serialize('sendtofriend_form'),
										/**
										** Finally when the ajax has completed itself, we fire a ajax call via
										** prototype's ajax handler to refresh the base content and whichever
										** element it is that needs to be refreshed with the new content from the DB
										**/
										onComplete: function () {
											/**
											** Here is where we set the time out for the new inner HTML tow refresh
											**/
											setTimeout(function () {
												location.reload();
												
											},2500); // end setTimeOut
											/**
											** We make sure to remove the lightbox object once we've refreshed the innerHTMl
											**/
											setTimeout(function () {
												Lightview.hide();
											},30000); // end SetTimeOut
										}
									}
								}
							});// End lightview object set up
						}); // End submit observe on second for submission
					}
				}
			}
		}); // End first lightview object set up
	},
	/**
	* Function that will register user
	* From the ajax opener
	* @param element
	*/
	loadRegistrationForm : function (params, href) {
		/**
		** Fire the first lightbox window, which fetches the form and displays it
		**/
		if (href == undefined) {
			href = '/users/register';
		}
		Lightview.show({
			href: href,
			rel: 'ajax',
			options: {
				topclose: true,
	     		autosize: true,
				ajax: {
					method: (params == undefined) ? 'get' : 'post',
					parameters: params,
				/**
				** when the first lightbox object has finished the ajax call, we have to fire another one
				** to fetch the contents of the error message or the thank you for adding message
				**/
				onComplete: function(ajaxResponse) {
					// once the request is complete we observe the form for a submit, here we will send another Ajax Call.
						$('users_register').observe('submit', (function ( href, event ) {
							/**
							** Stop the default event from submitting the form
							**/
							Event.stop(event);
							SI_Works_Ajax_Forms.loadRegistrationForm(Form.serialize('users_register'), href);
						}).curry(ajaxResponse.request.url)); // End submit observe on second for submission
					}
				}
			}
		}); // End first lightview object set up
	},
	
	loadUnderConstructionProductStore: function() {
		Lightview.show({ href: 'browse-to-old-product-store', rel: 'inline', options: { width: 500, height: 170 }});
	}
}
var Move =	{
  copy	:   function(e, target)	{
	    var eId      = $(e);
	    var copyE    = eId.cloneNode(true);
	    var cLength  = copyE.childNodes.length -1;
	    copyE.id     = e+'-copy';

	    for(var i = 0; cLength >= i;  i++)	{
	    if(copyE.childNodes[i].id) {
	    var cNode   = copyE.childNodes[i];
	    var firstId = cNode.id;
	    cNode.id    = firstId+'-copy'; }
	    }
	    $(target).appendChild(copyE);
	    },
  element:  function(e, target, type)	{
	    var eId =  $(e);
	    if(type == 'move') {
	       $(target).appendChild(eId);
	    }

	    else if(type == 'copy')	{
	       this.copy(e, target);
	    }
	    }
}
/* Add these methods to the JS page */
Element.addMethods(SI_Works_Custom);

document.observe('dom:loaded', function () {
	if ($('testimonial_carousel')) { 
		new Carousel($('testimonial_carousel'), $$('#testimonials_block ul li'), $$('a.carousel-control'), {
			duration: 0.5,  
			wheel: false
		})
	}
	if ($('events_carousel')) { 
		new Carousel($('events_carousel'), $$('#events_block ul li'), $$('a.ecarousel-control'), { 
			controlClassName: 'ecarousel-control',
			duration: 0.5,
			wheel: false
		})
	}
})
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// ]]>