/*

 *

 *	jQuery Sliding Menu Plugin

 *	Mobile app list-style navigation in the browser

 *

 *	Written by Ali Zahid

 *	http://designplox.com/jquery-sliding-menu

 *

 */



(function($)

{

	var usedIds = [];



	$.fn.slidingMenu = function(options)

	{

		var selector = this.selector;

		var rtl = false;

		if($('html').data('textdirection') == "rtl"){

			rtl = true;

		}



		var settings = $.extend(

		{

			dataJSON: false,

			backLabel: 'Back'



		}, options);



		return this.each(function()

		{

			var self = this,

				menu = $(self),

				data;



			if (menu.hasClass('sliding-menu'))

			{

				updateWidth();

				return;

			}



			var menuWidth = menu.outerWidth();





			// Updated menu widh

			//var menuWidth = menu[0].offsetWidth;



			if (settings.dataJSON)

			{

				data = processJSON(settings.dataJSON);

			}

			else

			{

				data = process(menu);

			}



			menu.empty().addClass('sliding-menu');



			var rootPanel;



			if (settings.dataJSON)

			{

				$(data).each(function(index, item)

				{

					var panel = $('<ul></ul>');



					if (item.root)

					{

						rootPanel = '#' + item.id;

					}



					panel.attr('id', item.id);

					panel.addClass('menu-panel');

					panel.width(menuWidth);



					$(item.children).each(function(index, item)

					{

						var link = $('<a></a>');

						link.attr('class', item.styleClass);

						link.attr('href', item.href);

						link.text(item.label);



						var li = $('<li></li>');



						li.append(link);



						panel.append(li);



					});



					menu.append(panel);



				});

			}

			else

			{

				$(data).each(function(index, item)

				{

					var panel = $(item);



					if (panel.hasClass('menu-panel-root'))

					{

						rootPanel = '#' + panel.attr('id');

					}



					panel.width(menuWidth);



					menu.append(item);



				});

			}



			rootPanel = $(rootPanel);

			rootPanel.addClass('menu-panel-root');



			var currentPanel = rootPanel;



			menu.height(rootPanel.height());



			var wrapper = $('<div></div>').addClass('sliding-menu-wrapper').width(data.length * menuWidth);



			menu.wrapInner(wrapper);



			wrapper = $('.sliding-menu-wrapper', menu);



			$('a', self).on('click', function(e)

			{

				var href = $(this).attr('href'),

					label = $(this).text();



				if (wrapper.is(':animated'))

				{

					e.preventDefault();



					return;

				}



				if (href == '#')

				{

					e.preventDefault();

				}

				else if (href.indexOf('#menu-panel') == 0)

				{

					var target = $(href),

						isBack = $(this).hasClass('back'),

						marginLeft,

						marginRight;

					if (rtl === true){

						marginRight = parseInt(wrapper.css('margin-right'));

					}

					else{

						marginLeft = parseInt(wrapper.css('margin-left'));

					}



					// Update menu width on menu toggle

					var menuWidth = menu.width();



					// Update current panel when menu is reset

					if($(this).closest('ul').hasClass('menu-panel-root')){



						currentPanel = rootPanel;

					}



					if (isBack)

					{

						if (href == '#menu-panel-back')

						{

							target = currentPanel.prev();

						}



						if(rtl === true)

							properties = {marginRight: marginRight + menuWidth};

						else

							properties = {marginLeft: marginLeft + menuWidth};

						wrapper.stop(true, true).animate(properties, 'fast');

					}

					else

					{

						target.insertAfter(currentPanel);



						if (settings.backLabel === true)

						{

							$('.back', target).html('<i class="la la-arrow-circle-o-left back-in"></i>'+label);

						}

						else

						{

							$('.back', target).text(settings.backLabel);

						}



						if(rtl === true)

							properties = {marginRight: marginRight - menuWidth};

						else

							properties = {marginLeft: marginLeft - menuWidth};

						wrapper.stop(true, true).animate(properties,'fast');

					}



					currentPanel = target;



					menu.stop(true, true).animate(

					{

						height: target.height()



					}, 'fast');



					e.preventDefault();

				}



			});



			return this;



		});



		function process(data)

		{

			var ul = $('ul', data),

				panels = [];



			$(ul).each(function(index, item)

			{

				var panel = $(item),

					handler = panel.prev(),

					id = getNewId();



				if (handler.length == 1)

				{

					handler.addClass('nav-has-children dropdown-item').attr('href', '#menu-panel-' + id);

					handler.append('<i class="ft-arrow-right children-in"></i>')

				}



				panel.attr('id', 'menu-panel-' + id);



				if (index == 0)

				{

					panel.addClass('menu-panel-root');

				}

				else

				{

					panel.addClass('menu-panel');



					var li = $('<li></li>'),

						back = $('<a></a>').addClass('nav-has-parent back primary dropdown-item').attr('href', '#menu-panel-back');



					panel.prepend(back);

				}



				panels.push(item);



			});



			return panels;

		}



		function processJSON(data, parent)

		{

			var root = { id: 'menu-panel-' + getNewId(), children: [], root: (parent ? false : true) },

				panels = [];



			if (parent)

			{

				root.children.push(

				{

					styleClass: 'back',

					href: '#' + parent.id



				});

			}



			$(data).each(function(index, item)

			{

				root.children.push(item);



				if (item.children)

				{

					var panel = processJSON(item.children, root);



					item.href = '#' + panel[0].id;

					item.styleClass = 'nav';



					panels = panels.concat(panel);

				}



			});



			return [root].concat(panels);

		}



		function getNewId()

		{

			var id;



			do

			{

				id = Math.random().toString(36).substring(3, 8);

			}

			while (usedIds.indexOf(id) >= 0);



			usedIds.push(id);



			return id;

		}



		function updateWidth(){



			var wrapper = $('.sliding-menu-wrapper'),

			menuPanels = $('.sliding-menu-wrapper ul');



			if(menuPanels.length){

				setTimeout(function(){

					var menuWidth = $(selector).width();



					// Update wrapper width

					wrapper.width(menuPanels.length * menuWidth);



					menuPanels.each(function(index, item)

					{

						var panel = $(item);



						panel.width(menuWidth);



					});





					wrapper.css('margin-left','');

				}, 300);

			}

		}



	};



} (jQuery));

