mjs.extend('animations', {

	init: function()
	 {
	 	/*
	 	* fade 'more' (looking glass) buttons on press items
	 	*/
	 	var $pressMore = $('.press .more');
	 	if ($pressMore.length) {
	 		this.fadeMore($pressMore);
	 	}
	 	
	 	/*
	 	* background visual fallback for older browsers
	 	*/
	 	var $bg = $('.bg');
	 		if($bg.length) {
	 			mjs.animations.bgFallback($bg);
	 		}
	 	/*
	 	* background visuals
	 	* not in use if there's a 'hasslides' class
	 	*/
	 	var $visuals = $('.visuals');
	 		if( $visuals.length && !$visuals.closest('section').hasClass('hasslides') ) {
	 			mjs.animations.bgVisuals($visuals);
	 			mjs.animations.slideContent($visuals);
	 		}
	 	
	 	/*
	 	* slide submenu panel
	 	*/
	 	var $panel = $('nav.primary .submenu');
	 		if($panel.length) this.slidePanel($panel);
	 		
 		/*
 		* slide out the content to make place for page-slider
 		*/	
 		var $hasSlider = $('.hasslides');
 		if ($hasSlider.length) {
 			var $article = $hasSlider.find('article');
 			this.showPageSlider($article);
 		}
	 },
	 
	 /*
	 * fade an element on hover of its parent
	 * pass the element in object and the parent as a string
	 * e.g. more-button (looking glass) on Press overview
	 */
	 
	 fadeMore: function ($this) 
	 {
	 	var $parent = $this.closest('article');
	 	
	 	 $parent.each(function() {
	 	 	$(this).hover(function() {
	 	 		$(this).find('.more').animate({top:'23px'}, 100).fadeIn(100);
	 	 	}, function() {
	 	 		$(this).find('.more').animate({top:'10px'}, 100).fadeOut(100);
	 	 		$(this).find('.preloader').animate({top:'15px'}, 100);
	 	 	});
	 	 });
	 	 
	 	 /*
	 	 * shorten the animation for tablets
	 	 * to avoid lag between the .more and the preloader on top
	 	 */
	 	 
	 	//detect the device
	 	var ua = navigator.userAgent;
	 	//if we're on an iPad or other touch device
	 	if( (ua.match(/iPhone/i)) || (ua.match(/iPod/i)) || (ua.match(/iPad/i)) || (ua.match(/Android/i)) || (ua.match(/webOS/i)) ) {
	 		$(this).hover(function() {
	 			$(this).find('.more').css('top','23px').show();
	 		}, function() {
	 			$(this).find('.more').hide();
	 		});
	 	}
	 },
	 
	/* 
	* toggle sliding the subnavigation
	* 
	*/
	slidePanel: function($panel)
	{
		var $body = $('body'),
			$container = $panel.closest('.container'),
			$nav = $panel.closest('nav'),
			$topMenu = $container.find('.topmenu'),
			topMenuStart = $topMenu.position().top,
			topMenuEnd = '-1em';
		
		var $product = $body.find('.product');
		if ( $product.length ) {
		var $controls = $body.find('.controls');
		}
			
		// get overlay ready
		$container.append('<div class="overlay"></div>');
		$overlay = $container.find('.overlay');
		
		$panel.append('<button id="slide-panel" class="ico"></button>');
		$close = $panel.find('#slide-panel');
				
		// the open & close functions
		var slideStuff = {
			// slide panel in view
			open: function($panel) {
				
				// show overlay
				$overlay.fadeIn('100');
								
				var menuCallback = function () {
					$panel.css('display','block').animate({width: '240px', paddingLeft: '40px'}, {duration: 100, easing: "easeInBack"});
				};
				
				// variable to indicate opening of panels has been triggered
				panelvisible = true;
							
				mjs.animations.hideMenu($topMenu,topMenuEnd, 100, "easeInBack", menuCallback );
				
				if ($product.length) {
					// hide controls
					$controls.hide();
				}
			},
			
			// slide panel out of view
			close: function($panel) {
			
				//hide overlay
				$overlay.fadeOut('100');
				
				//variable to indicate closing of panels has been triggered
				panelvisible = false;
				
				// open panel
				$panel.animate({width: '0', paddingLeft: '0'}, {duration: 100, easing: "easeInBack", complete: function() {
						$(this).css('display','none');
						
						// show menu only if closing of panels hasn't been set in motion already
						// when opening a panel while another is closing, because of the callback delay, panelvisible will still be true
						if (panelvisible == false) mjs.animations.showMenu($topMenu,topMenuStart, 100, "easeInBack" );
						
						if ($product.length) {
							// show controls
							$controls.show();
						}
					}
				});
			}
		};
		
		// trigger closing of submenu when clicking overlay
		$overlay.click(function(e) {
		
			$nav.find('li.selected').each(function() {
				$(this).removeClass('selected');
				var $panel = $(this).find('.submenu');
				slideStuff.close($panel);
			});
			
			e.preventDefault();
		});
		
		// trigger closing of submenu when clicking close button
		$close.click(function(e) {
		
			$nav.find('li.selected').each(function() {
				$(this).removeClass('selected');
				var $panel = $(this).find('.submenu');
				slideStuff.close($panel);
			});
			
			e.preventDefault();
		});
		
		// open & close for each item with a submenu
		$panel.each( function() {
			
			var $panel = $(this),
				$item = $panel.closest('li'),
				$link = $item.find('a').first();

			// trigger event to open & close
			$link.click(function(e) {
				
				// trigger close button to close all previously open panels
				$close.trigger('click');
				
				// open current panel
				// shows menu
				slideStuff.open($panel);
				
				$item.addClass('selected');
				
				/*
				// if panel is already open
				if( $item.hasClass('selected') ) {
				
					$item.removeClass('selected');

					// close current panel
					slideStuff.close($panel);
					
									
				// if item unselected
				} else {
					
					// close other panels
					// shows top menu
					$item.siblings('li.selected').each(function() {
						$(this).removeClass('selected');
						var $panel = $(this).find('.submenu');
						slideStuff.close($panel);
					});
					
					$item.addClass('selected');
					
					// open current panel
					// shows menu
					slideStuff.open($panel);
				}
				*/
				
				e.preventDefault();
			
			});
			
		});
	},
	
	/* 
	* toggle sliding the whole container
	* to reveal page bg
	* on product page: animate buttons and main visual as well
	*/
	slideContent: function($visuals)
	{
		var $body = $('body'),
			$content = $visuals.closest('#content'),
			$container = $content.closest('.container'),
			$topMenu = $container.find('.topmenu'),
			topMenuStart = $topMenu.position().top,
			topMenuEnd = '-1em',
			visualStart = '-200px',
			visualEnd = '40px',
			contStart = '0',
			contEnd = '-460px',
			pageUrl = '';
		
		// extra variables for when we're on a product page	
		var $product = $visuals.closest('.product');
		if ($product.length) {
			var $controls = $body.find('.controls-product'),
				$button = $controls.find('.ico'),
				$prevBtn = $controls.find('.ico-prev'),
				$nextBtn = $controls.find('.ico-next');
				if ( $prevBtn.length ) {
					var prevStartTop = $prevBtn.position().top,
						prevStartLeft = $prevBtn.position().left;
				}
				if ( $nextBtn.length ) {
					var nextStartTop = $nextBtn.position().top,
						nextStartLeft = $nextBtn.position().left;
				}
		}
		
		// add open/close button
		$container.append('<button id="slide-content" class="ico"></button>');
		$button = $container.find('#slide-content');
		var btnTop = '98px';
		
		// hide it on product detail page
		if ($visuals.closest('.product').length) $button.hide();
		
		// the open & close functions
		var slideStuff = {
			// slide container back into view
			// position relative again
			open: function($container) {
				
				$button.css({position:'absolute', left:'703px'});
				
				$container.css('position','relative').animate( {left: contStart}, {duration: 250, easing: "easeInBack", complete: function() {
				
						$button.css({position:'fixed'});
						
						// slide the top menus back in
						mjs.animations.showMenu($topMenu,topMenuStart, 100, "easeInBack" );
						
						// show background again if it was hidden
						$body.find('.bg-selected').show();
						
						/*
						* if on product detail page
						* hide button again and slide out main visual
						* hide the bg
						* move the controls back
						*/
						if ($product.length) {
							// put controls back
							$controls.show();
							// hide bg-image
							$currBg = $body.find('.bg-selected');
							//unselect thumbnail
							$content.find('.visuals .selected').removeClass('selected');
							$currBg.fadeOut(200, function() {
									// unselect bg
									$currBg.removeClass('bg-selected');
								}
							);
							// put big visual back
							$product.find('.visual').animate({right: visualStart}, {duration: 200, easing: "easeOutBack"});
							$button.hide();
						}
					}
				} );
			},
			// slide the container out of view
			close: function($container, pageUrl) {
				
				var menuCallback = function () {
				
					// make button position absolute so it slides along with the container
					$button.css({position:'absolute', left:'703px', top:$button.position().top});  //include a 'top' value that is the current position instead of offset
				
					$container.animate({left: contEnd}, {duration: 250, easing: "easeOutBack", complete: function(){
							// after the container animation
							// position fixed to avoid possible scrollbar with long content (which is now invisible anyway)
							$container.css('position','fixed');
							// make button position fixed again so it stays in place when scrolling long content
							$button.css({position:'fixed', left:'243px', top: btnTop});
							
							// if a new page has been called
							// go to it
							if ( pageUrl !== '' ) {
								window.location = pageUrl;
							}
						}
					});
				};
								
				mjs.animations.hideMenu($topMenu,topMenuEnd, 100, "easeInBack", menuCallback );
				
				/* 
				* if product detail page
				* show button again and show main visual
				* put controls into position
				*/
				if ($product.length) {
					$button.show();
					// animate big visual
					$product.find('.visual').animate({right: visualEnd}, {duration: 250, easing: "easeInBack"});
					// hide controls
					$controls.fadeOut();
				}
			},
			
			getUrl: function($this) {
				// get the url
				pageUrl = $this.attr('href');
				// slide the container out and pass the url
				slideStuff.close($container, pageUrl);
			}
			
		};
		
		/*
		* slide the container in/out of view
		*
		*/
		
		// use the slide button
		$button.click(function(e) {
			$(this).toggleClass('ico-close');
			
			if ($button.hasClass('ico-close')) {
				// slide the container out
				slideStuff.close($container, pageUrl);

			} else {
				// slide container back
				slideStuff.open($container);
				
				// if on press pages
				$pSlider = $('.page-slider');
				if ($pSlider.length) {
					// remove button
					$(this).remove();
					//remove dropshadow
					$container.removeClass('dropshadow');
					
					//remove slider
					$pSlider.animate({left: '-' + $pSlider.find('ul').width() + 'px'},{duration: 200, easing: 'easeOutBack' , complete: function(){ 
							$pSlider.remove();
						}
					});
				}
			}
			
        	e.preventDefault();
        });
        
        
        // if on product page
        if ($visuals.closest('.product').length) {
        
        	// trigger the slide effect when clicking a visual thumbnail
        	$visuals.find('li').click(function() {
        		$button.trigger('click');
        	});
        	
        	// trigger slide effect when clicking next/previous product controls
        	// we'll pass the page url to the slide function for execution in the callback
        	/*var $productControls = $body.find('.controls-product'),
        		$productButton = $productControls.find('a');
        	
        	$productButton.click(function(e) {
        		var $this = $(this);
        		
        		slideStuff.getUrl($this);
        		
        		e.preventDefault()
        	});
        	*/
        	
        }
        
	},
	
	/* 
	* show and hide the menus on top of the page
	*
	*/
	showMenu: function($menu, menuStart, menuDuration, menuEasing, menuCallback)
	{
		if ( menuCallback === undefined ) {
			$menu.animate( {top: menuStart}, {duration: menuDuration, easing: menuEasing } );
		} else {
			$menu.animate( {top: menuStart}, {duration: menuDuration, easing: menuEasing, complete: menuCallback } );
		}
	},
	
	hideMenu: function($menu, menuEnd, menuDuration, menuEasing, menuCallback)
	{
		if ( menuCallback === undefined ) {
			$menu.animate( {top: menuEnd}, {duration: menuDuration, easing: menuEasing } );
		} else {
			$menu.animate( {top: menuEnd}, {duration: menuDuration, easing: menuEasing, complete: menuCallback } );
		}
	},
	
	/* 
	 * big background-image fallback for older browsers
	 */
	 bgFallback: function($bg)
	 {
	 	// if older browser
	 	if ( !Modernizr.backgroundsize ) {
	 		// get background-image path from bg-div
	 		var src = extractUrl($bg.css("background-image")),
	 			$img = '<img src="' + src + '" />';
	 		
	 		 // remove quotes and wrapping url()
	 		function extractUrl(input)
	 		{
	 			return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
	 		}
	 		
	 		// append bg-image to bg-div
	 		$bg.append($img).css('background-image','none');
	 	}
	 },	 
	 
	 /* 
	 * change the big background-image
	 * when you click a thumbnail or use the controls
	 * includes img fallback for older browsers
	 */
	 bgVisuals: function($visuals)
	 {
	 	// remove active background
	 	$body = $('body');
	 	$activeBg = $body.find('.bg-selected')
	 	
	 	var	$li = $visuals.find('li'),
	 		$link = $li.find('a'),
	 		$controls = $('<div class="controls">'
 		    				+ '<button class="ico ico-prev">Previous</button>'
 		 					+ '<button class="ico ico-next">Next</button>'
 		 				+ '</div>');
	 
	 	
	 	// make in a slider div if there's not one already
	 	if ( $body.find('.bg-slider').length < 1 ) {
		 	$body.append('<div class="bg-slider"></div>');
		}
		
		$vSlider = $body.find('.bg-slider');
	 	
 		// make subdivisions based on number of visuals groups
		var i=0;
		for (i=0; i <= $visuals.closest('.hentry').length - 1; i++) {
			if ( $vSlider.find('.group_' + i).length < 1 ) {
				$vSlider.append('<div class="group group_' + i + '"></div>');
			}
		}
 		
 		var $group = $vSlider.find('.group');
	 	
	 	// append controls if not already there
 		if ($vSlider.find('.controls').length < 1) $vSlider.prepend($controls);
 		
 		var $controls = $vSlider.find('.controls'),
 			$button = $controls.find('button'),
 			$prevBtn = $controls.find('.ico-prev'),
 			$nextBtn = $controls.find('.ico-next'),
 			$currLi = $visuals.find('.selected');
 	
 		// show right controls based on selected thumbnail
 		if ($currLi.length) {
 			var currIndex = $currLi.index();
 		    
 			// if the selected thumbnail is the first one, hide prev
 			if ( $currLi.index() === 0 ) $controls.find($prevBtn).hide();
 			// if the selected thumbnail is the last one, hide next
 			if ( $currLi.index() >= $currLi.closest('.visuals').find('li').length ) $controls.find($nextBtn).hide();
 		// if no selected thumbs
 		} else {
 			// hide controls because no need to scroll
 			$controls.hide();
 		}
	 	
	 	/*
	 	* preload the big images
	 	* 
	 	*/
	 	// go through each link from the list of thumbnails	 		
	 	$link.each(function() {
	 		
	 		var $this = $(this),
	 			$currLi = $this.closest('.visuals li'),
	 			$currGroup = $this.closest('.hentry'),
	 			currIndex = $currLi.index(),
	 			groupIndex = 0,
	 			url = $this.attr('href');
	 		
	 		// if there's groups set right index
	 		if ($currGroup.length) {
	 			var groupIndex = $currGroup.index('.hentry');
	 		}
	 		
	 		// if a bg does not already exists in its proper subdivision (group)
	 		// add it
	 		var $currBgGroup = $vSlider.find('.group_' + groupIndex);
	 		var $currBg = $currBgGroup.find('.bg_' + currIndex);
	 			 		
	 		if ( $currBgGroup.length && $currBg.length < 1 ) {
	 		
 				// set preloader on the matching thumbnail link
 				$this.closest('li').append('<div class="preloader"></div>');
 				$currLi.find('.preloader').hide();
 					
	 			/*
	 			* wrap and append the bg image and a preloader
	 			* 
	 			*/
				// CSS3 on modern browsers	
				if ( Modernizr.backgroundsize ) {
					// create a div to show image as background
					var $newBg = '<div class="bg bg_' + currIndex + ' group_' + groupIndex + '" style="display:none;"></div>'; //"
					// append it to group
					$vSlider.find('.group_' + groupIndex).first('.group').append($newBg);
					
					// preload the bg image and then set it
					// http://stackoverflow.com/questions/5057990/jquery-background-image-loaded-check
					$('<img/>').attr('src', url).load(function() {
						$vSlider.find('.group_' + groupIndex).first('.group').find('.bg_'+ currIndex).css('background-image', 'url(' + url + ')'); //'
						//remove preloader
						$currLi.find('.preloader').remove();
					});
					
				// img fallback for older browsers
				} else {
					var $newBg = '<div class="bg bg_' + currIndex + ' group_' + groupIndex + '" style="display:none;"></div>'; //"
					$vSlider.find('.group_' + groupIndex).first('.group').append($newBg);
					
					// preload the bg image in an img-element
					var $img = $('<img src="' + url + '" />');
					$img.load(function() {
						$vSlider.find('.group_' + groupIndex).first('.group').find('.bg_'+ currIndex).append($img);
						//remove preloader
						$currLi.find('.preloader').remove();
					});
				}
			 }
	 	});
	 	
	 	/*
	 	* Cache new variables
	 	* for use in controls and such
	 	*
	 	*/
 		// the bg images, including new ones
 		$bg = $vSlider.find('.bg');
	 		 		
		/*
		* scroll through the visuals
		* depends on the group they're in
		*
		*/
        $button.unbind('click');
        $button.click(function(e) {
        	
        	/*
        	* find the group for which the controls have to work
        	* only target the matching slides
        	*/
        	
        	// find group index based on selected visual thumb
        	// otherwise use the first group
			// find current bg index based on thumb
			// otherwise ust first one
        	var	$group = $vSlider.find('.group'),
        		$currLi = $visuals.find('.selected'),
        		$currGroup = $currLi.closest('.hentry'),
        		$li = $currGroup.find('.visuals li'),
	 			$preloaders = $currGroup.parent().find('.preloader'),
        		groupIndex = 0,
        		currIndex = 0;
        	
        	// if multiple groups
        	if ( $group.length > 1 ) {
        		groupIndex = 1;
        	}
        	
        	// if a selected thumb exists
        	if ( $currLi.length ) {
        		// get group index
        		// if there's groups
        		if ($currGroup.length) {
        			// just 1 group
        			var groupIndex = $currGroup.index('.hentry');
        		}
        		// get bg index
        		currIndex = $currLi.index();
        	}
        	
            // get group based on index
            var $group = $vSlider.find('.group_' + groupIndex);
            
            // get number of items
            numItems = $li.length;
           
            var $prev, $next;
            
            // Reset z-indexes
            $bg.css('z-index', 5);
                                                        
            // Get current slide       
            $prev = $group.find('.bg:eq(' + currIndex + ')'); //'
            
            // Set index and show on top
           $prev.css('z-index', 15);

            // The next index
            // if 'next' is clicked, increase index
            // else decrease
            if ($(this).hasClass('ico-next')) {
            	currIndex++;
            } else {
            	currIndex--;
            }     
                                 
            // Check if last
            if(currIndex === numItems)
            {
            	// index stays the same
                currIndex = numItems - 1;
            }
            
            // Check if first
            if(currIndex < 0)
            {
            	// index stays the same
                currIndex = 0;
            }
            
            // select new thumb
            // show preloader if there is one
            // hide it on other thumbs
            var $nextLi = $li.eq(currIndex);
            var $preloader = $nextLi.find('.preloader');
                        
            $currLi.removeClass('selected');
            $nextLi.addClass('selected');
            
            if ($preloaders.length) $preloaders.hide();
            if ($preloader.length) $preloader.show();
            
            // Fade out previous slide
            $prev.fadeOut(200).removeClass('bg-selected');
                
            // Get the next slide to show
            $next = $group
                .find('.bg:eq(' + currIndex + ')') //'
                .fadeIn()
                .addClass('bg-selected');
                            
            //if on last, hide next button
            if ( currIndex === numItems - 1 ) {
            	$nextBtn.hide();
            } else {
            	$nextBtn.show();
            }
            
            //if on first, hide prev button
            if ( currIndex === 0 ) {
            	$prevBtn.hide();
            } else {
            	$prevBtn.show();
            }
            
            e.preventDefault();
        });
       
	 	/*
	 	* click thumb, remove current 'selected' class, hide bg
	 	* add 'selected' to active li, get href, set new active bg
	 	*
	 	*/
	 	$link.unbind('click');
	 	$link.click(function(e) {
	 			
	 		var $this = $(this),
	 			$currLi = $this.closest('li'),
	 			$currGroup = $currLi.closest('.hentry'),
	 			$li = $currGroup.find('.visuals li'),
	 			$preloaders = $currGroup.parent().find('.preloader'),
	 			$preloader = $currLi.find('.preloader'),
	 			numItems = $li.length,
	 			url = $this.attr('href'),
	 			$currBg = $body.find('.bg-selected'),
	 			groupIndex = 0,
	 			currIndex = 0;
	 			 		
	 		// if multiple groups
	 		if ( $group.length > 1 ) {
	 			groupIndex = 1;
	 		}
	 		
	 		// if a selected thumb exists
	 		if ( $currLi.length ) {
	 			// get group index
	 			// if there's groups
	 			if ($currGroup.length) {
	 				// just 1 group
	 				var groupIndex = $currGroup.index('.hentry');
	 			}
	 			// get bg index
	 			currIndex = $currLi.index();
	 		}
	 		
	 		// show controls if more then 1 thumbnail
	 		if ($currGroup.find('li').length > 1) {
	 			$controls.show();
	 		} else {
	 			$controls.hide();
	 		}
	 		
	 		// remove old selected class
	 		$visuals.find('.selected').removeClass('selected');
	 		$currLi.addClass('selected');
	 		
	 		// show preloader if there is one
	 		// hide it on other thumbs
	 		if ($preloaders.length) $preloaders.hide();
	 		if ($preloader.length) $preloader.show();
	 		
	 		// check each bg
	 		$bg.each(function() {
	 			var $this = $(this);
	 			
	 			// if one has classes matching the index of the current li AND the containing article
	 			if ( $this.hasClass('bg_' + currIndex) && $this.hasClass('group_' + groupIndex)) {
	 					 				
	 				//fade out old selected one
	 				$bg.fadeOut(200).removeClass('bg-selected');
	 				
	 				// fade in the new selected one
	 				$this.fadeIn(200).addClass('bg-selected');
	 				
	 				// remove the bg-image that's outside the slider if there is (still) one
	 				if ($activeBg.length) $activeBg.remove();
	 			}
	 		});
	 		
	 		//if on last, hide next button
	 		if ( currIndex === numItems - 1 ) {
	 			$nextBtn.hide();
	 		} else {
	 			$nextBtn.show();
	 		}
	 		
	 		//if on first, hide prev button
	 		if ( currIndex === 0 ) {
	 			$prevBtn.hide();
	 		} else {
	 			$prevBtn.show();
	 		}
	 		
	 		// ajaxCall
	 		$.ajax({
	 		    url: '/ajax/background',
	 		    type: "POST",
	 		    data: {image: url}	,
	 		    success: function(result) {
						 								
	 		    },
	 		    error: function(result) {
	 		    }
	 		});
	 	 		
	 		e.preventDefault();
	 	});
	 },
	
	/* 
	* vertical slider
	* ex. scrolling through people on contactpage
	*/
	vertSlider: function($this)
	{
		var
		   	//cache scrolling parts
		    $strip = $this.find('ul'),
		    
		    $stripWrapper = $strip.closest('.inner');
		    
		    $stripItem = $strip.find('li'),
		    
		    //height = sum of first 4 li
		   /* sliderHeight = 
		    	Math.round(
		    		$stripItem.eq(0).outerHeight(true) +
			    	$stripItem.eq(1).outerHeight(true) +
		    		$stripItem.eq(2).outerHeight(true) +
		    		$stripItem.eq(3).outerHeight(true)
		    		- 10)
		    ,*/
		    
		    i=0,
		    sliderHeight = -10;
		    	
		    // scroll by height of first visible list-item
		    currItemHeight =$stripItem.first().outerHeight(true);
		    
		    // Keep track of the first visible li
		    currIndex = $stripItem.first().index(),
		    
		    numItems = $stripItem.length;
		    
		    // Containers containing the controls for jumping to slides
		    $controls = $('<div class="controls"></div>'),
		    
		    $prevBtn = $('<button class="ico ico-prev">Previous</button>'),
		    
		 	$nextBtn = $('<button class="ico ico-next">Next</button>');
		 	
		 	
		// calculate slider height based on first i items
		for (i=0;i<=3;i++) {
			sliderHeight = sliderHeight + ($stripItem.eq(i).outerHeight(true));
		}
		var sliderHeight = Math.round(sliderHeight);
		
		// fix height				
		$stripWrapper.height(sliderHeight);
				 	
		// Add controlbuttons to page
		// no controls if less than x items
		if ( numItems > 4 ) {
			$controls.append($prevBtn);
			$controls.append($nextBtn);
		}
		
		// hide prev on first slide
		$this.append($controls).find($prevBtn).hide();
		
		$controls.find('button').click(function(e) {
		
			e.preventDefault();
			
			// ul position
			var stripPos = $strip.position().top;
							
			if ( $(this).hasClass('ico-prev') ) {
				// new current row
				currIndex = currIndex - 1;
				var itemHeight = $stripItem.eq(currIndex).outerHeight(true);
				
				$strip.filter(':not(:animated)').animate({top: stripPos + itemHeight}, 'fast'); //'
				
			} else {
				// new current row
				var itemHeight = $stripItem.eq(currIndex).outerHeight(true);
				currIndex = currIndex + 1;
				$strip.filter(':not(:animated)').animate({top: stripPos - itemHeight}, 'fast'); //'
			}
			
			// if on last row, hide next button
			if ( currIndex === numItems - 4 ) {
				$nextBtn.hide();
			} else {
				$nextBtn.show();
			}
			
			//if on first row, hide prev button
			if ( currIndex === 0 ) {
				$prevBtn.hide();
			} else {
				$prevBtn.show();
			}
			
			// calculate new slider height based on next/prev i items
			sliderHeight = -10;
			for (i=currIndex;i<=(currIndex + 3);i++) {
				sliderHeight = sliderHeight + ($stripItem.eq(i).outerHeight(true));
			}
			var sliderHeight = Math.round(sliderHeight);
						
			$stripWrapper.animate({height: sliderHeight}, 200);
			
		});
	},
	
	/* 
	* slide out content to make room for page-slider
	*
	*/
	showPageSlider: function($this)
	{
		var $more = $this.find('a'),
       // $link = $this.attr('href'), FIX: Meerdere links in een artikel
			$preloader = '<div class="preloader"></div>',
			$body = $('body'),
			$bg = $body.find('.bg-selected'),
			$container = $body.find('.container');
		
		$more.unbind('click').click(myHandler);
		
		function myHandler(e) {
			
			var	$this = $(this),
				currIndex = 0,
				$item = $this.closest('li');
				$article = $this.closest('article');

                // JELTE: FIX meerdere links op een pagina
			$link = $this.attr('href');

			// if visuals, get index from thumbnail list
			if ($item.length) {
				currIndex = $item.index();
			}
							
			$article.append($preloader);
			
			$.ajax({
			    url: $link,
			    type: "POST",
			    data: {}	,
			    success: function(result) {
			    
			   		$article.find('.preloader').remove();
			   		
			   		//open panel
			   		mjs.animations.slideContent($this);
			   		$('#slide-content').hide().trigger('click').addClass('ico-close');
			   		
			   		// hide bg
			   		$bg.fadeOut();
			   		
			   		// put result in jQuery object
			   		var $result = $(result);
			   		
			   		// append that
			   		var slideWidth = $result.find('img').width();
			   		$result.css('left', '-' + slideWidth + 'px').show().appendTo($body);
			   		
			   		// activate the page slider
			   		mjs.animations.pageSlider($result, currIndex);
			   		
			   		// go to top of page
			   		$('html, body').animate({scrollTop:0}, 'fast');
			   		
			   		// bring in the slider
			   		$result.animate({left: '0'},{duration: 500, easing: "easeInBack" });
			   		//add dropshadow
			   		$container.addClass('dropshadow');
			   		
	   				// show the 'close' button
	   				$('#slide-content').show();
	   							
			    },
			    error: function(result) {
			    }
			});
			
			e.preventDefault();
		}
	},
	
	/* 
	* scroll through pages
	*
	*/
	pageSlider: function($this, currIndex)
	{
		
		var
			$body = $('body'),
		    
		    // slides
		    $li = $this.find('li'),
		    		    
		    // Number of slides
		    numItems = $li.length,
		    
		    slideWidth = $li.find('img').width(),
		    		    
		    // Containers containing the controls for jumping to slides
		    $controls = $('<div class="controls">'
			    	+ '<button class="ico ico-prev">Previous</button>'
			    	+ '<button class="ico ico-next">Next</button>'
			    +'</div>');
			    		    
		// Add controls to page
		$this.append($controls);
		
		var $controls = $('.controls'),
			$button = $controls.find('button'),
			$prevBtn = $controls.find('.ico-prev'),
			$nextBtn = $controls.find('.ico-next');
		
		// hide prev on first slide
		if ( currIndex === 0 ) {
			$prevBtn.hide();
		}
		
		// if less then 2 slides or clicked thumb's index is last one
		// no need for next button
		if ( numItems < 2 || currIndex === numItems - 1 ) {
			$nextBtn.hide();
		}
						
		/**
		 * reset()
		 * Resets the z-indexes for each of the slides
		 */            
		function reset()
		{
		    $li.css('z-index', 5).hide();            
		}
		
		/**
         * fades between slides
         *
         */
        function animateSlides() {
                            
            var $prev, $next;
            
            // Reset z-indexes
            reset();
                                                        
            // Get current slide       
            $prev = $this.find('li:eq(' + currIndex + ')'); //'
            
            // Set index and show on top
           $prev.css('z-index', 15);

            // The next index
            // if 'next' is clicked, increase index
            // else decrease
            if ($(this).hasClass('ico-next')) {
            	currIndex++;
            } else {
            	currIndex--;
            }              
            
            // Check if last
            if(currIndex >= numItems)
            {
                currIndex = 0;
            }
            
            // Check if first
            if(currIndex < 0)
            {
                currIndex = numItems - 1;
            }
            
            // Fade out previous slide
            
            var slideWidth = $prev.find('img').width();
            
            $prev
            	.animate({left: '-' + slideWidth + 'px'}, 200)
                .fadeOut(200, function(e) {
                    // Callback when animation is done           
                });
                
            // Get the next slide to show
            $next = $this
                .find('li:eq(' + currIndex + ')') //'
                .show()
                .animate({left: '260px'}, 200)
                .css('z-index', 10);
            
            //if on last, hide next button
            if ( currIndex === numItems - 1 ) {
            	$nextBtn.hide();
            } else {
            	$nextBtn.show();
            }
            
            //if on first, hide prev button
            if ( currIndex === 0 ) {
            	$prevBtn.hide();
            } else {
            	$prevBtn.show();
            }
        }
       
        /*
        * the controls
        *
        */
    	$button.click(animateSlides);
    	
    	/*
    	* Select first slide (or get the right index)
    	*
    	*/
    	$li.css('left','-' + slideWidth + 'px').hide();
    	$li.eq(currIndex)
    		.show()
    		.css({'z-index': 10, 'left': '260px'});
    		
    	/*
    	* Scale slide containers width with window (now & on resize)
    	* Scale body height with slide of highest image
    	*/
    	var sliderPadding = parseFloat($this.find('ul').css('paddingLeft')),
    		winWidth = $this.width() - sliderPadding;
        $li.width(winWidth);

    	$(window).resize(function() {
    		//window width - padding to the left
    		var winWidth = $this.width() - sliderPadding;
    		$li.width(winWidth);
    	});
	}
});