/*
Versatile Touch Slider - jQuery Plugin
Author: Sergio Valle
http://codecanyon.net/user/srvalle
*/

(function($) {

    $.versatileTouchSlider = function(selector, settings) {
		// settings
		var config = {
			slideWidth: 550, // number or '100%'
			slideHeight: 208, // number or 'auto'
			showPreviousNext: true,
			currentSlide: 0,
			scrollSpeed: 500,
			autoSlide: false,
			autoSlideDelay: 5000,
			showPlayPause: true,
			showPagination: true,
			alignPagination: 'left',
			alignMenu: 'left',
			swipeDrag: true,
			sliderType: 'image_shelf', // image_shelf, image_banner, image_text, image_gallery
			pageStyle: 'numbers', // numbers, bullets, thumbnails
			onScrollEvent: function() {},
			ajaxEvent: function() {}
		};
		//parameters
		if ( settings ){$.extend(config, settings);}
		
		var slideWidth = config.slideWidth, slideHeight = config.slideHeight, showPreviousNext = config.showPreviousNext, 
			currentSlide = config.currentSlide, scrollSpeed = config.scrollSpeed, autoSlide = config.autoSlide, 
			autoSlideDelay = config.autoSlideDelay, showPlayPause = config.showPlayPause, showPagination = config.showPagination,
			alignPagination = config.alignPagination, alignMenu = config.alignMenu, swipeDrag = config.swipeDrag, sliderType = config.sliderType,
			pageStyle = config.pageStyle;
		
		var $sti_slider = $(selector + ' .sti_slider'),
			$sti_slide = $(selector + ' .sti_slide'),
			$totalSlides = $sti_slide.length,
			$sti_page = $(selector + ' .sti_page'),
			$sti_control = $(selector + ' .sti_control'),
			$sti_paginate = $(selector + ' .sti_paginate'),
			$sti_menu = $(selector + ' .sti_menu'),
			$sti_items = $(selector + " .sti_items"),
			$prod = $(selector + ' .sti_prod');
		
		var valueGlobal = 0;
		var dragging = false;
		if ($.browser.msie && parseInt($.browser.version) == 7) { var is_ie7 = true; }
		if ($.browser.msie && parseInt($.browser.version) == 8) { var is_ie8 = true; }
		
		$sti_items.show();
		var suppTrans = supportsTransitions();
		var touchSupport = 'ontouchstart' in window;
		//var orientation = Math.abs(window.orientation) == 90 || Math.abs(window.orientation) == -90 ? 'landscape' : 'portrait';
					
		
		// ------------------------------------------------------------
		// set width / height
		// ------------------------------------------------------------
		
		if (slideWidth == '100%') { slideWidth = $(selector).parent().width(); }	
		
		$(selector).width(slideWidth); //sti_container
		$sti_slider.width(slideWidth);
		$sti_slide.width(slideWidth);
		
		if (slideHeight != 'auto') {
			$sti_slider.height(slideHeight);
		}
		$sti_slide.height(slideHeight);
		
		
		// ------------------------------------------------------------
		// preload images
		// ------------------------------------------------------------
		
		if ($totalSlides > 0) {
				
			var slideHeightArr = Array();

			if (sliderType == 'image_shelf') { 
				$sti_slider.css({background: '#000 url(img/texture_01_dark.jpg)' });
			}
			if (sliderType == 'image_banner') {
				$sti_slide.css({background: 'none'});
			}
			if (sliderType == 'image_gallery') {
				$sti_slide.css({background: 'none'});
				$sti_slider.css({background: '#fff'});
			}
			
			setTimeout( function() { config.onScrollEvent.call(this, currentSlide) }, scrollSpeed);
			
			//$sti_slide.children('img').hide();
			$sti_slide.children('img').css({opacity:0})
			$sti_slide.children('.banner_title').hide();
			
			var countSlide = 0;
			var sld = $sti_slide.eq(countSlide);
			var intervalSlide;
			
			function preloadSlide() {
				
				//add icon preload
				$sti_slide.append('<div class="preload_32"></div>');
				$sti_slide.children('.preload_32').css( { 
					left: (sld.width() / 2) - 21, 
					top: (sld.height() / 2) - 21
				} );

				if (sliderType == 'image_banner') { 
					$sti_slide.children('.preload_32').css( 
						{ background:'url(img/preload_32.gif) center no-repeat', boxShadow:'none', border:'none' }) 
				}
				if (sliderType == 'image_gallery') { $sti_slide.children('.preload_32').css( { top: 20 }) }

				function nextPreloadSlide() {

					sld.imagesLoaded( function( $images, $proper, $broken ) {
						
						if ($proper.height() != null) {
							
							$(this).children('.preload_32').remove();
							
							$(this).children('img').css({display:'block', opacity:0}).stop().animate({ opacity:1 }, { duration: 400 });
							$(this).children('.banner_title').css({display:'block', opacity:0}).stop().delay(300).animate({ opacity:.8 }, { duration: 400 });
														
							var firstHeight;
							if (sliderType == 'image_shelf' || sliderType == 'image_text' || sliderType == 'image_gallery') {
								firstHeight = this.height();
								slideHeightArr.push(this.height()); //total slide height (shelf image group)
							} else if (sliderType == 'image_banner' && slideHeight != 'auto') {
								firstHeight = slideHeight;
								slideHeightArr.push(slideHeight);
							} else {
								firstHeight = $proper.height();
								slideHeightArr.push($proper.height()); //image only
							}
							
							if (countSlide == 0) {
								$sti_slider.stop().animate({ height: firstHeight }, { duration: 400 });
								
								if ($(window).width() < $sti_slider.width()) { 
									$(selector).trigger('resize');
								}
								if (autoSlide) initAutoSlide();
							}
							

							countSlide++;
							sld = $sti_slide.eq(countSlide);
							if (preloadSlideTimeout) clearTimeout(preloadSlideTimeout);
							preloadSlideTimeout = setTimeout(nextPreloadSlide, 500);
						}
					});
			
					if (countSlide > $totalSlides-1) {
						clearTimeout(preloadSlideTimeout);
						$(selector + ' .preload_32').remove();
						$sti_slide.children('img').show();
					}
				}//nextPreloadSlide
			
				preloadSlideTimeout = setTimeout(nextPreloadSlide, 100);
			}//preloadSlide

			var preloadSlideTimeout;
			preloadSlide();
			productsSetup();
			
		} else {
			return false;	
		}
		
		
		// ------------------------------------------------------------
		// products
		// ------------------------------------------------------------
		
		function productsSetup() {
			
			$prod.css({ opacity:0 });			
			var strAppend = '';
			
			for (var i=0; i < $prod.length; i++) {
				//animate
				var p = $prod.eq(i);
				var pLink = $prod.eq(i).children('.link');
				p.stop().delay(140*i).animate({ opacity: 1 }, { duration: 500 } );
				pLink.stop().delay(240*i).animate({ opacity: .8 }, { duration: 1000 } );					
				
				//link mouseover
				pLink.mouseover(function(e) {
					$(this).fadeTo("fast",.5);
					
					//tooltip for mobile device only
					if (touchSupport) {
						var tt = $(this).attr('title');
						if (tt != undefined) {
							$(selector).append('<div class="sti_tooltip">' + tt + '</div>');
							$('.sti_tooltip').css({ 
								top: $(this).offset().top - $('.sti_tooltip').height() - $(this).height() + 7,  
								left: $(this).offset().left - ($('.sti_tooltip').width() / 2) + 4,
								opacity: 0
							});
							$('.sti_tooltip').stop().animate({ opacity: .9 }, { duration: 500 });
						}
					}
				}).mouseout(function() {
					$(this).fadeTo("fast",.8);
					
					if (touchSupport) {
						$('.sti_tooltip').remove();
					}
				});
				
				//shadow/side effects
				var imgHeight = p.children('img').height();
				p.height(imgHeight);
				var imgWidth = p.children('img').width();
				p.width(imgWidth);
				pLink.css({ 
					bottom: (imgHeight/2) - 16, 
					left: (imgWidth/2) - 16  
				});
				
				if ($.browser.opera) {
					p.css({ 'margin-bottom': -6});
				}
				
				//add effects for thumbnails (shadow and cover light)
				var data_effects = p.attr('data-effects');

				if (data_effects == 'true' || data_effects == undefined) {
					var idShadowFx = $(selector).attr('id') + '_shd_' + i;
					var idLeftsideFx = $(selector).attr('id') + '_leftside_' + i;

					strAppend += '<img class="fx_shadow" id="' + idShadowFx + '" src="img/fx_shadow.png">';
					strAppend += '<img class="fx_leftside" id="' + idLeftsideFx + '" src="img/fx_leftside.png">';
					
					p.append(strAppend);
					strAppend = '';
					
					if (imgHeight != null) {
						$('#'+idShadowFx).height( parseInt(imgHeight) );
						$('#'+idLeftsideFx).height( parseInt(imgHeight) );
					}
				}//if
				
				if (sliderType == 'image_gallery') {
					p.addClass("sti_thumb_gallery");
					var borderWidth = parseInt(p.children('img').css("border-left-width"));
					var paddingWidth = parseInt(p.children('img').css("padding-left"));
					var totalWidth = (paddingWidth*2) + borderWidth;
					//console.log(paddingWidth)
					
					p.children('.ribbon').css({ top: -totalWidth - 6, right: -totalWidth - 6 });
					pLink.css({ 
					   bottom: (imgHeight/2) - 16 + paddingWidth + borderWidth, 
				    	left: (imgWidth/2) - 16 + paddingWidth + borderWidth 
				    });
				}
				
			}//for
		}//productsSetup
	

		// ------------------------------------------------------------
		// nav prev/next, play/pause, pagination
		// ------------------------------------------------------------

		if (showPreviousNext) {
			var idPrev = "prev_" + $(selector).attr('id');
			var idNext = "next_" + $(selector).attr('id');
			$sti_slider.append('<div class="sti_previous" id="' + idPrev + '"></div><div class="sti_next" id="' + idNext + '"></div>');
			
			//prevNextAlign();
			changeStyles(currentSlide);
		}
		
		function prevNextAlign() {
			$('#'+idPrev).css( { top: ($sti_slider.height() - $('#'+idPrev).height()) / 2 } );
			$('#'+idNext).css( { top: ($sti_slider.height() - $('#'+idNext).height()) / 2  } );
		}
		
		if (swipeDrag && !touchSupport) {
			$sti_slider.mouseover(function(e) {
				//grab cursor
				$(this).addClass('grab_cursor');
				
				$(this).mousedown(function() {
					$(this).removeClass('grab_cursor').addClass('grabbing_cursor');
				}).mouseup(function() {
					$(this).removeClass('grabbing_cursor').addClass('grab_cursor');
				});
			}).mouseout(function() {
				$(this).removeClass('grab_cursor');
			});
		}
		
		//play/pause
		var $play = $(selector + ' .sti_control .sti_play');
		var $pause = $(selector + ' .sti_control .sti_pause');
		$pause.hide();
		
		if (!showPlayPause) {
			$sti_control.hide();
		} else {
			if (autoSlide) {
				$pause.show(); 
				$play.hide();
			} else {
				$pause.hide();
				$play.show();
			}
			$sti_control.css("display",'none').fadeTo("slow",1);
		}
		
		//pagination
		if (!showPagination) {
			$sti_page.hide();
			
			//change style in $sti_control
			$sti_control.css({ border:'none', marginLeft:0, paddingLeft:0 });
			$pause.css({ margin:0 });
			$play.css({ margin:0 });
		} else {
		
			//create pages
			var pageAppend = '';
			for (var i=0; i < $totalSlides; i++) {
				
				//if ($totalSlides > 1) {
					if (pageStyle == 'numbers') {
						var num = i+1;
						if (currentSlide == i) {
							pageAppend += '<a href="#" class="sti_btn active">' + num + '</a>';
						} else {
							pageAppend += '<a href="#" class="sti_btn">' + num + '</a>';
						}
					} else if (pageStyle == 'bullets') {
						if (currentSlide == i) {
							pageAppend += '<a href="#" class="bullets_page_active"></a>';
						} else {
							pageAppend += '<a href="#" class="bullets_page"></a>';
						}
					} else if (pageStyle == 'thumbnails') {
						var getImgSrc = $sti_page.children('img').eq(i).attr('src');
											
						if (currentSlide == i) {
							pageAppend += '<a href="#" class="thumbnails_page_active">' + '<img src="' + getImgSrc + '" alt="">' + '</a>';
						} else {
							pageAppend += '<a href="#" class="thumbnails_page">' + '<img src="' + getImgSrc + '" alt="">' + '</a>';
						}					
					}
				//}
			}
			$sti_page.children('img').remove();
			$sti_page.fadeTo("fast",0).append(pageAppend).fadeTo("normal",1);
			
			//pagination align
			alignPaginationConfig();
		}
		
		function alignPaginationConfig() {
			if (alignPagination == 'left') {
				$sti_paginate.css({ float: 'left' });
			} else if (alignPagination == 'right') {
				$sti_paginate.css({ float: 'right' });
			} else {
				$sti_paginate.css({ left: ($sti_slider.width() - $sti_paginate.width()) / 2 });
			}
		}
		

		// ------------------------------------------------------------
		// SWIPE
		// ------------------------------------------------------------
		
		if (swipeDrag) {
			var swipeOptions =
			{
				triggerOnTouchEnd : true,	
				swipeStatus : swipeStatus,
				allowPageScroll:"vertical",
				threshold:20			
			}

			$sti_items.swipe( swipeOptions );
		}

		// ------------------------------------------------------------
		// move > drag the div
		// cancel > animate back
		// end > animate to the next slide
		// ------------------------------------------------------------
				
		function swipeStatus(event, phase, direction, distance) {
		
			if( phase == "move" && (direction == "left" || direction == "right") ) {
				
				if ($('.sti_tooltip').length > 0) $('.sti_tooltip').remove();
				
				var duration = 0;
				var posX = -valueGlobal;
				$sti_items.css({ left:-posX, position: 'absolute' });
				
				if (direction == "left") {
					scrollSlides((slideWidth * currentSlide) + distance, duration);
				} else if (direction == "right") {
					scrollSlides((slideWidth * currentSlide) - distance, duration);
				}
				
			} else if ( phase == "cancel") {
				
				if (!suppTrans) {
					setTimeout(function() {
						$sti_items.stop().animate({ left: valueGlobal }, { duration: scrollSpeed/2.5 } );
					},10);
				}
					
				scrollSlides(slideWidth * currentSlide, scrollSpeed);
			
			} else if ( phase == "end" ) {
		
				pauseAutoSlide();
				
				
				if (!suppTrans) {
					setTimeout(function() {
						$sti_items.stop().animate({ left: valueGlobal }, { duration: scrollSpeed } );
					},10);
				}
				
				dragging = true;
				
				if (direction == "right") {
					previousSlide(dragging);
				} else if (direction == "left")	{	
					nextSlide(dragging);
				}
			}
		}
		
		
		function previousSlide(dragging) {
			currentSlide = Math.max(currentSlide-1, 0);
			scrollSlides( slideWidth * currentSlide, scrollSpeed);
			
			/////////////////////////////
			if (!suppTrans && !dragging) {
				$sti_items.css({ position:'absolute' });
				setTimeout(function() {
					$sti_items.stop().animate({ left: valueGlobal }, { duration: scrollSpeed } );
				},10);
			}
			
			setTimeout( function() { config.onScrollEvent.call(this, currentSlide) }, scrollSpeed);
			changeStyles(currentSlide);		
		}
		
		function nextSlide(dragging) {
			currentSlide = Math.min(currentSlide+1, $totalSlides-1);
			scrollSlides( slideWidth * currentSlide, scrollSpeed);

			/////////////////////////////
			if (!suppTrans && !dragging) {
				$sti_items.css({ position:'absolute' });
				setTimeout(function() {
					$sti_items.stop().animate({ left: valueGlobal }, { duration: scrollSpeed } );
				},10);
			}
			
			setTimeout( function() { config.onScrollEvent.call(this, currentSlide) }, scrollSpeed);
			changeStyles(currentSlide);		
		}
		
		function gotoSlide(slideNum, dragging) {		
			currentSlide = slideNum;
			scrollSlides( slideWidth * currentSlide, scrollSpeed);
			
			/////////////////////////////
			if (!suppTrans && !dragging) {
				$sti_items.css({ position:'absolute' });
				setTimeout(function() {
					$sti_items.stop().animate({ left: valueGlobal }, { duration: scrollSpeed } );
				},10);
			}
			
			setTimeout( function() { config.onScrollEvent.call(this, currentSlide) }, scrollSpeed);
			changeStyles(currentSlide);		
		}
		
		function changeStyles(slideNum) {
			
			if (pageStyle == 'numbers') {
				$sti_page.children("a").removeClass('active');
				$sti_page.children("a").eq(slideNum).addClass('active');
			} else if (pageStyle == 'bullets') {
				$sti_page.children("a").removeClass('bullets_page_active').addClass('bullets_page');
				$sti_page.children("a").eq(slideNum).addClass('bullets_page_active');
			} else if (pageStyle == 'thumbnails') {
				$sti_page.children("a").removeClass('thumbnails_page_active').addClass('thumbnails_page');
				$sti_page.children("a").eq(slideNum).addClass('thumbnails_page_active');
			}
			
			if (slideNum == $totalSlides-1) {
				$(selector + ' .sti_next').css({ opacity: .3 });
			} else {
				$(selector + ' .sti_next').css({ opacity: .8 });
			}
			
			if (slideNum == 0) {
				$(selector + ' .sti_previous').css({ opacity: .3 });
			} else {
				$(selector + ' .sti_previous').css({ opacity: .8 });
			}
		}


		// Update the position of the $sti_items on drag
		function scrollSlides(distance, duration) {
			
			if ($('.sti_tooltip').length > 0) $('.sti_tooltip').remove();			
			$sti_slider.stop().animate({ height: slideHeightArr[currentSlide] }, { duration: 400 });
			
			if (suppTrans) {

				$sti_items.css(
				{
					"-webkit-transition-duration": (duration/1000).toFixed(1) + "s", 
					"-moz-transition-duration": (duration/1000).toFixed(1) + "s",
					"-o-transition-duration": (duration/1000).toFixed(1) + "s",
					"-ms-transition-duration": (duration/1000).toFixed(1) + "s",
					"transition-duration": (duration/1000).toFixed(1) + "s"
				});
				
				var valueLocal = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
				
				// ie9- and opera not support translate3d
				if ($.browser.msie || $.browser.opera) {
					$sti_items.css(
					{
						"-webkit-transform": "translate("+ valueLocal +"px,0px)",
						"-moz-transform": "translate("+ valueLocal +"px,0px)",
						"-o-transform": "translate("+ valueLocal +"px,0px)",
						"-ms-transform": "translate("+ valueLocal +"px,0px)",
						"transform": "translate("+ valueLocal +"px,0px)"
					});
				} else {
					$sti_items.css(
					{
						"-webkit-transform": "translate3d("+ valueLocal +"px,0px,0px)",
						"-moz-transform": "translate3d("+ valueLocal +"px,0px,0px)",
						"-o-transform": "translate3d("+ valueLocal +"px,0px,0px)",
						"-ms-transform": "translate3d("+ valueLocal +"px,0px,0px)",
						"transform": "translate3d("+ valueLocal +"px,0px,0px)"
					});
				}
		
			} else {

				valueGlobal = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
				
			}//suppTrans
		}
		
		
		// ----------------------------------------------------
		// if supports css3 transitions
		// ----------------------------------------------------
		
		function supportsTransitions() {
			var b = document.body || document.documentElement;
			var s = b.style;
			var p = 'transition';
			if(typeof s[p] == 'string') { return true; }
		
			// Tests for vendor specific prop
			v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
			p = p.charAt(0).toUpperCase() + p.substr(1);
			for(var i=0; i<v.length; i++) {
			  if(typeof s[v[i] + p] == 'string') { return true; }
			}
			return false;
		}
		
		
		// ------------------------------------------------------------
		//  Paginate / Control
		// ------------------------------------------------------------
		
		//previous slide
		$(selector + ' .sti_previous').on("click", function(e) {
			e.preventDefault();
			previousSlide();
			pauseAutoSlide();
		});
		
		//next slide
		$(selector + ' .sti_next').on("click", function(e) {
			e.preventDefault();
			nextSlide();
			pauseAutoSlide();
		});
		
		//goto slide
		$sti_page.children('a').on("click", function(e) {
			e.preventDefault();
			gotoSlide( $(this).index() );
			pauseAutoSlide();
		});
		
		//current slide different of 0
		if (currentSlide > 0 && currentSlide < $totalSlides) {
			setTimeout(function() {
				gotoSlide(currentSlide);
			},500);
		}
		
		//play / pause button
		$play.on("click", function(e) {
			e.preventDefault();
			
			initAutoSlide();
			$(this).hide();
			$pause.show();
			$pause.css({ opacity:0 }).stop().animate({ opacity: 1 }, { duration: 500 } );
		});

		$pause.on("click", function(e) {
			e.preventDefault();
			
			pauseAutoSlide();
			$(this).hide();
			$play.show();
			$play.css({ opacity:0 }).stop().animate({ opacity: 1 }, { duration: 500 } );
		});
		
		
		// ------------------------------------------------------------
		// menu
		// ------------------------------------------------------------
				
		function showMenu() {
			$sti_menu.show()
		}
		
		$sti_menu.children('a').on("click", function(e) {
			e.preventDefault();
			
			if( ($(this).index() == stiMenuCurrent) || (autoSlide == true && typeof interval == "undefined") ) return false;
			
			$sti_menu.children('a').off("click");
			
			var menuLink = $(this).attr('data-url');
			config.ajaxEvent.call(undefined, menuLink, autoSlide);
			changeMenu( $(this).index() );
			pauseAutoSlide();
		});
		
		
		function changeMenu(num) {
			$sti_menu.children('a').removeClass('active');
			$sti_menu.children('a').eq(num).addClass('active')
		}
		
		//menu align
		function alignMenuConfig() {
			if (alignMenu == 'left') {
				$sti_menu.css({ float: 'left' });
			} else if (alignMenu == 'right') {
				$sti_menu.css({ float: 'right' });
			} else {
				$sti_menu.css({ left: ($sti_slider.width() - $sti_menu.width()) / 2 });
			}
		}
		alignMenuConfig();

		// ------------------------------------------------------------
		// auto slide
		// ------------------------------------------------------------
		
		var interval;
		var stiMenuLen = $sti_menu.children('a').length;
		
		for (var i=0; i < stiMenuLen; i++ ) {
			if( $sti_menu.children('a').eq(i).hasClass('active') ) {
				var stiMenuCurrent = i;
				break;
			}
		}
		
		function initAutoSlide() {
			autoSlide = true;

			function next() {
				if (currentSlide >= $totalSlides-1) {
					
					if ( stiMenuLen > 0 && stiMenuCurrent < stiMenuLen) {
						
						if(stiMenuCurrent == stiMenuLen-1) stiMenuCurrent = -1;
						
						var menuIndex = $sti_menu.children('a').eq(stiMenuCurrent+1);
						var menuLink = menuIndex.attr('data-url');
						
						clearInterval(interval);
						$sti_menu.children('a').off("click");
						config.ajaxEvent.call(undefined, menuLink, autoSlide);
						changeMenu(stiMenuCurrent+1);
						
						stiMenuCurrent++;
						
					} else {
						gotoSlide(0);
					}
					
				} else {
					nextSlide();
				}
			}//next
			
			interval = setInterval(next, autoSlideDelay);

		}//initAutoSlide
		
		//if (autoSlide) initAutoSlide();
		
		
		function pauseAutoSlide() {
			//console.log('pauseAutoSlide > ' +  interval);
			clearInterval(interval);
			autoSlide = false;
			
			if (showPlayPause) {
				$play.show();
				$pause.hide();
			}
		}
		
		
		// ------------------------------------------------------------
		// sti lightbox
		// ------------------------------------------------------------
		
		var $lightbox = $(selector + ' .sti_lightbox');
		var $popupMaxWidth;
		
		$lightbox.on("click", function(e) {
			
			e.preventDefault();
			//var $p = $(this);
			
			//add mask_lightbox
			$('body').append('<div id="mask_lightbox"></div>');
			$('body').append('<div id="popup_lightbox"></div>');
			$('#popup_lightbox').append("<div id='preload_lightbox'></div>");
			
			var $mask = $('#mask_lightbox');
			var $popup = $('#popup_lightbox');
		
			//Get width / height
			var winWidth = $(window).width();
			var winHeight = $(window).height();
			var docHeight = $(document).height();

			$mask.css({'width': winWidth,'height': docHeight});
			$mask.fadeIn(400);	
			$mask.fadeTo("normal",0.7);

			//popup
			$popup.css({
				top: winHeight / 2 - $popup.height() / 2,
			 	left: winWidth / 2 - $popup.width() / 2
			});
			
						
			lightboxData( $(this) );
			
			function lightboxData( currentProd ) {
				
				winWidth = $(window).width();
				winHeight = $(window).height();
				docHeight = $(document).height();
				
				var $p = currentProd;
				var data_href = $p.attr('href');
				
				if ($p.attr('data-type') != undefined ) {
					var data_type = $p.attr('data-type');
				}
				
				if ($p.attr('data-poster') != undefined ) {
					var data_poster = $p.attr('data-poster');
				} else {
					data_poster = '';
				}
				
				if ($p.attr('data-size') != undefined) {
					var data_size = $p.attr('data-size').split('x');
				} else {
					//default value
					var data_size = [640,360];
				}
				$popupMaxWidth = data_size[0];
				
				var is_img = ( data_href.indexOf('.jpg') != -1 || data_href.indexOf('.gif') != -1 || data_href.indexOf('.png') != -1 ) || data_type == 'image' ? true : false;
				
				if (is_img) {
					var this_item = $p;
					
					if ( is_ie7 || is_ie8 ) {
						var img = $("<img />").attr('src', data_href + "?" + new Date().getTime());
					} else {
						var img = $("<img />").attr('src', data_href);
					}
						
					img.load(function() {
						
						var img_width = this.width;
						var img_height = this.height;
						
						if (this.width > winWidth) { 
	
							var a = winWidth - 80;
							var b = this.width;
							
							var percentA = (a/b) * 100;
	
							this.height = (percentA / 100) * this.height;
							this.width = a;
						}
						
						$popupMaxWidth = this.width;
						
						popupCenterAnimate(this.width, this.height, img, this_item);
						$(img).hide();
					});
					
				} else if (data_type == 'video-youtube') {
					
					//screen resolution
					var w = parseInt(data_size[0]), h = parseInt(data_size[1]);
					if (w > winWidth) { w = winWidth - 80; }
					
					var str_id = data_href.split("?v=");
					var str_params = "?autohide=2&amp;autoplay=0&amp;controls=1&amp;disablekb=0&amp;fs=1&amp;hd=0&amp;loop=0&amp;rel=1&amp;showinfo=0&amp;showsearch=1&amp;wmode=transparent&amp;enablejsapi=1";
					var str_iframe = '<iframe class="video_player" width="' + w + '" height="' + h + '" frameborder="0" src="http://www.youtube.com/embed/' + str_id[1] + str_params + '"></iframe>';
					
					popupCenterAnimate(w, h, str_iframe, $p);
					
				} else if (data_type == 'video-vimeo') {
					
					var w = parseInt(data_size[0]), h = parseInt(data_size[1]);
					if (w > winWidth) { w = winWidth - 80; }
	
					var str_id = data_href.split("/").pop();
					var str_iframe = '<iframe class="video_player" src="http://player.vimeo.com/video/' + str_id +  '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="' + w + '" height="' + h + '" frameborder="0"></iframe>';
					
					popupCenterAnimate(w, h, str_iframe, $p);
					
				} else if (data_type == 'html-content') {
					
					var w = parseInt(data_size[0]), h = parseInt(data_size[1]);
					if (w > winWidth) { w = winWidth - 80; }
					
					//data_href
					var str_iframe = '<iframe id="html_content_lightbox" src="' + data_href +  '" width="' + w + '" height="' + h + '" frameborder="0"><div id="preload_lightbox"></div></iframe>';
					popupCenterAnimate(w, h, str_iframe, $p);
					
				} else {
					
					//open mediaelement plugin script if not exist
					
					if ( $('#script_media_element').length < 1) {
						var js = document.createElement("script");
						js.type = "text/javascript";
						js.src = "mep/player/mediaelement-and-player.min.js";
						js.id = "script_media_element";
						document.body.appendChild(js);
					}
	
					//screen resolution
					var w = parseInt(data_size[0]), h = parseInt(data_size[1]);
					if (w > winWidth) { w = winWidth - 80; }
					
					if (data_type == 'video') {
						//type='video/flv' or 'video/mp4'
						var str_div = '<div class="video_player"><video src="' + data_href +'" width="' + w  + '" height="' + h + '" poster="' + data_poster + '"></video></div>';
						popupCenterAnimate(w, h, str_div, $p);
					} else if (data_type == 'audio') {
						var str_div = '<div id="audio_player"><audio src="' + data_href +'" width="' + w  + '" height="' + h + '" poster="' + data_poster + '" type="audio/mp3" controls="controls"></audio></div>';
						popupCenterAnimate(w, h, str_div, $p);
					}
					
				}//if
				
	
				// ------------------------------------
				// navigation lightbox
				// ------------------------------------
				
				$popup.append('<div id="sti_previous_lightbox"></div><div id="sti_next_lightbox"></div>');
				var lightboxLength = $sti_slide.eq(currentSlide).children($prod).find('.sti_lightbox').length;
				
				$('#sti_previous_lightbox').css({ opacity: 0, display: 'none'});
				$('#sti_next_lightbox').css({ opacity: 0, display: 'none'});
								
				$('#sti_previous_lightbox').on("click", function(e) {
					//$p =  $p.parent().prev().find('.sti_lightbox'); //in sequence only
					$p = $p.parent().prevAll(':has(.sti_lightbox):first').find('.sti_lightbox');
					
					if ($p.length > 0) {
						if (!touchSupport) { $('audio').each(function() { $(this)[0].player.pause(); }); }
						$popup.html('');
						lightboxData( $p );
					} else {
						if (!touchSupport) { $('audio').each(function() { $(this)[0].player.pause(); }); }
						$popup.html('');
						lightboxData( $sti_slide.eq(currentSlide).children($prod).find('.sti_lightbox').eq( lightboxLength - 1 ) );
					}
					$('#popup_lightbox').append("<div id='preload_lightbox'></div>");
				});
	
				$('#sti_next_lightbox').on("click", function(e) {		
					//$p = $p.parent().next().find('.sti_lightbox'); //in sequence only
					$p = $p.parent().nextAll(':has(.sti_lightbox):first').find('.sti_lightbox');
					
					if ($p.length > 0) {
						if (!touchSupport) { $('audio').each(function() { $(this)[0].player.pause(); }); }
						$popup.html('');
						lightboxData( $p );
					} else {
						if (!touchSupport) { $('audio').each(function() { $(this)[0].player.pause(); }); }
						$popup.html('');
						lightboxData( $sti_slide.eq(currentSlide).children($prod).find('.sti_lightbox').eq(0) );					
					}
					$('#popup_lightbox').append("<div id='preload_lightbox'></div>");
				});
				
				$popup.mouseover(function(e) {
					$('#sti_previous_lightbox').css({display: 'block'}).stop().animate({ opacity: .5 }, { duration: 400 });
					$('#sti_next_lightbox').css({display: 'block'}).stop().animate({ opacity: .5 }, { duration: 400 });
				}).mouseout(function() {
					$('#sti_previous_lightbox').stop().animate({ opacity: 0 }, { duration: 400 });
					$('#sti_next_lightbox').stop().animate({ opacity: 0 }, { duration: 400 });
				});

			}//lightboxData
			

			// ------------------------------------
			// popup center animate / append item
			// ------------------------------------
			
			function popupCenterAnimate(w,h,str,this_elem) {
				
				if (w > winWidth) {
					w = winWidth - 80;
				}
				
				var $popup = $('#popup_lightbox');

				$popup.stop().delay(100).animate({ 
					'top': winHeight / 2 - $popup.height() / 2,  
					'left': winWidth / 2 - $popup.width() / 2 
				}, 400, function() {
					$('#preload_lightbox').remove();
				});

				var posX = (winWidth / 2 - w / 2);
				var posY = (winHeight / 2 - h / 2);
				
				$popup.stop().delay(100).animate({'height': h, 'width': w, 'top': posY,  'left': posX }, 400, function() {
					
					//add img/video/audio
					$popup.append(str);
					$(str).fadeIn(500);
					
					//title
					if ($(this_elem).attr("title") != "" && $(this_elem).attr("title") != "undefined") {
						var prod_title = $(this_elem).attr("title");
					} else {
						var prod_title = '';
					}

					$popup.append("<div id='sti_bar_lightbox'><div id='close_btn_lightbox'></div>" + prod_title + "</div>");
					var padd = parseInt($popup.css('padding-left'));
					$("#sti_bar_lightbox").css({ 'width': w + padd, 'bottom': -(padd*2) - 31 , 'left': 0});
					
					//popup fade
					$("#sti_bar_lightbox").fadeIn(400);	
					$("#sti_bar_lightbox").fadeTo("normal",1);
		
					//btn close
					$('#close_btn_lightbox').click(function () {
						closeLightbox();
					});

					//execut script if video or audio
					if (this_elem.attr('data-type') == 'video') {
						$('video').mediaelementplayer({
							videoWidth: '100%',
							videoHeight: '100%',
							startVolume: 0.6,
							enableAutosize: true,
							features: ['playpause','current','progress','duration','volume','fullscreen'],
							videoVolume: 'horizontal'
						});	
					} else if (this_elem.attr('data-type') == 'audio') { 
						$('audio').mediaelementplayer({
							startVolume: 0.6,
							loop: true,
							audioWidth: '95%',
							features: ['playpause','current','progress','duration','volume','fullscreen'],
							videoVolume: 'horizontal'
						});
					}
				});
			}//popupCenterAnimate
			
	
			// -------------------------------
			// click mask_lightbox
			// -------------------------------
			
			$('#mask_lightbox').click(function () {
				closeLightbox();
			});

			$(document).keydown(function(e) {
				//escape key
				if (e.keyCode == 27) {
					closeLightbox();
				}
			});
			
			function closeLightbox() {
				
				if (!touchSupport) {
					$('video, audio').each(function() {
						$(this)[0].player.pause();        
					});
				}
				
				$popupMaxWidth = undefined;
				
				$('#mask_lightbox').hide();
				$('#mask_lightbox').remove();
				$('#popup_lightbox').remove();
				
				$(selector).trigger('resize'); 
			}

		});//sti lightbox
		

		// -------------------------------
		// resize event
		// -------------------------------
		
		function resizeEnd() {
				
			// image_banner
			if (sliderType == 'image_banner') {
				for(var i=0; i < $sti_slide.length; i++) {
					var sld = $sti_slide.eq(i);
					slideHeightArr[i] = sld.height();
				}
				gotoSlide(currentSlide);
			}
			
			// image_text
			if (sliderType == 'image_text') {
				for(var i=0; i < $sti_slide.length; i++) {
					var sld = $sti_slide.eq(i);
					slideHeightArr[i] = sld.height();
				}
				gotoSlide(currentSlide);
			}
			
			// image_gallery
			if (sliderType == 'image_gallery') {
				
				$(selector).find('.sti_clear').remove();
				
				for (var i=0; i < $sti_slide.length; i++) {
					
					var sld = $sti_slide.eq(i);						
					var sldLength = sld.find($prod).length;
					
					for (var j=0; j < sldLength; j++) {
						var p = sld.find($prod).eq(j);
						var pFirst = sld.find($prod).eq(0);
						var pPosX = parseInt(p.position().left) + p.width() + parseInt(p.css('margin-left'), 10) + 11; //11=shadow
						var pPosXFirst = parseInt(pFirst.position().left) + pFirst.width() + parseInt(pFirst.css('margin-left'), 10) + 11;

						if ( pPosX > $sti_slider.width() || pPosX == pPosXFirst ) {
							$( p ).before('<div class="sti_clear"></div>');
						}
					}//for j
					
					$sti_slider.height( sld.height() );
					slideHeightArr[i] = sld.height();
					gotoSlide(currentSlide);

				}//for i
			}

			//image_shelf
			if (sliderType == 'image_shelf') {
				
				$(selector).find('.sti_shelf_divider').remove();
				//$(selector).find('.sti_shelf_divider_bottom').remove();
				
				for (var i=0; i < $sti_slide.length; i++) {
					
					var sld = $sti_slide.eq(i);						
					var sldLength = sld.find($prod).length;
					//$( sld.find($prod).eq(sldLength-1) ).after('<div class="sti_shelf_divider_bottom"></div>');
					
					for (var j=0; j < sldLength; j++) {
						var p = sld.find($prod).eq(j);
						var pFirst = sld.find($prod).eq(0);
						var pPosX = parseInt(p.position().left) + p.width() + parseInt(p.css('margin-left'), 10) + 11; //11=shadow
						var pPosXFirst = parseInt(pFirst.position().left) + pFirst.width() + parseInt(pFirst.css('margin-left'), 10) + 11;

						if ( pPosX > $sti_slider.width() || pPosX == pPosXFirst ) {
							$( p ).before('<div class="sti_shelf_divider"></div>');
						}
					}//for j
					
					$sti_slider.height( sld.height() );
					slideHeightArr[i] = sld.height();
					gotoSlide(currentSlide);

				}//for i
							
			}//image_shelf
			
			$('#mask_lightbox').width( $(window).width() );
			$('#mask_lightbox').height( $(document).height() );
			
		}//resizeEnd
		
		
		var maxWidth = parseFloat(slideWidth);
		var resizeTimer = 0;
		var currentHeight, currentWidth;

		$(window).on("resize", function(e) {
			
			var windowHeight = $(window).height();
  			var windowWidth = $(window).width();
			
			if (currentHeight == undefined || currentHeight != windowHeight || currentWidth == undefined || currentWidth != windowWidth) {
		  
				if (sliderType == 'image_banner') {
					
					var imgTmp = $sti_slider.find('img');
	
					$(selector).width("100%");
					
					if ($(selector).width() > maxWidth) {
						$(selector).css("width", maxWidth);
					}
					
					if ($(selector).width() < maxWidth) {
						imgTmp.css( { width: $(selector).width() } );					
						$sti_slider.css( { width: $(selector).width(), height: imgTmp.height() } );
						$sti_slide.css( { height: imgTmp.height() } );
						alignPaginationConfig();
						alignMenuConfig();
					}
					
					if ( $(window).width() > maxWidth ) {
						$(selector).width(maxWidth);
						$sti_slider.width(maxWidth);
						imgTmp.css( { width: maxWidth } );
					}
					
					//resizeend
					if (resizeTimer) clearTimeout(resizeTimer);
					resizeTimer = setTimeout(resizeEnd, 300);
					
				}//image_banner
				
				if (sliderType == 'image_shelf') {
					
					$(selector).width("100%");
					
					if ($(selector).width() > maxWidth) {
						$(selector).width(maxWidth);
					}
					
					if ($(selector).width() < maxWidth) {
						$sti_slider.width( $(selector).width() );
						
						alignPaginationConfig();
						alignMenuConfig();
					}
					
					if ( $(window).width() > maxWidth ) {
						$(selector).width(maxWidth);
						$sti_slider.width(maxWidth);
					}
					
					//resizeend
					if (resizeTimer) clearTimeout(resizeTimer);
					resizeTimer = setTimeout(resizeEnd, 300);
	
				}//image_shelf
				
				if (sliderType == 'image_text') {
					
					var $content_in = $(selector + ' .sti_content_inner');
					var imgTmp = $sti_slider.find('img');
					
					$(selector).width("100%");
					
					if ($(selector).width() > maxWidth) {
						$(selector).css("width", maxWidth);
					}
					
					if ($(selector).width() < maxWidth) {
						$sti_slider.css( { width: $(selector).width() } );
						
						imgTmp.css( { width: $(selector).width(), height: 'auto' } );
						
						$content_in.css( { width: $(selector).width(), height: '100%' } );
						alignPaginationConfig();
						alignMenuConfig();
					}
					
					if ( $(window).width() > maxWidth ) {
						$(selector).width(maxWidth);
						$sti_slider.width(maxWidth);
						imgTmp.css( { width: maxWidth, height: 'auto' } );
					}
					
					//resizeend
					if (resizeTimer) clearTimeout(resizeTimer);
					resizeTimer = setTimeout(resizeEnd, 300);
	
				}//image_text
				
				if (sliderType == 'image_gallery') {
				
					$(selector).width("100%");
					
					if ($(selector).width() > maxWidth) {
						$(selector).width(maxWidth);
					}
					
					if ($(selector).width() < maxWidth) {
						$sti_slider.width( $(selector).width() );
						alignPaginationConfig();
						alignMenuConfig();
					}
					
					if ( $(window).width() > maxWidth ) {
						$(selector).width(maxWidth);
						$sti_slider.width(maxWidth);
					}
					
					//resizeend
					if (resizeTimer) clearTimeout(resizeTimer);
					resizeTimer = setTimeout(resizeEnd, 300);
	
				}//image_gallery
				
				//popup lightbox resize
				if ( $('#popup_lightbox').length > 0 ) {
					
					var $popup = $('#popup_lightbox');
	
					$popup.css({
						'top': $(window).height() / 2 - $popup.height() / 2, 
						'left': $(window).width() / 2 - $popup.width() / 2
					});
					
					var $mask = $('#mask_lightbox');
					$mask.css({'width': $(window).width(),'height': $(document).height() });
					
					if ( $(window).width() < $popup.width() ) {
						
						$popup.css({ width:'100%', height: 'auto' });
						$('.video_player').css( { width:'100%' } );
						$('#sti_bar_lightbox').css({ width:'100%' });
						
						$popup.find('img').css( { width:'100%' } );
						$popup.find('object').css( { width:'100%' } );
					}
					
					if ( $(window).width() > $popupMaxWidth ) {
						$popup.css( { width: $popupMaxWidth } );
																
						var img = $popup.find('img');
						if (img) {
							img.css( { width:$popupMaxWidth } );
							//$popup.css( { width: $popupMaxWidth, height: 'auto' } );
						}
					}
					
					//resizeend
					if (resizeTimer) clearTimeout(resizeTimer);
					resizeTimer = setTimeout(resizeEnd, 300);
	
				}//lightbox
				
				currentHeight = windowHeight;
     			currentWidth = windowWidth;
	  
			}//currentHeight, currentWidth;
	
		});//resize
		
		return this;
	};
	
})(jQuery);

//------------------------------------
// images loaded plugin
// MIT License. by Paul Irish et al.
//------------------------------------

;(function($, undefined) {
'use strict';

// blank image data-uri bypasses webkit log warning (thx doug jones)
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

$.fn.imagesLoaded = function( callback ) {
	var $this = this,
		deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
		hasNotify = $.isFunction(deferred.notify),
		$images = $this.find('img').add( $this.filter('img') ),
		loaded = [],
		proper = [],
		broken = [];

	// Register deferred callbacks
	if ($.isPlainObject(callback)) {
		$.each(callback, function (key, value) {
			if (key === 'callback') {
				callback = value;
			} else if (deferred) {
				deferred[key](value);
			}
		});
	}

	function doneLoading() {
		var $proper = $(proper),
			$broken = $(broken);

		if ( deferred ) {
			if ( broken.length ) {
				deferred.reject( $images, $proper, $broken );
			} else {
				deferred.resolve( $images );
			}
		}

		if ( $.isFunction( callback ) ) {
			callback.call( $this, $images, $proper, $broken );
		}
	}

	function imgLoaded( img, isBroken ) {
		// don't proceed if BLANK image, or image is already loaded
		if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
			return;
		}

		// store element in loaded images array
		loaded.push( img );

		// keep track of broken and properly loaded images
		if ( isBroken ) {
			broken.push( img );
		} else {
			proper.push( img );
		}

		// cache image and its state for future calls
		$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );

		// trigger deferred progress method if present
		if ( hasNotify ) {
			deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
		}

		// call doneLoading and clean listeners if all images are loaded
		if ( $images.length === loaded.length ){
			setTimeout( doneLoading );
			$images.unbind( '.imagesLoaded' );
		}
	}

	// if no images, trigger immediately
	if ( !$images.length ) {
		doneLoading();
	} else {
		$images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
			// trigger imgLoaded
			imgLoaded( event.target, event.type === 'error' );
		}).each( function( i, el ) {
			var src = el.src;

			// find out if this image has been already checked for status
			// if it was, and src has not changed, call imgLoaded on it
			var cached = $.data( el, 'imagesLoaded' );
			if ( cached && cached.src === src ) {
				imgLoaded( el, cached.isBroken );
				return;
			}

			// if complete is true and browser supports natural sizes, try
			// to check for image status manually
			if ( el.complete && el.naturalWidth !== undefined ) {
				imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
				return;
			}

			// cached images don't fire load sometimes, so we reset src, but only when
			// dealing with IE, or image is complete (loaded) and failed manual check
			// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
			if ( el.readyState || el.complete ) {
				el.src = BLANK;
				el.src = src;
			}
		});
	}

	return deferred ? deferred.promise( $this ) : $this;
};

})(jQuery);