function launchOutfitLayer(layerURL, uuid) {
	var bodyTag = $('body');
	// Find out if we are in IE6
	var isIE6 = ($.browser.msie && (parseFloat($.browser.version) < 7));
	// Hide the refinement and sort selects if we are in IE6 so that they don't render through the layer	
	if (isIE6) {
		$("#refinements_controls > dl > dd > select").css("visibility", "hidden");
		$("#category-sort > dd > select").css("visibility", "hidden");
	}

	// Build the greyed out layer to disable interaction with the rest of the body
	bodyTag.append("<div id=\"disable_body_layer\">&nbsp;</div>");
	var nlh = $("body").height(); // new layer height
	var nlw = $("body").width(); // new layer width
	$("#disable_body_layer").css("height", nlh + "px");
	$("#disable_body_layer").css("width",  nlw + "px");
	// Change url value to get the needed page code
	
	openLoadingLayerIndicator().css("z-index", 40002);
	
	$.ajax({
	  url: layerURL,
      data: { uuid: uuid },
	  cache: true,
	  success: function(html){
	  	closeLoadingLayerIndicator();
	  	
      	$('body').addClass('popup');
		$("body").append(html);
		positionOutfitLayer();
        init_tabs();
        product_options();
        product_sizes();
	  }
	});
}

function launchPrintLayer(layerURL, printURL) {
	var bodyTag = $('body');
	// Find out if we are in IE6
	var isIE6 = ($.browser.msie && (parseFloat($.browser.version) < 7));
	// Hide the refinement and sort selects if we are in IE6 so that they don't render through the layer	
	if (isIE6) {
		$("#refinements_controls > dl > dd > select").css("visibility", "hidden");
		$("#category-sort > dd > select").css("visibility", "hidden");
	}

	// Build the greyed out layer to disable interaction with the rest of the body
	bodyTag.append("<div id=\"disable_body_layer\">&nbsp;</div>");
	var nlh = $("body").height(); // new layer height
	var nlw = $("body").width(); // new layer width
	$("#disable_body_layer").css("height", nlh + "px");
	$("#disable_body_layer").css("width",  nlw + "px");
	// Change url value to get the needed page code
	$.ajax({
	  url: layerURL,
	  cache: true,
	  success: function(html){
      	$('body').addClass('popup');
		$("body").append(html);
		positionOutfitLayer();
	  }
	});

	$.ajax({
	  url: printURL,
	  cache: true,
	  success: function(html){
		$("#outfit_layer").append(html);
		checkOverlayHeight();
	  }
	});
}

var checkHeightTimeout = null;

function positionOutfitLayer() {
	var checkHeightTimeout = null;
	var viewport = function() {
		viewport.windowX = (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth;
		viewport.windowY = (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;
		viewport.scrollX = (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft;
		viewport.scrollY = (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop;
		viewport.pageX = (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth;
		viewport.pageY = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;
		return viewport;
	};
	view = new viewport();
	winSY = view.scrollY;
	outfitLayer = $("#outfit_layer");
	$(outfitLayer).css("left", ( view.windowX - $(outfitLayer).width() ) / 2 + "px");
	$(outfitLayer).css("top", winSY + 50 + "px");
	var grayLayerHeight = $("#disable_body_layer").height();
	var outfitLayerHeight = $(outfitLayer).height();
	var newGrayLayerHeight = outfitLayerHeight + winSY + 100;
    checkHeightTimeout = setTimeout("checkOverlayHeight()",300);
    $(window).resize(function(){
	  $('#disable_body_layer').css('width','100%');
	  view = new viewport();
	  $(outfitLayer).css("left", ( view.windowX - $(outfitLayer).width() ) / 2 + "px");
	});
};

function checkOverlayHeight() {
	var bodyHeight = $('body').height();
	var overlay = $("#disable_body_layer");
	var outfitLayerHeight = $("#outfit_layer").height() + winSY + 100;
	if (overlay.height() == outfitLayerHeight) {
		clearTimeout(checkHeightTimeout);
		return;
	} else {
		overlay.height(outfitLayerHeight);	
		checkHeightTimeout = setTimeout("checkOverlayHeight()",300);
	}
	if (outfitLayerHeight < bodyHeight) {	
		overlay.css('height',bodyHeight + 50 + 'px');
		clearTimeout(checkHeightTimeout);
	}
}

// Close Layer button which removes the layer and if IE6 then unhide the selects
function closeOutfitLayer() {
	$('#outfit_layer').remove();
    $('#disable_body_layer').remove();
    $("#refinements_controls > dl > dd > select").css("visibility", "visible");
	$("#category-sort > dd > select").css("visibility", "visible");
    $('body').removeClass('popup');
}

function printOutfitLayer(layerURL) {
	$('#outfit_container').remove();
	// Change url value to get the needed page code
	$.ajax({
	  url: layerURL,
	  cache: true,
	  success: function(html){
        $('body').addClass('popup');
		$("#outfit_layer").append(html);
		checkOverlayHeight();
	  }
	});
}

function openLoadingLayerIndicator(){
    var $indicator = $("<div id='LayerLoadingIndicator'><img src='http://content.childrensplace.com/www/b/TCP/assets/images/giftcard/ima-glo-loading.gif' width='50' height='50'></div>")
    $indicator
        .css({ 
            "float": "left",
            "position": "absolute",
            "left" : document.documentElement.scrollLeft + ($(window).width() * .5) - ($indicator.width() * .5),
            "top" : document.documentElement.scrollTop + ($(window).height() * .5) - ($indicator.height() * .5)
        })
        .appendTo("body")
        .children("img").bind("contextmenu", function(e){ e.preventDefault(); return false; });
    return $indicator;
}
function closeLoadingLayerIndicator(){
    $("#LayerLoadingIndicator").remove();
}