// JavaScript Document
(function( window, document, $, undefined ){
	
if(typeof window.Philips == "undefined") {
	window.Philips = {};
}
var Philips = window.Philips;

/** @namespace */
Philips.PEX = Philips.PEX || {};

var PEX = Philips.PEX;



PEX.thumbList = function (options) {  
	
	this._def = {	 
		 label360:'360 View'
	} 
	 
	
	this._o = $.extend({}, this._def, options); 
	
	
	// Set default properties.
	this.sectionFrame = "section-frame";
	this.list = ".cat-scroller-list";
	this.item = ".cat-scroller-item";
	this.itemLink = ".cat-scroller-item a";
	this.selectedItem = null;
	this.container = ".cat-scroller-container";
	this.pexNavigation = ".pex-navigation";
	this.productIntro = '.cat-product-introduction'; // not used any more
	this.frameDisplayed = false;
	this._debug  = true; 
	this.callback = function(){};
	selfthumbList = this;
}


PEX.thumbList.prototype.init = function() { 
	
	if(typeof PEX.Imageviewer == "undefined") {
		PEX.Imageviewer = function(wrap,url,title){
			var img = new Image();
			// call this function after it's loaded
			img.onload = function() { 
				// make wrapper fully visible
				wrap.fadeTo("fast", 1); 
				// change the image
				wrap.find("img").attr("src", url);
				wrap.find("img").attr("title", title);
				wrap.find("img").attr("alt", title);
			}; 
			img.src = url;
		};
	}
	
	if(typeof PEX.Videoviewer == "undefined") {
		PEX.Videoviewer = function(wrap,url){};
	}
	
	if(typeof PEX.Degrees360viewer == "undefined") {
		PEX.Degrees360viewer = function(wrap,url){};
	}
};


PEX.thumbList.prototype.run = function() { 
		this.init();

		$(this.sectionFrame).hide(); 
		$(this.pexNavigation).inPageNavigationScroller({
			direction: ""
		});
	 
 
		$(selfthumbList.list).bind('animationStopped', function(event){ 
			
			var animate = true;
			var position = null;
			var space = 38;
			if($.browser.msie && jQuery.browser.version.split(".")[0] == 6){
				space = 28; 
			}
			if(event.position != undefined){
				position = event.position;
			}else{
				position = $(".cat-scroller-list").position().left;
			}
			if(selfthumbList.currentItem != null){
				if($(selfthumbList.currentItem).css("display") != "none"){
					if($.browser.safari){
						var frameX = $(selfthumbList.currentItem).position().left + space + position;
						var containerX = $('.cat-scroller-container').position().left;
						var containerWidth = $('.cat-scroller-container').width();
						if(frameX > containerX + containerWidth || frameX < containerX){
					 		$('#selection-frame').hide();
							selfthumbList.frameDisplayed = false;
						}else{
							selfthumbList.frameDisplayed = true;
							animate = false;
						}
					}else{
						if(selfthumbList.frameDisplayed == false){
							//$('#selection-frame').show();
							selfthumbList.frameDisplayed = true;
							animate = false;
						}
					}
				}else{
					 $('#selection-frame').hide();
					selfthumbList.frameDisplayed = false;
				}
				if(animate == true){
					$('#selection-frame').animate({
					    left: ($(selfthumbList.currentItem).position().left + space + position)
					  }, 200, function(){
						  //
					  });
				}else{
					$('#selection-frame').animate({
					    left: ($(selfthumbList.currentItem).position().left + space + position)
					  }, 200, function(){
						  $('#selection-frame').show();
					  });
				}
			}
		});
		
		$(this.itemLink).click(function(e) {
			selfthumbList.currentItem = $(e.currentTarget); 
			var url = $(e.currentTarget).attr('href').split('media=')[0];
			var type = $(e.currentTarget).attr('href').split('media=')[1];
			var title = $(e.currentTarget).attr('title'); 
			$(".item-content").removeClass("active"); 
			$(this).children(".item-content").addClass("active");
			$(".cat-product-introduction").removeClass("activeIntro");  
			var space = 38;
			if($.browser.msie && jQuery.browser.version.split(".")[0] == 6){
				space = 28; 
			}
			$('#selection-frame').animate({
				    left: ($(e.currentTarget).position().left + space + $(".cat-scroller-list").position().left)
			 	}, 500, function() {
				   selfthumbList.callback(url.split("?")[0].split("/")[url.split("?")[0].split("/").length-1]);
				   $("#selection-frame").show(5);
			  });
			  
			   
			
			return false; 
			
		});
		 
	$('.cat-scroller-ctrl-right').show(); 
	$('.cat-scroller-ctrl-left').show();	 
	var fimg = this._getFirstTypeD('image'); 
	var strValImg = '<div class="images-amount-label"><div class="images-amount-icon"><img src="/consumerfiles/assets/nps/images/camera.gif" width="19" height="24" /></div>Images&nbsp;(' + this._getTotalImageCount() + ')</div>';
	
	var strVal360 = '<div class="images-amount-label">' + this._o.label360 + ' </div>';
	
	 
    var f360 = this._getFirstTypeD('360View') ; 

	
	$(this.itemLink).each(function(index){
		if(index == fimg ) {  
			$(this).children('.item-content').append(strValImg);  
		}else if(index == f360) {
			 if(fimg >= 0)  $(this).children('.item-content').append('<div class="thumb-divider"></div>');  
			 $(this).children('.item-content').append(strVal360); 
			
		}
	});
	

}

PEX.thumbList.prototype._getFirstTypeD = function(strType) {
	var rval = 0	 
	$(this.itemLink).each(function(index){
		var aobj =  $(this)[0];
		var ahf = $(aobj).attr('href')
		ahf = ahf.split('media=')[1].split('&')[0];
		if(ahf == strType){ 
			rval = index; 
			return false;
		}
	});
	return rval; 
}
 


PEX.thumbList.prototype._getTotalImageCount = function() {
	var rval = 0	 
	$(this.itemLink).each(function(index){
		var aobj =  $(this)[0];
		var ahf = $(aobj).attr('href')
		ahf = ahf.split('media=')[1].split('&')[0];
		if(ahf == 'image')rval++; 
	});
	return rval; 
}


PEX.thumbList.prototype._log = function(strMsg){  
	if(this._debug && typeof(console) != 'undefined' )console.log(strMsg);
}

	

})(window, document, jQuery);


(function($){
/*******************************************************************************************/	
// philips.inPageNavigationScroller.js - version 1.0 - 22-6-2011 - AR/RvdV
// A jQuery plugin for the Philips In Page Navigation (scrolling categories) (IPN).
/*******************************************************************************************/
	publicMethod = $.fn.inPageNavigationScroller = function( options ) {
		
		// Set a few defaults for the plugin's properties
		options = $.extend({
			direction: '',
			list: '.cat-scroller-list',
			mask: '.cat-scroller-container',
			visible: 9,
			visibleAmount: 9,
			ctrlRight: '.cat-scroller-ctrl-right',
			ctrlLeft: '.cat-scroller-ctrl-left',				
			productIntro:'.cat-product-introduction'
		},options );
		
		// Get the correct items within the IPN container by referring to the ID
		var panel_class = $(this).attr('id');
		if (panel_class) {
			//console.log("INPAGENAVIGATIONSCROLLER: " + panel_class);
			panel_class = "#" + $(this).attr('id') + " ";
			options.list = panel_class + options.list;
			options.mask = panel_class + options.mask;
			options.ctrlRight = panel_class + options.ctrlRight;
			options.ctrlLeft = panel_class + options.ctrlLeft; 
		}
		
		var items = $( options.list ).children();		
		var itemWidth, listWidth, maskWidth;

		if( items.length < options.visible ) {	
			options.visible = items.length;
			$( options.ctrlRight ).css( 'visibility',  'hidden' );
			$( options.ctrlLeft ).css( 'visibility',  'hidden' );
			
			
		}
		
		var current = 0;
		var isAnimating = false;
		
		setMaximumWidthList();
 
	
		setControls();
		checkControls();
		if($( options.mask ).width() > $( options.list ).width() ) { 
		 	$( options.list).css('left', (($( options.mask ).width() - $( options.list ).width())/2 + 10) + "px")
		}
		/**
		 * This function handles the actual animation based.
		 * 
		 * @param {Object} fadeIn		The object that fades in during the animation.
		 * @param {Object} fadeOut		The object that fades out during the animation.
		 * @param {Object} newPosition	The position the categories has to slide to.
		 */
		function animateAction( fadeIn, fadeOut, newPosition ) {
			$( fadeOut ).find( 'a' ).fadeOut( 100, function(){	
				$( options.list ).trigger({
					type:"animationStopped",
					position:newPosition
				});
				$( options.list ).animate({ left: newPosition }, 200, function(){	
					$( fadeIn ).find( 'a' ).fadeIn( 100, function() {					
						checkControls();
					});
					$( options.list ).trigger("animationStopped");
				});
			});
		}

		/**
		 * Check if one of the controls has to be disabled;
		 * - This is done by setting the disable variable,
		 * - or by checking the position of the array.
		 * 
		 * @param {Object} disable		The position of the control that needs to be disabled (begin / end).
		 */
		function checkControls( disable ) {
			   
			if( disable == 'begin' || items[ current - 1 ] == undefined ) {  
			 	$( options.ctrlLeft ).css('background-position', '0 -8px'); 
		 
				$( options.ctrlLeft ).css('cursor', 'default'); 
			}else {   
			    $( options.ctrlLeft ).css('background-position', '0 -112px');
				$( options.ctrlLeft ).css('cursor', 'pointer');
			}
			
			if( disable == 'end' ||  items[ ( current + options.visible ) ] == undefined ) {  
			 	$( options.ctrlRight ).css('background-position', '0 -8px'); 
				$( options.ctrlRight ).css('cursor', 'default'); 
			}else {   
			    $( options.ctrlRight ).css('background-position', '0 -112px');
				$( options.ctrlRight ).css('cursor', 'pointer'); 
			}
		 
			isAnimating = false;
		}

		/**
		 * Initialize the animation based on the direction.
		 * 
		 * @param {Object} direction	The direction of the animation, -1 -> left and 1 -> right.
		 */
		function initAnimation( direction ) {
			
			// If we are already animating, return the function
			if( isAnimating ) return;
			isAnimating = true;
			
			// Check the current position of the slider and check if we are at the begin or the end.
			if( items[ current + direction ] == undefined && direction == -1 ) {
				current = 0;
				checkControls( 'begin' );
				return;
			}
			
			if( items[ ( current + options.visible - 1 ) + direction ] == undefined && direction == 1 ) {
				checkControls( 'end' );
				return;
			}
			
			current += direction;

			// Get the fadeIn and fadeOut items based on the current position in combination with the direction of the animation.
			var fadeIn, fadeOut;
			if (direction == 1) {
				fadeOut = items[ current - 1 ];
				fadeIn = items[ current + options.visible - 1 ];
			}
			else {
				fadeOut = items[current + options.visible];
				fadeIn = items[current];
			}
						
			// Now animate the action for real, based on the above set variables.
			animateAction( fadeIn, fadeOut, pxToInt( $( options.list ).css( 'left' ) ) - ( itemWidth * direction ) );
		}

		/**
		 * Convert a CSS property as a string with px to a real number.
		 * 
		 * @param {String} px	The string which ends with px.
		 */
		function pxToInt( px ) {
			//console.info("PX: " + px);
			return parseFloat( px.replace( 'px', '' ) );
		}

		/**
		 * Hang some eventlisteners to the arrows of the scroller.
		 */
		function setControls() {
			
			$(options.ctrlRight).click(function() {
				if(isAnimating) return;
				initAnimation(1);
			});
			
			$(options.ctrlLeft).click(function() {
				if(isAnimating) return;
				initAnimation(-1);
			});
		}

		/**
		 * By calculating and sum all the widths of all containers except the mask, calculate the maximum width of the mask.
		 */
		function setMaximumWidthList() {
			
			var container = $(options.list).closest( '.pex-navigation' );
			//console.log('setMaximumWidthList options.list:' + options.list);
			//console.log('setMaximumWidthList options.mask:' + options.mask);
	
			var maxWidth = $( container ).width();//maxWidth = 708;
			//console.log('setMaximumWidthList width 1:' + maxWidth);
			
			//console.log('setMaximumWidthList width 2:' + maxWidth);
		
 
			
			maxWidth -= pxToInt( $( options.mask ).css( 'margin-left' ) );
			maxWidth -= pxToInt( $( options.mask ).css( 'margin-right' ) );
	 
			maxWidth -= $( options.ctrlRight ).width();
			maxWidth -= pxToInt( $( options.ctrlRight ).css( 'margin-left' ) );
			maxWidth -= pxToInt( $( options.ctrlRight ).css( 'margin-right' ) );
	 	
			maxWidth -= $( options.ctrlLeft ).width();
			maxWidth -= pxToInt( $( options.ctrlLeft ).css( 'margin-left' ) );
			maxWidth -= pxToInt( $( options.ctrlLeft ).css( 'margin-right' ) );
 
			//maxWidth -= $(options.productIntro).width();
		 
	
			//maxWidth -= pxToInt( $( options.productIntro ).css( 'margin-left' ) );
		 
			//maxWidth -= pxToInt( $( options.productIntro ).css( 'margin-right' ) );
 
			// Some strange behaviour in IE6, who adds 16px somewhere.
			if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
				maxWidth -= 16;
			}
			
			// Center all items in the slider, based on the available space in the slider.
			itemWidth = $( items[ 0 ] ).width();
			if($( items ).length >= options.visibleAmount){
				$( items ).css( 'margin-left', Math.round( ( maxWidth / options.visible ) - itemWidth ) / 2 );
				$( items ).css( 'margin-right', Math.round( ( maxWidth / options.visible ) - itemWidth ) / 2 );
			}else{
				$( items ).css( 'margin-left', Math.round( 0 ));
				$( items ).css( 'margin-right', Math.round( 10 ));
			}
						
			itemWidth += pxToInt( $( items[ 0 ] ).css( 'margin-left' )  );
			itemWidth += pxToInt( $( items[ 0 ] ).css( 'margin-right' )  );
								
			listWidth = itemWidth * items.length;
			maskWidth = maxWidth;

			$( options.list ).width( listWidth );
			$( options.mask ).width( maskWidth );
						
			if( options.direction == "_rtl" ) {
				$( options.list ).css( 'left', ( ( ( items.length - options.visible ) * itemWidth ) * -1 ) + 'px' );
				current = items.length - options.visible;
			}			
						
			var count = 0;
			if( options.direction == "_rtl" ) {
				$( items ).reverse().each(function() {
					if( count > options.visible - 1 ) {
						$( this ).find( 'a' ).css( 'display', 'none' );
					}
					count++;
				});	
			}
			else {
				count = 0;
				$( items ).each(function() {
					if( count * itemWidth >= maskWidth ) {
						$( this ).find( 'a' ).css( 'display', 'none' );
					}
					count++;
				});
			} 
		}
	};
	
	$.fn.reverse = [].reverse;
})(jQuery);

function showIPNError() {
	$(".philips-ipn-error-message").css("display","inline");
}