/*!
 * jQuery Radmenu (Radial Menu) Plugin
 * version: 1.0.0 (14-MAY-2011)
 * @requires v1.4.2 or later
 * 
 * Author: Nirvana Tikku - ntikku@gmail.com - @ntikku
 * Documentation:
 * 		http://www.tikku.com/jquery-radmenu-plugin
 * 
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html 
 * 
 */

;(function($) {

	// radmenu namespace

	var RADMENU = ".radmenu", // events are radmenu.{event} - guarantee no NS collision

		OPTS = "options"+RADMENU,

		PREVOPTS = "prevoptions"+RADMENU,

		RADMENU_CLASS = "ui-radmenu-parent"; 

	// private defaults
	var defaults = {

		// radial menu container properties

		listClass: "list",

		itemClass: "item",

		activeItemClass: "active",

		// active item selection properties

		selectEvent: null, // click, mouseenter etc

		onSelect: function($selected){},

		// initial setup properties

		radius: 10, // in pixels

		angleOffset: 0, // in degrees

		centerX: 0,

		centerY: 0,

		// animation properties

		animSpeed: 500,

		animEasing: "swing",

		// scaling properties and method

		initialScale: 1,

		scaleAnimSpeed: 0,

		scaleAnimEasing: "swing",

		scaleAnimOpts: {},

		// example onScaleItem: $item.css("font-size", factor+"em");
		onScaleItem: function($item, factor, coords){},

		// public events 

		afterAnimation: function($m){},

		onShow: function($items){$items.show();},

		onHide: function($items){$items.hide();},

		onNext: function($items){return true;},

		onPrev: function($items){return true;},

		// rotation property and fine-tuning event 

		rotate: false,

		getRotation: function(degrees, index, numItems){return degrees;}

	};

	// radial menu container setup defaults
	$.radmenu = {

		container: {

			html: "<div></div>",

			css: { "position": "relative" },

			clz: "radial_div",

			itemClz: "radial_div_item"

		}

	};

	/**
	 * jQuery Radmenu Plugin
	 * 	@params 
	 * 		> input, dealt with by type
	 * 	if empty - assumes initialization
	 * 	if object - assumes initialization
	 * 	if string - assumes trigger method
	 * 	if number - select a particular menu item
	 */ 
	$.fn.radmenu = function(input, param){

		try {

			var $this = $(this);

			var type = typeof input;

			if(arguments.length==0 || type=="object") 

				return init($this, input);

			else if(type=="string")

				return (input=="items" || input=="opts") ?
					$this.triggerHandler(input+RADMENU) :
					$this.trigger(input+RADMENU, param || null);

			else if(type=="number")

				return $this.trigger("select"+RADMENU,input);

		} catch (e) { 

			return "error : "+e; 

		}

	};

	/**
	 * private :: init fn
	 * @params
	 * 	$menu - the jQuery obj / array w/ menu target
	 *  opts - options object, to be merged with defaults
	 */
	function init($menu, opts){

		var o = $.extend({}, defaults, opts);

		return $menu.each(function(m){

			var $this = $(this);

			if(!$this.hasClass(RADMENU_CLASS)) {

				var $list = $this.find("."+o.listClass);

				$list.find("."+o.itemClass).hide(); // ensure its hidden

				// set the options within the data for the elem & bind evts
				$this.data(OPTS, updateRadius(o, o.initialScale, o.radius));

				for(e in MENU) 
					$this.bind(e+RADMENU, $this, MENU[e]);

				$this.addClass(RADMENU_CLASS);

			}

		});

	};

	/**
	 * selects a menu item - this method provides
	 * functionality for nested radial menus
	 * @param 
	 * 	evt - the event object
	 * triggers select event on radmenu container
	 * 	using the index of the 'target object'
	 */
	function selectMenuitem(evt){ 

		var $this = $(this);

		var $element = $(evt.target);

		var container = $.radmenu.container;

		if(!$element.hasClass(container.itemClz))
			$element = $element.closest("."+container.itemClz);

		var isInNested = $element.parents("."+container.itemClz).length>0;

		var index = $element.index();

		if(!isInNested)
			$this.parents("."+container.clz).radmenu(index);

		else 
			$this.radmenu(index);

		cancelBubble(evt);

	};

	/**
	 * cancel event bubbling - x-browser friendly
	 * @param
	 * 	evt - the event object
	 */
	function cancelBubble(evt){

		if(!$.support.opacity) 
			window.event.cancelBubble = true;

		else 
			evt.stopPropagation();

	};

	/**
	 * All the events bound to the radial menu instance
	 */
	var MENU = {
		opts: function(evt) { 

			return getMenu(evt).opts;

		},
		show: function(evt, fn){ // fn = user input onshow

			var $m = getMenu(evt);

			var container = $.radmenu.container;

			// clear any existing radial menus within the menu
			$m.menu.find("."+container.clz).remove();

			// grab the desired menu items to be used in building the radmenu
			var $menuitems = $m.menu.find("."+$m.opts.itemClass);

			// create a div that will be the radmenu & create the HTML for the items
			var $radialMenu = $(container.html)
								.addClass(container.clz)
								.css(container.css)
								.html(buildMenuHTML($menuitems, $m.opts));

			// assign a selection event if the user has specified something
			var $menuitems = $radialMenu.find("."+container.itemClz);

			if($m.opts.selectEvent!=null)
				$menuitems.bind($m.opts.selectEvent,selectMenuitem);

			// append the radmenu items inside the menu 
			$radialMenu.appendTo($m.menu);

			if(typeof(fn) == "function") 
				fn($menuitems); // allow passing in a method

			else
				$m.opts.onShow($menuitems); // user can do what they want

			cancelBubble(evt);

		},
		hide: function(evt){ 

			var $m = getMenu(evt);

			// remove the radmenu that was built and appended inside the menu
			var $menu = $m.menu.find("."+$.radmenu.container.clz);

			$m.opts.onHide($menu.find("."+$.radmenu.container.itemClz));

			$menu.remove();

			cancelBubble(evt);

		},
		select: function(evt, selectIndex){

			var $m = getMenu(evt);

			// with a specific index specified, grab the item
			var $selected = $($m.raditems().get(selectIndex));

			// remove the active class on the elements siblings
			$selected.siblings().removeClass($m.opts.activeItemClass);

			// add the active class on the selected item
			$selected.addClass($m.opts.activeItemClass);

			// pass the selected item to a customizable function
			$m.opts.onSelect($selected);

			cancelBubble(evt);

		},
		next: function(evt){ // clockwise

			var $m = getMenu(evt);

			if( !$m.opts.onNext($m) ) return;

			// switch the first and last items and then animate
			switchItems($m, $m.raditems().length-1, 0);

		},
		prev: function(evt){ // anticlockwise

			var $m = getMenu(evt);

			if( !$m.opts.onPrev($m) ) return;

			// switch the last and first items and then animate
			switchItems($m, 0, $m.raditems().length-1);

		},
		shuffle: function(evt){

			var $m = getMenu(evt);

			var len = $m.raditems().length;

			// swap some random item with another random item, and add some shuffling effects
			switchItems($m, rnd(len), rnd(len));

		},
		destroy: function(evt){

			var $m = getMenu(evt);

			$m.menu.data(OPTS, null)
				.data(PREVOPTS, null)
				.removeClass(RADMENU_CLASS)
				.unbind(RADMENU);

			return $m.menu;

		},
		items: function(evt){

			return getMenu(evt).raditems();

		},
		scale: function(evt, factor){

			var $m = getMenu(evt);

			if(factor){

				var o = $m.opts;

				var container = $.radmenu.container;

				var prevOpts = $m.menu.data(PREVOPTS);

				if(!prevOpts) $m.menu.data(PREVOPTS, prevOpts=o);

				// get the radial menu items
				var $items = $m.menu.find("."+container.itemClz);

				var updatedRadiusOpts = updateRadius(o, factor, prevOpts.radius);

				$m.menu.data(OPTS, updatedRadiusOpts); // save the radius for anim purposes

				$items.each(function(i){ // for each item update the x,y + css

					var $this = $(this);

					var coords = getCoords(i, $items.length, updatedRadiusOpts);

					var animOpts = {

						top: coords.top,

						left: coords.left 

					};

					if(typeof(o.scaleAnimOpts) == "object") {

						animOpts = $.extend({}, o.scaleAnimOpts, animOpts);

					}

					$this.animate(animOpts, o.scaleAnimSpeed, o.scaleAnimEasing);

					$m.opts.onScaleItem($this, factor, coords);

				});

			}

			return $m.menu;
		}
	};

	// simply multiples the radius by a factor
	function updateRadius(opts, radius, factor){

		return $.extend({},opts,{radius:(factor*radius)});

	};

	// random int offset 
	function rnd(i){

		return parseInt( Math.random() * i );

	};

	/**
	 * getMenu - this is a method that returns all
	 *	the required objects within a given method
	 *	that is subscribed to the radmenu object.
	 *	
	 * @params
	 * 	evt - the event object
	 * @return
	 * 	Object
	 * 		> menu - jQueryfied menu
	 * 		> opts - the options
	 * 		> raditems - the radial menu items
	 */
	function getMenu(evt){

		var $menu = evt.data;

		return {

			menu: $menu, 

			opts: $menu.data(OPTS),

			raditems: function(){

				// you will want to trigger raditems() if the contents get modified
				return $menu.find("."+$.radmenu.container.itemClz);

			}

		};
	};

	/**
	 * Switch Items -- this method is used in re-evaluating the (x,y) coords
	 * 	as a result of swapping the position of items. The intent with this
	 * 	is that the plugin will reoganize the items (in the container, 
	 *	as opposed to the original dom elements) such that the elements
	 *	positions, when selected, remains fixed around the circle.
	 *	Based on given indexes the items are swapped and then animated. The 
	 *	most typical case involves removing the first and swapping the last
	 *	and vice versa.
	 * 
	 * @params
	 * 	$m - the menu package
	 * 	remove - the index of the menuitem to replace in the swap
	 * 	add - the index of the menuitem to use in the swap (a placeholder)
	 */
	function switchItems($m, remove, add){

		if(remove==add) add = remove - 1; // ensure that we don't lose any items

		var $remove = $($m.raditems()[remove]); // grab the replacement item

		var toAddto = $m.raditems()[add]; // grab the placeholder 

		// insertion is dependent on index of items
		if(remove>add) 
			$remove.insertBefore(toAddto);

		else
		 	$remove.insertAfter(toAddto);

		animateWheel($m, (remove<add)); // posOffset = 5:neat, 10:fireworksesque, 15:subtleish

	};

	/**
	 * buildMenuHTML - returns string instead of objects
	 * 		for performance 
	 * 
	 * @params
	 * 	$menuitems - the jQueryified menu items
	 * 	opts - the radial menu's options
	 * @return
	 * 	String
	 * 		> each item is wrapped with an 
	 * 			absolute positioned div at an
	 * 			offset determined by it's location
	 * 			on a circle
	 */
	function buildMenuHTML($menuitems, opts){

		var ret = [];

		$menuitems.each(function(i){ // for each item we will want to build the HTML

			var $this = $(this);

			var coords = getCoords(i, $menuitems.length, opts); // each item has a position

			var rotationHTML = "transform:rotate("+coords.angle+"deg); ";

			ret.push("<div class='"+$.radmenu.container.itemClz+"' "); // outer container for the div

			// after getting the coordinates, absolute position element at (x,y)
			ret.push("style='");
			
			ret.push("position:absolute;display:none;");
			ret.push("left:"+coords.left+"px;");
			ret.push("top:"+coords.top+"px;");

			if(opts.rotate) {

				for(rot in XForm.opts)
					ret.push(XForm.opts[rot]+rotationHTML);

			}

			ret.push("'>");

			ret.push($this.html()); // append the HTML _within_ the user's defined 'item'

			ret.push("</div>");

		});

		return ret.join("");

	};

	/**
	 * Get the radians value of an angle given a 
	 * particular slice of the selection
	 * 
	 * 	@params
	 * 		iIdx - the instance index
	 * 		iNum - the number of menu items
	 */
	function getAngleAtIndex(iIdx, iNum){

		return 2 * Math.PI * parseFloat(iIdx/iNum); // radians

	};

	/**
	 * getCoords - returns coordinates for menuitems, as 
	 * 	well as an animation object with the appropriate rotation
	 *	as per config
	 * 
	 * 	@params
	 * 		iIdx - the instance index (1st, 2nd, 3rd, etc..)
	 * 		iNum - the number of menuitems to distribute
	 * 		oOpts - the options provided by the user customizations
	 * 		bClockwise - a flag for the animation object 
	 * 	@return
	 * 		Object - (x, y) coords & the angle in degrees
	 */
	function getCoords(iIdx, iNum, oOpts, bClockwise){

		var radius = oOpts.radius; // user specified radius

		var angle = getAngleAtIndex(iIdx, iNum);

		angle += toRadians(oOpts.angleOffset); // provide flexibility of angle

		//	assuming: hypotenuse (hyp) = radius
		//
		//	opposite	|\	hypotenuse
		//				| \
		//		90deg	|__\	(*theta* - angle)
		//				adjacent
		//
		//	x-axis offset: cos(theta) = adjacent / hypotenuse
		//		==> adjacent = left = cos(theta) * radius
		//	y-axis offset: sin(theta) = opposite / hypotenuse
		//		==> opposite = top = sin(theta) * radius

		var l = oOpts.centerX + ( Math.cos( angle ) * radius ) , // "left"
			// angle is rounded to 2dp to fix a bug
			t = oOpts.centerY + ( Math.sin( parseInt(angle*100)/100 ) * radius ); // "top"
		
		var degrees = oOpts.rotate ? oOpts.getRotation( angle * 180 / Math.PI, iIdx, iNum ) : 0;

		// NOTE: why not just simply rotate to the angle? buggy
		// the element that gets shifted cycles through an unnecessary revolution 
		// i.e. >360deg -> >0 deg
		var slice = oOpts.rotate ? ( getAngleAtIndex(1, iNum) * 180 / Math.PI ) : 0;

		var rotation = ( bClockwise==true ? "-=" : "+=" ) + slice;
		
		return {

			left: l, 

			top: t, 

			angle: degrees, 

			animObj:{

				left: l, 

				top: t, 

				radrotate: rotation

			} 

		}; // return the x,y coords

	};

	/**
	 * simple method to convert degrees to radians
	 */
	function toRadians(degrees){

		return degrees * Math.PI / 180;

	};

	/**
	 * animateWheel - performs animation on menu items within 
	 *	the container elements
	 * 
	 * @params
	 * 	$m - object holding menu & options
	 * 	iPosOffset - the position offset for the initial menuitem
	 * 	bClockwise - for the animation, clockwise or counter
	 */
	function animateWheel($m, bClockwise){

		// get the menu from the $m menu package
		var $menuitems = $m.raditems();

		// get a handle on the number of items
		var len = $menuitems.length;

		// for each item, we're going to animate left/top attributes
		$menuitems.each(function(i){

			var $this = $(this);

			// establish the new coordinates with a customizable offset
			var coords = getCoords(i, len, $m.opts, bClockwise);

			// playing with this is fun - this basically just
			// performs the animation with new coordinates 

			$this.animate(
				coords.animObj, 
				$m.opts.animSpeed, 
				$m.opts.animEasing, 
				function(){
					if(i==(len-1) ){
						// allow the user to do something after completing an animation
						$m.opts.afterAnimation($m);
					}
				}
			);
		});
	};

	/**
	 * Transform Utils
	 */
	var XForm = {};

	// local cache of the appropriate transform to use
	XForm.attr = undefined;

	// Safari, Chrome, FF 3.5+, IE 9+, and Opera 11+
	XForm.opts = ["","-webkit-","-moz-","-ms-","-o-"];
	XForm.cssattrs = ["","Webkit","Moz","ms","O"];

	/**
	 * Get the relevant CSS attr and cache it 
	 */
	XForm.getCSSAttr = function($elm){ 

		if( this.attr ) 
			return this.attr;

		return this.attr = (function(){

			for(var ii=0; ii<XForm.cssattrs.length; ii++){

				var opt = XForm.cssattrs[ii]+"Transform";

				if( $elm[0].style[opt] )
					return opt;

			}

			return "transform";

		})();

	};

	/**
	 * Deduce which transform is applicable
	 * and extract the attr's value
	 * 	@params
	 * 	  $elm - jQuerified element which the 
	 * 		css attribute is evaluated against
	 */
	XForm.getTransformValue = function($elm){

		return jQuery.style( $elm[0], XForm.getCSSAttr($elm) );

	};

	/**
	 * jQuery Proxy object
	 */
	var _ = {};

	_.cur = $.fx.prototype.cur;

	/**
	 * jQuery Proxy Method: 
	 * 	We need to override this method in order for the "rotate([x]deg)" 
	 * 	css value to be parsed and passed through to the step fn numerically 
	 * 
	 * Credit due: Zachary Johnson www.zachstronaut.com 
	 * 		from https://github.com/zachstronaut/jquery-animate-css-rotate-scale
	 */
    $.fx.prototype.cur = function() {

        if ( this.prop == "radrotate" ) {

			var $elm = $(this.elem);

			var style = XForm.getTransformValue($elm) || 'none';

	        if (style) {

                var m = style.match(/rotate\(([^)]+)\)/);

                if (m && m[1])	{

					return parseFloat( m[1] );

				}

            }

            return 0;

        }

        return _.cur.apply(this, arguments);

    };	

	//
	// use a custom animation property - radrotate
	//
	$.fx.step.radrotate = function(fx) {

		var $elm = $(fx.elem);

        $elm.css(XForm.getCSSAttr($elm), "rotate("+ fx.now +"deg)");

    };

})(jQuery);