";
return catItem;
}
/**
* Helper function to construct JSON data url with params.
*/
function getConstructedDataUrl(url) {
var u = url.replace("{type}", options.type);
u = u.replace("{ctn}", options.ctn);
u = u.replace("{language}", options.language);
u = u.replace("{country}", options.country);
return u;
}
/**
* Helper function which is executed at the end
*/
function finish() {
}
};
})(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: 7,
ctrlLeft: '.cat-scroller-ctrl-right',
ctrlRight: '.cat-scroller-ctrl-left'
},options );
// Get the correct items within the IPN container by referring to the ID
var panel_class = $(this).attr('id');
if (panel_class) {
panel_class = "#" + $(this).attr('id') + " ";
options.list = panel_class + options.list;
options.mask = panel_class + options.mask;
options.ctrlLeft = panel_class + options.ctrlLeft;
options.ctrlRight = panel_class + options.ctrlRight;
}
var items = $( options.list ).children();
var itemWidth, listWidth, maskWidth;
if( items.length < options.visible ) {
options.visible = items.length;
}
var current = 0;
var isAnimating = false;
setMaximumWidthList();
setControls();
checkControls();
/**
* 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 ).animate({ left: newPosition }, 200, function(){
$( fadeIn ).find( 'a' ).fadeIn( 100, function() {
checkControls();
});
});
});
}
/**
* 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 ) {
$( options.ctrlRight ).css( 'visibility', ( ( disable == 'begin' || items[ current - 1 ] == undefined ) ? 'hidden' : 'visible' ) );
$( options.ctrlLeft ).css( 'visibility', ( ( disable == 'end' || items[ ( current + options.visible ) ] == undefined ) ? 'hidden' : 'visible' ) );
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 ) {
return parseFloat( px.replace( 'px', '' ) );
}
/**
* Hang some eventlisteners to the arrows of the scroller.
*/
function setControls() {
$(options.ctrlLeft).click(function() {
if(isAnimating) return;
initAnimation(1);
});
$(options.ctrlRight).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( '.ipn-container' );
var maxWidth = $( container ).width();
maxWidth -= $( container ).find( '.category' ).width();
maxWidth -= pxToInt( $( container ).find( '.category' ).css( 'margin-left' ) );
maxWidth -= pxToInt( $( container ).find( '.category' ).css( 'margin-right' ) );
maxWidth -= $( container ).find( '.category-arrow' ).width();
maxWidth -= pxToInt( $( options.mask ).css( 'margin-left' ) );
maxWidth -= pxToInt( $( options.mask ).css( 'margin-right' ) );
maxWidth -= $( options.ctrlLeft ).width();
maxWidth -= pxToInt( $( options.ctrlLeft ).css( 'margin-left' ) );
maxWidth -= pxToInt( $( options.ctrlLeft ).css( 'margin-right' ) );
maxWidth -= $( options.ctrlRight ).width();
maxWidth -= pxToInt( $( options.ctrlRight ).css( 'margin-left' ) );
maxWidth -= pxToInt( $( options.ctrlRight ).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();
$( items ).css( 'margin-left', Math.round( ( maxWidth / options.visible ) - itemWidth ) / 2 );
$( items ).css( 'margin-right', Math.round( ( maxWidth / options.visible ) - itemWidth ) / 2 );
itemWidth += pxToInt( $( items[ 0 ] ).css( 'margin-left' ) );
itemWidth += pxToInt( $( items[ 0 ] ).css( 'margin-right' ) );
listWidth = itemWidth * items.length;
maskWidth = maxWidth;
if(maskWidth==737){maskWidth=727;}
$( 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");
}