function popup(pageToLoad, windowname, width, height, scroll, center, resize, dependent)
{
	if (! window.focus) return true;
	var winname = null;
	var href;
	var args = 'width='+width+',height='+height;
	
    var xposition = 0;
    var yposition = 0;
    if (center)
    {
        xposition = (screen.availWidth - width - 10) * .5;
        yposition = (screen.availHeight - height - 30) * .5;
		args = args + ',left='+xposition+',top=' + yposition;
    }

	if (scroll)		{args = args + ',scrollbars=yes'; }
		
    if (resize)		{args = args + ',resizable=yes'; }
		
    if (dependent == null || dependent == "") {args = args + ',dependent=0'; }
    
	if (typeof(pageToLoad) == 'string')
		href=pageToLoad;
	else
		href=pageToLoad.href;
	winname = window.open(href, windowname, args+'location=0,menubar=0,status=0,titlebar=0,toolbar=0,hotkeys=0,copyhistory=0');
	winname.opener = self;
	winname.focus();
	return false;
}




$(document).ready(function(){

	// clearing inputfields automatically and restoring them if nothing is entered
	//creating the condition which checks for any inputs of the correct type
	if ($('input.textfield').length > 0){
		//creating the array to keep data in
		swapValues=[];
		// running the functions individually through any inputs found using 'each' to bind functions
		$("input.textfield").each(
			// the function is given a number
			function(i){
				// the number also applies to the 'nth' variable for the array and stores the default text
				swapValues[i]=$(this).val();
				$(this).focus(function(){
					if($(this).val()==swapValues[i]){
						$(this).val("");
				    }
				}
				).blur(function(){
					if($.trim($(this).val())==""){
						$(this).val(swapValues[i]);
					}
				});
			}
		);
	}
	
	// turn a UL grid into a series of self-clearing ULs that behave like table rows
	/*
	Requires:
	- ul.row style defined in CSS if borders are required
	- "clearfix"
	- you may need to add some styles for ".gridRow", "ul.gridRow" and "ul.gridRow li"

	Just put in a selector and the number of columns in the "makeGridList" call at the end.
	*/
	
	function makeGridList(element, numCols) {

		$("<div class='gridRowHolder'></div>").insertAfter(element);		// a container for the new ULs

		$(element).children("li").each(function(i) {

			$(this).css("min-height", "0");		// get rid of min-height
			if (i % numCols == 0) {
				$("<ul class='clearfix gridRow productul'></ul>").appendTo($(this).parents().find("div.gridRowHolder")[0]);
			}
			$(this).clone().appendTo($(this).parents().find("div.gridRowHolder > ul:last")[0]);

		});
		$(element).remove();	// remove the original UL
		$("div.gridRowHolder").removeClass("gridRowHolder");
		$("ul.gridRow li:last-child").css("margin-right","0");	// gets rid of any right margin on the last item of each row
	}

	makeGridList("ul.gridList", 5);	// 1st argument is a selector for the original UL, the 2nd is the number of columns in the grid

	setupZoomButtons($("#product-item .product-image .product-tasks"));
	
	setupCarousel($('#product-variants ul'));
});

/* Code required by Scene7 */

function changeImage(image, navxpos)
{
	s7zoom.setImage(image, true);
	zoomNav = document.getElementById("izNav");
	zoomNav.style.left = navxpos;
}

function changeSelectedColor(colorIndex)
{
	colorDropdown = document.getElementById("sltVariant");
	colorDropdown.selectedIndex = colorIndex;
	submitProductDetailForm();
}

function runS7init()
{
	s7initTimerID = setInterval("tryS7init()", 200);
}

function tryS7init()
{
	if (typeof SjElement != "function")
	{ 
		return;
	}
	clearInterval(s7initTimerID);
	s7init("s7zoom");
}

// Setup zoom buttons
function setupZoomButtons(container) {
	
	if (!container.length) { return }
	
	var zoomButtonContainer = $("<li><div id='zoomcontrols'></div></li>");
	var zoomInButton = $("<div class='button'><a id='zoomin' title='Zoom In'><img src='/assets/cross/images/zoom-in-icon-btn.gif'/></a></div>");
	var zoomOutButton = $("<div class='button'><a id='zoomout' title='Zoom Out'><img src='/assets/cross/images/zoom-out-icon-btn.gif'/></a></div>");
	var zoomResetButton = $("<div class='button'><a id='reset' title='Reset'><img src='/assets/cross/images/zoom-reset-icon-btn.gif'/></a></div>");
	zoomButtonContainer.prependTo(".product-tasks ul");

	$("#zoomcontrols").append(zoomInButton, zoomOutButton, zoomResetButton);
	$(".button a").addClass("nofocus");
	$("#zoomin").click(function(){
		s7zoom.zoomIn();
	});
	$("#zoomout").click(function(){
		s7zoom.zoomOut();
	});
	$("#reset").click(function(){
		s7zoom.reset();
	});

}

// Set up showcase carousel
function setupCarousel(list) {

	var visibleItems = 6; 	// how many items visible in carousel

	if (list.children("li").length <= visibleItems) { return; }

	// Set up carousel structure
	list
		.wrap('<div class="scrollable"></div>')
		.fadeIn("slow");

	var carousel = $('.scrollable');
	
	// setup arrows
	carousel.before('<a class="prev" title="Previous"></a>');
	carousel.after('<a class="next" title="Next"></a>');
	

	// Initialize scrollable  
	carousel.scrollable({
		items: 		'.more-products',
		speed: 		400,
		size: 		visibleItems,
		onSeek: 	function(){
			$('a:not(.disabled)').css('opacity', 1);
			$('.disabled').css('opacity', .3);
		}
	});

	$('.disabled').css('opacity', .3);

}