/**
 <b>content slider</b>. with custom content and elements based on bootstrap modals.
*/
(function($ , undefined) {
	var $window = $(window);

	function aside(modal, settings) {
		var self = this;
	
		var $modal = $(modal);
		var placement = 'right', vertical = false;
		var hasfade = $modal.hasclass('fade');//bootstrap enables transition only when modal is ".fade"

		var attrib_values = ace.helper.getattrsettings(modal, $.fn.ace_aside.defaults);
		this.settings = $.extend({}, $.fn.ace_aside.defaults, settings, attrib_values);
		
		//if no scroll style specified and modal has dark background, let's make scrollbars 'white'
		if(this.settings.background && !settings.scroll_style && !attrib_values.scroll_style) { 
			this.settings.scroll_style = 'scroll-white no-track';
		}

		
		this.container = this.settings.container;
		if(this.container) {
			try {
				if( $(this.container).get(0) == document.body ) this.container = null;
			} catch(e) {}
		}
		if(this.container) {
			this.settings.backdrop = false;//no backdrop when inside another element?
			$modal.addclass('aside-contained');
		}

		
		var dialog = $modal.find('.modal-dialog');
		var content = $modal.find('.modal-content');
		var delay = 300;
		
		this.initiate = function() {
			modal.classname = modal.classname.replace(/(\s|^)aside\-(right|top|left|bottom)(\s|$)/ig , '$1$3');

			placement = this.settings.placement;
			if(placement) placement = $.trim(placement.tolowercase());
			if(!placement || !(/right|top|left|bottom/.test(placement))) placement = 'right';

			$modal.attr('data-placement', placement);
			$modal.addclass('aside-' + placement);
			
			if( /right|left/.test(placement) ) {
				vertical = true;
				$modal.addclass('aside-vc');//vertical
			}
			else $modal.addclass('aside-hz');//horizontal
			
			if( this.settings.fixed ) $modal.addclass('aside-fixed');
			if( this.settings.background ) $modal.addclass('aside-dark');
			if( this.settings.offset ) $modal.addclass('navbar-offset');
			
			if( !this.settings.transition ) $modal.addclass('transition-off');
			
			$modal.addclass('aside-hidden');

			this.insidecontainer();
			
			/////////////////////////////
			
			dialog = $modal.find('.modal-dialog');
			content = $modal.find('.modal-content');
			
			if(!this.settings.body_scroll) {
				//don't allow body scroll when modal is open
				$modal.on('mousewheel.aside dommousescroll.aside touchmove.aside pointermove.aside', function(e) {
					if( !$.contains(content[0], e.target) ) {
						e.preventdefault();
						return false;
					}
				})
			}
			
			if( this.settings.backdrop == false ) {
				$modal.addclass('no-backdrop');
			}
		}
		
		
		this.show = function() {
			if(this.settings.backdrop == false) {
			  try {
				$modal.data('bs.modal').$backdrop.remove();
			  } catch(e){}
			}
	
			if(this.container) $(this.container).addclass('overflow-hidden');
			else $modal.css('position', 'fixed')
			
			$modal.removeclass('aside-hidden');
		}
		
		this.hide = function() {
			if(this.container) {
				this.container.addclass('overflow-hidden');
				
				if(ace.vars['firefox']) {
					//firefox needs a bit of forcing re-calculation
					modal.offsetheight;
				}
			}
		
			togglebutton();
			
			if(ace.vars['transition'] && !hasfade) {
				$modal.one('bstransitionend', function() {
					$modal.addclass('aside-hidden');
					$modal.css('position', '');
					
					if(self.container) self.container.removeclass('overflow-hidden');
				}).emulatetransitionend(delay);
			}
		}
		
		this.shown = function() {
			togglebutton();
			$('body').removeclass('modal-open').css('padding-right', '');
			
			if( this.settings.backdrop == 'invisible' ) {
			  try {
				$modal.data('bs.modal').$backdrop.css('opacity', 0);
			  } catch(e){}
			}

			var size = !vertical ? dialog.height() : content.height();
			if(!ace.vars['touch']) {
				if(!content.hasclass('ace-scroll')) {
					content.ace_scroll({
							size: size,
							reset: true,
							mousewheellock: true,
							lockanyway: !this.settings.body_scroll,
							styleclass: this.settings.scroll_style,
							'observecontent': true,
							'hideonidle': !ace.vars['old_ie'],
							'hidedelay': 1500
					})
				}
			}
			else {
				content.addclass('overflow-scroll').css('max-height', size+'px');
			}

			$window
			.off('resize.modal.aside')
			.on('resize.modal.aside', function() {
				if(!ace.vars['touch']) {
				  content.ace_scroll('disable');//to get correct size when going from small window size to large size
					var size = !vertical ? dialog.height() : content.height();
					content
					.ace_scroll('update', {'size': size})
					.ace_scroll('enable')
					.ace_scroll('reset');
				}
				else content.css('max-height', (!vertical ? dialog.height() : content.height())+'px');
			}).triggerhandler('resize.modal.aside');
			
			
			///////////////////////////////////////////////////////////////////////////
			if(self.container && ace.vars['transition'] && !hasfade) {
				$modal.one('bstransitionend', function() {
					self.container.removeclass('overflow-hidden')
				}).emulatetransitionend(delay);
			}
		}
		
		
		this.hidden = function() {
			$window.off('.aside')
			//$modal.off('.aside')
			//			
			if( !ace.vars['transition'] || hasfade ) {
				$modal.addclass('aside-hidden');
				$modal.css('position', '');
			}
		}
		
		
		this.insidecontainer = function() {
			var container = $('.main-container');

			var dialog = $modal.find('.modal-dialog');
			dialog.css({'right': '', 'left': ''});
			if( container.hasclass('container') ) {
				var flag = false;
				if(vertical == true) {
					dialog.css( placement, parseint(($window.width() - container.width()) / 2) );
					flag = true;
				}

				//strange firefox issue, not redrawing properly on window resize (zoom in/out)!!!!
				//--- firefix is still having issue!
				if(flag && ace.vars['firefox']) {
					ace.helper.redraw(container[0]);
				}
			}
		}
		
		this.flip = function() {
			var flipsides = {right : 'left', left : 'right', top: 'bottom', bottom: 'top'};
			$modal.removeclass('aside-'+placement).addclass('aside-'+flipsides[placement]);
			placement = flipsides[placement];
		}

		var togglebutton = function() {
			var btn = $modal.find('.aside-trigger');
			if(btn.length == 0) return;
			btn.toggleclass('open');
			
			var icon = btn.find(ace.vars['.icon']);
			if(icon.length == 0) return;
			icon.toggleclass(icon.attr('data-icon1') + " " + icon.attr('data-icon2'));
		}
		

		this.initiate();
		
		if(this.container) this.container = $(this.container);
		$modal.appendto(this.container || 'body'); 
	}


	$(document)
	.on('show.bs.modal', '.modal.aside', function(e) {
		$('.aside.in').modal('hide');//??? hide previous open ones?
		$(this).ace_aside('show');
	})
	.on('hide.bs.modal', '.modal.aside', function(e) {
		$(this).ace_aside('hide');
	})
	.on('shown.bs.modal', '.modal.aside', function(e) {
		$(this).ace_aside('shown');
	})
	.on('hidden.bs.modal', '.modal.aside', function(e) {
		$(this).ace_aside('hidden');
	})
	
	

	
	$(window).on('resize.aside_container', function() {
		$('.modal.aside').ace_aside('insidecontainer');
	});
	$(document).on('settings.ace.aside', function(e, event_name) {
		if(event_name == 'main_container_fixed') $('.modal.aside').ace_aside('insidecontainer');
	});

	$.fn.aceaside = $.fn.ace_aside = function (option, value) {
		var method_call;

		var $set = this.each(function () {
			var $this = $(this);
			var data = $this.data('ace_aside');
			var options = typeof option === 'object' && option;

			if (!data) $this.data('ace_aside', (data = new aside(this, options)));
			if (typeof option === 'string' && typeof data[option] === 'function') {
				if(value instanceof array) method_call = data[option].apply(data, value);
				else method_call = data[option](value);
			}
		});

		return (method_call === undefined) ? $set : method_call;
	}
	
	$.fn.ace_aside.defaults = {
		fixed: false,
		background: false,
		offset: false,
		body_scroll: false,
		transition: true,
		scroll_style: 'scroll-dark no-track',
		container: null,
		backdrop: false,
		placement: 'right'
     }

})(window.jquery);