/**
 * Sliding panel component
 *
 * Controls and animates a sliding panel component (example: sitemaker.html) via jQuery
 * See the end of this file for example html/css to accompany this script
 * 
 * Uses revealing module JS pattern as described here:
 * 	http://peter.michaux.ca/articles/how-i-write-javascript-widgets
 * 	http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/
 * 
 * @filesource ~/js/nui.slidingpanel.js
 * @package Namesco UI
 * @subpackage Components
 *
 * @uses ~/web/cms_tempates/common/jquery.min.js jQuery 1.2+ (minified)

 * @uses SlidingPanel principal object, holding all functions and variables used
 * 
 * @uses SlidingPanel.init() Script initialisation
 * 
 * @author Tim Curzon
 * @version 1.0
 * @changed 12/11/2008
 *
 */

(function(){
	
	// global equals "this"
	var global = this;

	// locally accessible helper functions
	// can be dropped here as required

	/**
	 * SlidingPanel
	 * 
	 * The container for all functions and variables used within the sliding panel component
	 * 
	 * @author Tim Curzon
	 * @version 1.0
	 * @since 1.0
	 * 
	 */
	// principal object constructor
	global.SlidingPanel = function(){
			
		/**
		 * private data store (container object)
		 * 
		 * A collection of private variables used throughout the object
		 * 
		 * @since 1.0
		 */
		var store = {
			location_hash:			 "",				// initial location hash
			slide_duration:			 500,				// slide animation duration	(ms)
			slide_panel_container: 	 "#pane-container", // id of sliding panel container
			slide_button_container:  "#toolbar",		// id of slider button container
			pattern_pane_id:		 /-pane$/			// regex pattern identifying slding panel pane id's
		};
	
		/**
		 * init
		 *
		 * Initialise slider - tweak css and add button functionality
		 *
		 * @return null
		 *
		 * @author Tim Curzon
		 * @version 1.0
		 * @since 1.0
		 */
		var init = function() {
			
			// store initial location hash
			store.location_hash = document.location.hash;
			
			// ensure first sliding pane made visible
			// (only if doc hashref relates to a sliding pane)
			if (store.location_hash.match(store.pattern_pane_id)){ 
				document.location = "#trial-pane";
			}
		
			// sliding panel container is position:relative
			$(store.slide_panel_container).css({"position":"relative"});

			// add slide trigger functionality to slider toolbar buttons
			utils.activate_buttons();
			
			// scroll to pane specified in doc hashref
			// (only if doc hashref relates to a sliding pane)
			if (store.location_hash.match(store.pattern_pane_id)){
				utils.scroll_to_pane(store.location_hash);
			}
		};

		/**
		 * utils (container object)
		 * 
		 * A collection of common functions used by all 
		 * 
		 * @since 1.0
		 */
		var utils = {
			
			/**
			 * activate_buttons
			 * 
			 * Attaches slider functionality to slider buttons
			 *
			 * @return false
			 *
			 * @author Tim Curzon
			 * @version 1.0
			 * @since 1.0
			 */
			activate_buttons : function(){
				$(store.slide_button_container+" a").click(function(){

					// get reference to panel button refers to
					var pane = $("#"+this.href.substr(this.href.lastIndexOf("#")+1));

					// get left edge offsets
					var edge_slider_left = utils.get_left_offset($(store.slide_panel_container)); 	// left edge of sliding content
					var edge_panel_left  = utils.get_left_offset(pane);								// left edge of panel button refers to

					// calculate new left offset for sliding panel
					var new_left_offset = edge_slider_left - edge_panel_left;

					// animate!
					$(store.slide_panel_container).animate({"left": new_left_offset},store.slide_duration);
					
					return false;
				});	
			},
			
			/**
			 * get_left_offset
			 * 
			 * Return specified element's left hand offset (in pixels) from browser viewport
			 *
			 * @param object element_ref Object reference to element who's offset is being calculated
			 * @return integer
			 *
			 * @author Tim Curzon
			 * @version 1.0
			 * @since 1.0
			 */
			get_left_offset : function(element_ref){
				return $(element_ref).offset().left;
			},

			/**
			 * scroll_to_pane
			 * 
			 * Trigger click event on specified toolbar button, resulting in panel
			 * sliding its associated pane into view
			 *
			 * @param string pane_id The string representing the panes id, in hashed format (eg. #hash)
			 * @return null
			 *
			 * @author Tim Curzon
			 * @version 1.0
			 * @since 1.0
			 */
			scroll_to_pane : function(pane_id){
				if (pane_id.match(store.pattern_pane_id)) {
					var toolbar_button_id = pane_id.replace("-pane", "-tab");
					$(toolbar_button_id + " a").click();
				}
			}
	
		};

		// return public pointers
		return {
			init: init
		};
	}();
	
})();

/**
 * Inititalise script
 * 
 * Call all init() functions and do any setup required
 */
$(document).ready(function(){
	SlidingPanel.init();
});

/**
 * Example html / css
 * 
 * This html / css would accompany the javascript above. Note that the sliding panel contents
 * have not been defined or styled. Widths and heights of the component are also representative
 * and will need customising
 * 
 * @author Phase 8, with modifications by Tim Curzon
 * @version 1.0
 * @since 1.0
 */

/* the HTML

<div id="slidingpanels">
	<div id="slidingsurround">
		<div id="toolbar">
			<ul>
				<li id="panel1-tab" class="active"><a id="btn1" href="#panel1" title="panel1">Panel 1</a></li>
				<li id="panel2-tab" class="inactive"><a id="btn2" href="#panel2" title="panel2">Panel 2</a></li>
				<li id="panel3-tab" class="inactive"><a id="btn3" href="#panel3" title="panel3">Panel 3</a></li>
			</ul>
		</div>
		<div id="scroller">
			<div id="pane-container">
				<div class="slider-section" id="panel1-pane">
					panel#1 content
				</div>
				<div class="slider-section" id="panel2-pane">
					panel#2 content
				</div>
				<div class="slider-section" id="panel3-pane">
					panel#3 content
				</div>
			</div>
		</div>
	</div>
</div>

*/

/* the CSS

#slidingpanels {
	position: relative;
	background-image: url(img/sitemaker/smbk.jpg);
	height: 349px;
	width: 605px;
	clear: both;
	border: 1px solid #CCCCCC;
	margin-bottom: 15px;
}

#slidingsurround, 
#scroller, 
.slider-section {
	height: 349px;
}

#slidingsurround {
	overflow: hidden;
	width: 606px;
}

#scroller {
	width: 606px;
	overflow: hidden;
	position: relative;
}

#pane-container {
	width: 2250px;
}

.slider-section {
	width: 606px;
	margin: 0px 20px 0 0;
	float: left;
	border-style: none;
}

*/