// JavaScript Document for Aussie SE product pages.
$(document).ready(function() {
// We need to create the product indicator line based on how many products are in the list.
// We do this by finding the number of products, subtracting the total from from the width we are allowed to play with, 820px, in order to cater for 1px right margins, and finally dividing what we are left with by the the total again.
// Find the number of products
var numProducts = $('#productIndicator ul').children('li').size();
// Subtract the number of products from the width of the ul container element.
var listWidth = $('#productIndicator ul').width() - numProducts;
// Calculate the width of each li element.
var listElementWidth = Math.floor(listWidth / numProducts);
// Let's apply the numbers to our page elements along with the appropriate CSS.
$('#productIndicator ul li').width(listElementWidth)
.height(4)
.css({float: 'left', marginRight: '1px'});
$('#productIndicator ul li a').width(listElementWidth)
.height(4)
.css({display: 'block', overflow: 'hidden', backgroundColor: '#000', opacity: '0.1'})
.text('');
// Highlight div that sits behind the list.
$('#productIndicator ul').after(
''
);
// Variable to determine the left position of the productHighlight div.
//var window.onPos;
// We'll establish the default number of window.onPos based on what page we are on.
if (typeof(window.onPos) == 'undefined') {
$('#productIndicator ul li a').each(function() {
if ($('body').attr('class') == $(this).attr('href').slice(10, $(this).attr('href').length - 4)) {
window.onPos = $(this).parent().position().left;
}
});
}
// We need to set the div productHighlight's position to be whatever link was clicked.
$('#productHighlight').width(listElementWidth)
.height(4)
.css({position: 'absolute', top: '0px', left: window.onPos, overflow: 'hidden', backgroundColor: '#9900cc', zIndex: '0'});
// We'll move productHighlight onMouseOver.
$('#productIndicator ul li a').hover(
function() {
$('#productHighlight').animate({'left': $(this).parent().position().left + 'px'}, {queue: false});
},
function() {
//alert(window.onPos);
$('#productHighlight').animate({'left': window.onPos}, {queue: false});
}
);
// We are setting this for the purposes of the carousel effect below.
$('#containerProductsTxt').css('overflow', 'hidden');
// Click function to fade in and out product pages without page reload.
$('#productIndicator ul li a').click(function() {
// We need to get the offset of the clicked element so that it acts as the default point of return for the mouseOver effect.
window.onPos = $(this).parent().position().left;
$('#productHighlight').css('left', window.onPos);
// Get the URL from the clicked element.
var href = $(this).attr('href');
// We also dynamically replace the href with the previous and next ones in the list.
assignUrls(href);
// Checking to see if the TAF overlay is open.
$('#containerTaf').css({'display': 'none', 'height': 0, 'opacity': 0}).width(205);
$('#containerPreview').css('display', 'none');
$('#productIndicator ul li a').hover(
function() {
$('#productHighlight').animate({'left': $(this).parent().position().left + 'px'}, {queue: false});
},
function() {
$('#productHighlight').animate({'left': window.onPos}, {queue: false});
}
);
$('#swapContent').fadeOut(600, function() {
//$('#productsContent').addClass('loading');
$('#swapContent').load(href + ' #swapContent', function() {
$.getScript('../scripts/products-functions.js');
window.setTimeout (sifrTxt, 1);
$('#swapContent').fadeIn(600);
})
});
return false;
});
// Click function to slide in previous and next product pages without reload.
$('.cycle').click(function() {
// Get the URL from the clicked element.
var href = $(this).attr('href');
// Iterate over all the products in our list. If the href attribute of the one we clicked on matches any in the list then we'll adjust window.onPos so we can move productHighlight to that position below.
$('#productIndicator ul li a').each(function() {
if ((href) == $(this).attr('href')) {
window.onPos = $(this).parent().position().left;
}
});
// We also dynamically replace the href with the previous and next ones in the list.
assignUrls(href);
// Checking to see if the TAF overlay is open.
$('#containerTaf').css({'display': 'none', 'height': 0, 'opacity': 0}).width(205);
$('#containerPreview').css('display', 'none');
// We create the illusion of a carousel effect. What really happens is that we shift the content of swapContent 700px to the left or right depending on which arrow has been clicked. It becomes invisible because of the overflow: hidden attribute on the parent container.
// We then load in the content of the next product and move the position of swapContent 700px to the right or left again.
// We then shift this back into view.
if ($(this).attr('id') == 'linkLeftArrow') {
$('#swapContent').animate({'left': '700px', 'opacity': 0}, function() {
//$('#productsContent').addClass('loading');
$(this).load(href + ' #swapContent', function() {
//$('#productsContent').removeClass('loading');
window.setTimeout (sifrTxt, 1);
$.getScript('../scripts/products-functions.js');
$(this).css('left', '-700px');
$(this).animate({'left': '0', 'opacity': 1});
$('#productHighlight').animate({'left': window.onPos}, {queue: false});
$('#productIndicator ul li a').hover(
function() {
$('#productHighlight').animate({'left': $(this).parent().position().left + 'px'}, {queue: false});
},
function() {
$('#productHighlight').animate({'left': window.onPos}, {queue: false});
}
);
});
});
}
if ($(this).attr('id') == 'linkRightArrow') {
$('#swapContent').animate({'left': '-700px', 'opacity': 0}, function() {
//$('#productsContent').addClass('loading');
$(this).load(href + ' #swapContent', function() {
//$('#productsContent').removeClass('loading');
window.setTimeout (sifrTxt, 1);
$.getScript('../scripts/products-functions.js');
$(this).css('left', '700px');
$(this).animate({'left': '0', 'opacity': 1});
$('#productHighlight').animate({'left': window.onPos}, {queue: false});
$('#productIndicator ul li a').hover(
function() {
$('#productHighlight').animate({'left': $(this).parent().position().left + 'px'}, {queue: false});
},
function() {
$('#productHighlight').animate({'left': window.onPos}, {queue: false});
}
);
});
});
}
return false;
});
// Adding container for send to a friend mechanism.
$('#productIndicator').after(
'' +
'
CLOSE X' +
'
' +
'
' +
'
' +
'
