/*
-- Frame Box --
Version: 0.2 (beta)
Author: Steph.L
*/
;(function ( $, window, undefined ) {

	var frameBox = 'frameBox',
		document = window.document,
		defaults = {
			
			general: {
				overSizing: false,
				title: true,
				description: true
			},
		
			blockOption: {
				close: true,
				fullscreen: true
			},
			
			slideLoader: {
				color: '#ffffff',
				diameter: 40
			}

		};

	function frameBoxConstructor( element, o ) {
		var $this = this;
		
		this.element = element;

		this.o = $.extend(true, defaults, o) ;

		this._defaults = defaults;
		this._name = frameBox;

		this.init($this);
		
		//Empechage de selection
		$(this.element).css({
			'-webkit-touch-callout': 'none',
			'-webkit-user-select': 'none',
			'-khtml-user-select': 'none',
			'-moz-user-select': 'none',
			'-ms-user-select': 'none',
			'user-select': 'none',
			'cursor': 'pointer'
		});
	}

	frameBoxConstructor.prototype.init = function ($this) {
	
		var $thisElement = $(this.element),
			dataFbGroup = $thisElement.data('fbGroup');
			
		//Init group
		if(dataFbGroup){
			var thisElemNumber = $('body *[data-fb-group="'+dataFbGroup+'"]').index($thisElement);
			$thisElement.data('fbGroupNumber', thisElemNumber);
		}
	
		$thisElement.on('click',function(){
			//Création de la frameBox si elle n'existe pas
			if($('.frameBoxWrapper').length == 0){
				createFrameBox();
				//Création des options de la framebox
				createOptionFrameBox();
			} //Si elle existe on la met à jour
			else{
				updateFrameBox();
				updateoptionFrameBox();
			}
			//Si groupe on active la navigation
			if(dataFbGroup){
				setFrameBoxNavigation(dataFbGroup);
			}
			//On fait apparaitre la framebox
			showFrameBox();
			//On charge et on ajoute le contenu de la framebox en fonction de son type
			checkLoader($(this));
		});
	
		//Construction de la frameBox
		function createFrameBox(){
			var frameBoxWrapper = createElement('div', 'frameBoxWrapper'),
				frameBoxBackground = createElement('div', 'frameBoxBackground'),
				frameBoxContent = createElement('div', 'frameBoxContent'),
				scrollLeft = $(window).scrollLeft(),
				scrollTop = $(window).scrollTop();
				
			//CanvasLoader
			var slideLoader = createElement('div', 'slideLoader');
			slideLoader.attr('id','slideLoader')
			.appendTo(frameBoxWrapper);
			
			frameBoxBackground.on('click', hideFrameBox)
			.appendTo(frameBoxWrapper);
			
			frameBoxContent.appendTo(frameBoxWrapper);
			
			frameBoxWrapper.css({
				'-webkit-touch-callout': 'none',
				'-webkit-user-select': 'none',
				'-khtml-user-select': 'none',
				'-moz-user-select': 'none',
				'-ms-user-select': 'none',
				'user-select': 'none',
				'display': 'none',
				'top': scrollTop,
				'left': scrollLeft
			})
			.addClass('off')
			.appendTo('body');
			
			cl = new CanvasLoader('slideLoader');
			//CL Options
			cl.setColor($this.o.slideLoader.color);
			cl.setDiameter($this.o.slideLoader.diameter);
		}
		
		//Construction des options de la frameBox
		function createOptionFrameBox(){
			if($this.o.blockOption.close || $this.o.blockOption.fullscreen){
				var blockOptions = createElement('div', 'blockOptions');
				//Close
				if($this.o.blockOption.close){
					var optionClose = createElement('span', 'optionClose');
					
					optionClose.appendTo(blockOptions)
					.on("click", hideFrameBox);
				}
				//Fullscreen
				if($this.o.blockOption.fullscreen){
					$('.frameBoxWrapper').attr('id', 'frameBoxWrapper');
					var frameBoxWrapper = document.getElementById('frameBoxWrapper');
					if(frameBoxWrapper.requestFullScreen || frameBoxWrapper.webkitRequestFullScreen || frameBoxWrapper.mozRequestFullScreen){
						var optionFullscreen = createElement('span', 'optionFullscreen');
						
						optionFullscreen.appendTo(blockOptions)
						.on("click", function(){
							enterFullscreen(frameBoxWrapper);
						});
					}
				}
				blockOptions.appendTo('.frameBoxWrapper');
			}
		}
		
		//Request Fullscreen
		function enterFullscreen(frameBoxWrapper){
			if(frameBoxWrapper.requestFullScreen){
				frameBoxWrapper.requestFullScreen();
			}
			else if(frameBoxWrapper.webkitRequestFullScreen){
				frameBoxWrapper.webkitRequestFullScreen(frameBoxWrapper.ALLOW_KEYBOARD_INPUT);
			}
			else if(frameBoxWrapper.mozRequestFullScreen){ 
				frameBoxWrapper.mozRequestFullScreen();
			}
			else{
				alert('Votre navigateur ne supporte pas le mode plein $eamp;cran.');
			}
			if(frameBoxWrapper.requestFullScreen || frameBoxWrapper.webkitRequestFullScreen || frameBoxWrapper.mozRequestFullScreen){
				var $blockOptions = $('.frameBoxWrapper').find('.blockOptions'),
					scrollToTop = $(frameBoxWrapper).css('top');
				$blockOptions.fadeOut(500);
				$(frameBoxWrapper).css('top','0');
				$('.frameBoxBackground').off('click');
				$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(){
					if(document.fullscreen === false || document.mozFullScreen === false || document.webkitIsFullScreen === false){
						$(frameBoxWrapper).css('top', scrollToTop);
						$(window).scrollTop(scrollToTop.substring(0, scrollToTop.length - 2));
						$blockOptions.fadeIn(500);
						$('.frameBoxBackground').on('click', function(){
							hideFrameBox();
						});
					}
				});
			}
		}
		
		//Mise à jour de la frameBox
		function updateFrameBox(){
			var scrollLeft = $(window).scrollLeft(),
				scrollTop = $(window).scrollTop();
				
			$('.frameBoxWrapper').css({
				'top': scrollTop,
				'left': scrollLeft
			});
		}
		
		//Mise à jour des options
		function updateoptionFrameBox(){
			
		}
		
		//Navigation au sein d'un groupe
		function setFrameBoxNavigation(dataFbGroup){
			//création des boutons de navigation
			var blockNav = createElement('div', 'blockNav'),
				btnNext = createElement('span', 'btnNext'),
				btnPrev = createElement('span', 'btnPrev');
				
			btnNext.appendTo(blockNav)
			.on('click', function(){
				goToElem(dataFbGroup, 1);
			});
			btnPrev.appendTo(blockNav)
			.on('click', function(){
				goToElem(dataFbGroup, -1);
			});
			blockNav.appendTo($('.frameBoxWrapper'));

			//Action sur la frameBox via touche clavier
			$(window).on('keydown',function(e){
				if($('.frameBoxWrapper').hasClass('on')){
					e.preventDefault();
					switch (e.keyCode) {
						case 27: // echap
							hideFrameBox();
							break;
						case 37: // flèche gauche
							goToElem(dataFbGroup, -1);
							break;
						case 39: // flèche droite
							goToElem(dataFbGroup, 1);
							break;
					}
				}
			});
		}
		
		//Go to
		function goToElem(groupName, direction){
			var thisElemNumber = $('.frameBoxContent').children().data('fbGroupNumber'),
				groupTotal = $('body *[data-fb-group="'+groupName+'"]'),
				groupTotalElem = groupTotal.length - 1,
				nextElem = groupTotal.eq(thisElemNumber + direction);
			
			if(thisElemNumber + direction > groupTotalElem){
				nextElem = groupTotal.eq(0);
			}
			else if(thisElemNumber + direction < 0){
				nextElem = groupTotal.eq(groupTotalElem);
			}
			
			$('.frameBoxContent').empty()
			.width('auto')
			.height('auto');
			
			checkLoader(nextElem);
		}
		
		//Vidage de la frameBox
		function cleanFrameBox(){
			$('.frameBoxContent').empty()
			.width('auto')
			.height('auto')
			.removeData('fbSize');
			$('.blockNav').empty().remove();
			$thisElement.trigger('frameBoxClosed');
		}
		
		//Récupération et insertion du contenu dans la frameBox
			//Element
			function addToFrameBox(thisElem){
				var newContent = thisElem.clone(true);
				
				newContent.off('click')
				.removeData('fbGroup')
				.removeAttr('data-fb-group')
				.appendTo('.frameBoxContent');
				
				if($('.frameBoxContent').find(newContent).length != 0){
					//On positionne le contenu de la frameBox
					setFrameBoxContentPosition();
				}
			}
			//Fichier
			function loadFileToFrameBox(thisElem, fileToLoad, fbGroupNumber){
				$('.frameBoxContent').load(fileToLoad, function(){
					$(this).children().data('fbGroupNumber', fbGroupNumber);
					resizeAndReplace(thisElem, $(this));
				})
				.css('overflow', 'auto');
			}
			//Page externe
			function loadSiteToFrameBox(thisElem, fileToLoad, fbGroupNumber){
				var thisIframe = createElement('iframe')
					thisIframeContainer = createElement('div', 'iframeContainer'),
					$frameBoxContent = $('.frameBoxContent');				
				thisIframe.attr({
					'id': 'fbIframe',
					'frameborder': '0',
					'src': fileToLoad
				})
				.appendTo(thisIframeContainer);
				thisIframeContainer.data('fbGroupNumber', fbGroupNumber)
				.appendTo($frameBoxContent);
				$frameBoxContent.css('overflow', 'hidden');
				resizeAndReplace(thisElem, $frameBoxContent);
			}
			//Image
			function loadImgToFrameBox(thisElem, dataFbImg, fbGroupNumber, secondLoad){
				var newImg = createElement('img');
				if(secondLoad){
					dataFbImg = dataFbImg+'?'+(new Date()).getTime();
				}
				newImg.attr('src',dataFbImg)
				.data({
					'thisType': 'img',
					'fbGroupNumber': fbGroupNumber
				})
				.imagesLoaded({
					fail: function($images, $proper, $broken){
						if(!secondLoad){
							newImg = null;
							loadImgToFrameBox(thisElem, dataFbImg, fbGroupNumber, true)
						}
						else{
							hideFrameBox();
						}
					},
					done: function($images){
						newImg.appendTo('.frameBoxContent');
						$('.frameBoxContent').css('overflow', 'hidden');
						resizeAndReplace(thisElem, $('.frameBoxContent'));
						console.log($this.o.general.description);
						if($this.o.general.title){
							addInfos(thisElem, 'title');
						}
						if($this.o.general.description){
							addInfos(thisElem, 'description');
						}
					}
				});
			}
			//fonction globale / type de fichier
			function checkLoader(thisElem){
				cl.show();
				var fbGroupNumber = thisElem.data('fbGroupNumber'),
					dataFbSrc = thisElem.data('fbSrc');
				if(!dataFbSrc){
					addToFrameBox(thisElem);
				}
				else if(dataFbSrc){
					if(checkType(dataFbSrc, 'img') == 'img'){
						loadImgToFrameBox(thisElem, dataFbSrc, fbGroupNumber);
					}
					else if(checkType(dataFbSrc, 'site') == 'site' || checkType(dataFbSrc, 'pdf') == 'pdf'){
						loadSiteToFrameBox(thisElem, dataFbSrc, fbGroupNumber);
					}
					else{
						loadFileToFrameBox(thisElem, dataFbSrc, fbGroupNumber);
					}
				}
			}
			//image ou fichier ?!
			function checkType(dataFbSrc, typeTest){
				if(typeTest == 'img'){
					var pattern = /\.[0-9a-z]+$/i,
						listType = new Array('jpg','jpeg','gif','png');
					return checkThisType(pattern, listType);
				}
				else if(typeTest == 'site'){
					var pattern = /^https?:/,
						listType = new Array('http:','https:');
					return checkThisType(pattern, listType);
				}
				else if(typeTest == 'pdf'){
					var pattern = /\.[0-9a-z]+$/i,
						listType = new Array('pdf');
					return checkThisType(pattern, listType);
				}
				else{ return false; }
				
				function checkThisType(pattern, listType){
					var getExt = (dataFbSrc.toLowerCase()).match(pattern);
					if(getExt){
						for(i=0 ; i<listType.length ; i++){
							if(getExt[0].match(listType[i])){
								return typeTest;
							}
							else{ return false; }
						}
					} else{ return false; }
				}
			}
			//resize & position frameBoxContent
			function resizeAndReplace(thisElem, loadElem){
				if(thisElem.data('fbSize')){
					var dataFbMaxSize = (thisElem.data('fbSize')).split(/,/);
					loadElem.data('fbSize', thisElem.data('fbSize'));
					resizeFrameBoxContent(dataFbMaxSize[0], dataFbMaxSize[1]);
				}
				else{
					resizeFrameBoxContent();
				}
				//On positionne le contenu de la frameBox
				setFrameBoxContentPosition();
			}
		//Resize
		function resizeFrameBoxContent(maxWuser, maxHuser){
			var windowWidth = $(window).width(),
				windowHeight = $(window).height(),
				currW = $('.frameBoxContent').innerWidth(),
				currH = $('.frameBoxContent').innerHeight();
				
			if(!$this.o.general.overSizing){
				//On récupère la taille original de l'image
				if($('.frameBoxContent img').length == 1){
					var img_tmp = new Image();
					img_tmp.src = $('.frameBoxContent img').attr('src');
					currW = img_tmp.width;
					currH = img_tmp.height;
				}
			}
			
			if(maxWuser && maxHuser){
				if(maxWuser > windowWidth - 50 || maxHuser > windowHeight - 50){
					var maxW = windowWidth - 50,
						maxH = windowHeight - 50,
						ratio = Math.min( maxW/currW, maxH/currH ),
						newW = Math.ceil(currW * ratio),
						newH = Math.ceil(currH * ratio);
				}
				else{
					if(maxWuser == 0){
						var maxW = windowWidth - 50;
					}
					else{
						var maxW = maxWuser;
					}
					if(maxHuser == 0){
						var maxH = windowHeight - 50;
					}
					else{
						var maxH = maxHuser;
					}
					//
					var ratio = Math.min( maxW/currW, maxH/currH );
					if(maxWuser != 0){
						var newW = maxW;
					}
					else{
						var newW = Math.ceil(currW * ratio);
					}
					if(maxHuser != 0){
						var newH = maxH;
					}
					else{
						var newH = Math.ceil(currH * ratio);
					}
				}
			}
			else{
				var maxW = windowWidth - 50,
					maxH = windowHeight - 50,
					ratio = Math.min( maxW/currW, maxH/currH ),
					newW = Math.ceil(currW * ratio),
					newH = Math.ceil(currH * ratio);
					if(!$this.o.general.overSizing){
						if(newW > currW || newH > currH){
							newW = currW,
							newH = currH;
						}
					}
			}
			
			$('.frameBoxContent').width(newW)
			.height(newH)
			.children().not('.frameBoxContentInfos').width('100%')
			.height('100%');
			
			if($('.frameBoxContent').children('.iframeContainer')){
				$('.frameBoxContent').find('.iframeContainer #fbIframe').attr({
					'width': '100%',
					'height': '100%'
				});
			}
		}

		//Ajout title + description pour une image
		function addInfos(thisElem,type){
			var title = $.trim(thisElem.data('fbTitle')),
				desc = $.trim(thisElem.data('fbDesc'));

			if($('.frameBoxContentInfos').length == 0){
				var frameBoxContentInfos = createElement('div', 'frameBoxContentInfos');
			}
			else{
				var frameBoxContentInfos = $('.frameBoxContentInfos');
			}

			if(title.length > 0 && type == 'title'){
				var $title = (createElement('h2','fbTitle')).text(title);
				frameBoxContentInfos.append($title);
			}
			if(desc.length > 0 && type == 'description'){
				var $desc = (createElement('p','fbDesc')).text(desc);
				frameBoxContentInfos.append($desc);
			}

			if(desc.length > 0 || title.length > 0){
				frameBoxContentInfos.appendTo($('.frameBoxContent'));
			}
		}
		
		//recentrage du contenu de la framebox
		function setFrameBoxContentPosition(){
			var $frameBoxContent = $('.frameBoxContent'),
				contentWidth = $frameBoxContent.width(),
				contentHeight = $frameBoxContent.height(),
				newContentMarginLeft = Math.round(($(window).width() - contentWidth)/2),
				newContentMarginTop = Math.round(($(window).height() - contentHeight)/2);
			
			$frameBoxContent.css({
				'top': newContentMarginTop,
				'left': newContentMarginLeft
			});
			
			cl.hide();
		}
		
		//Apparition de la frameBox
		function showFrameBox(){
			$('body').css('overflow','hidden');
			$('.frameBoxWrapper').fadeIn(250,function(){
				$(this).removeClass('off').addClass('on');
				$thisElement.trigger('frameBoxOpen');
			});
		}
		
		//Disparition de la frameBox
		function hideFrameBox(){
			$('.frameBoxWrapper').removeClass('on').addClass('off')
			.fadeOut(250,function(){
				$('body').css('overflow','auto');
				cleanFrameBox();
			});
		}
		

		//Resize on repositionne / redimensionne
		var currentHeight = $(window).height();
		var currentWidth = $(window).width();

		$(window).on('resize',function(event){
		   var windowHeight = $(window).height();
		   var windowWidth = $(window).width();

			if(currentHeight == undefined || currentHeight != windowHeight || currentWidth == undefined || currentWidth != windowWidth){

				if($('.frameBoxWrapper').hasClass('on')){
					if($('.frameBoxContent').data('fbSize')){
						var dataFbMaxSize = ($('.frameBoxContent').data('fbSize')).split(/,/);
						resizeFrameBoxContent(dataFbMaxSize[0], dataFbMaxSize[1]);
					}
					else{
						resizeFrameBoxContent();
					}
					setFrameBoxContentPosition();
				}

				currentHeight = windowHeight;
				currentWidth = windowWidth;
			}
		});
		
		//////////OUTILS//////////
		//CreateElement
		function createElement(elemType, elemName){
			var newElem = document.createElement(elemType);
			
			if(elemName){
				$(newElem).addClass(elemName);
			}
			
			return $(newElem);
		}
		
	};
	
	$.fn[frameBox] = function ( o ) {
		return this.each(function () {
			if (!$.data(this, 'plugin_' + frameBox)) {
				$.data(this, 'plugin_' + frameBox, new frameBoxConstructor( this, o ));
			}
		});
	}

}(jQuery, window));

//ImgLoader
(function(c,n){var l="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function m(){var b=c(i),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function j(b,a){b.src===l||-1!==c.inArray(b,k)||(k.push(b),a?h.push(b):i.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),o&&d.notifyWith(c(b),[a,e,c(i),c(h)]),e.length===k.length&&(setTimeout(m),e.unbind(".imagesLoaded")))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():
0,o=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),k=[],i=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",function(b){j(b.target,"error"===b.type)}).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)j(a,e.isBroken);else if(a.complete&&a.naturalWidth!==n)j(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=l,a.src=d}):m();return d?d.promise(g):
g}})(jQuery);