/*
 * Name: switcher
 * Description: Drag absolutely positioned style-changing switch horizontally
 * with constrain. A mouse move event will drag the switch knob.A mouseup event
 * will terminate the drag.
 * Author: Soh Ching Boon
 * Author URI: http://www.chingboon.com
 * Copyright (C)
 * All rights reserved
 *
 * Usage:
 * jQuery(document).ready(function() {
 * 	jQuery('.snapshot').switcher();
 * });
 *
 */
(function($) {
	// Constructor prototype for switcher.
	$.fn.switcher = function() {
		var ele = $(this);
		// Determine whether to trigger style change.
		ele.flag = false;

		return this.bind({
			mousedown: function(event) {
				// The current horizontal position of the switch knob relative to the document.
				var orig = ele.offset();
				var origX = orig.left;
				// The mouse position (in window coordinates) at which the drag begins.
				var startX = event.pageX;
				var deltaX = startX - origX;				
				ele.css('position', 'absolute');
				$(ele).css('left', startX - deltaX + 'px');

				ele.bind('mousemove.moveSwitchKnob', function(event) {
			        // Move the element to the current mouse position.
					ele.css('left', event.pageX - deltaX + 'px');
					switchConstrain(ele);
				});
				
				ele.trigger('mouseout');
				ele.unbind('mouseover.showToolTip mouseout.hideToolTip');
				
				// Mouse up handler, reset everything.
				$(document).bind('mouseup.moveSwitchKnob', function(event) {
					ele.css({
						left: origX + 'px',
						position: 'static'
					}).unbind('mousemove.moveSwitchKnob');
					if (ele.flag) {
						loadStyleSheet(ele);
						$(document).unbind('mouseup.moveSwitchKnob');
						ele.flag = false;
						ele.bind('mouseover.showToolTip', {op: 'show', val: '65px'}, animate).bind('mouseout.hideToolTip', {op: 'hide', val: '72px'}, animate);
					}
					return false;
				});				
				return false;
			}
		}).bind('mouseover.showToolTip', {op: 'show', val: '65px'}, animate).bind('mouseout.hideToolTip', {op: 'hide', val: '72px'}, animate);
	};
	
	/*
	* @type: Private
	* @name: animate
	* @description: Animate and show tooltip for user to drag the switch.
	* @param Object event: event that triggers this function.
	* @return Boolean: false to prevent event bubbling.
	*
	*/
	function animate(event) {
		$('.tooltip').animate({
			opacity: event.data.op,
			top: event.data.val
		},{
			duration: 300,
			easing: 'easeOutSine'
		});
		return false;
	}
	
	/*
	* @type: Private
	* @name: switchConstrain
	* @description: Constrain the switch knob to the limits of the switch.
	* @param Object ele: switch knob to be dragged under the mouse.
	* @return: none 
	*
	*/
	function switchConstrain(ele) {
		// Position of the switch.
		var switchPos = ele.parent().position();
		var switchX = switchPos.left;
		// The drag limit of the switch knob.
		var limitX = switchPos.left + ele.parent().width()/2 - 5;		
		
		// Current position of the switch knob.
		var pos = ele.position();
		
		if (pos.left >= limitX) {
			ele.css('left', limitX + 'px');
			ele.flag = true;
		} else if (pos.left <= switchX) {
			ele.css('left', switchX + 'px');
		}
    }
	
	/*
	* @type: Private
	* @name: loadStyleSheet
	* @description: Switch the document css style upon trigger by the switch knob.
	* @param Object ele: element that triggers the change.
	* @return: none
	*
	*/
	function loadStyleSheet(ele) {
		$('body').append('<div id="overlay"></div>');
		$('#overlay').css({
				display: 'none',
				position: 'absolute',
				top:0,
				left: 0,
				width: '100%',
				height: $(document).height(),
				zIndex: 1000,
				background: 'black url(images/shared/loading.gif) no-repeat center 300px'
			})
			.fadeIn(500, function() {
				// Retrieve the current theme.
				var theme = ele.attr('id');
				if (theme == "dark") {
					$('#switch-label').text("Dark");
					theme = "light";
				} else if (theme == "light") {
					$('#switch-label').text("Light");
					theme = "dark";
				}
				$.ajaxSetup({ cache: false });
				$.get('index_old.php?theme=' + theme + '&js',function(data) {
					ele.attr('id',data);
					$('#style').attr('href','css/' + data + '.css');
					newStyle.check(function() {
						$('#overlay').fadeOut(500, function() {
							$(this).remove();
						});
					});
				});
			});
		var newStyle = {
			init: function() {
				$('<div id="style-check" style="display:none"></div>').appendTo('body');
			},
			check: function(callback) {
				if ($('#style-check').width() == 2) {
					callback();
				} else {
					setTimeout(function() { newStyle.check(callback); }, 200);
				}
			}
		};
		newStyle.init();
	}

})(jQuery);