var colorChipTimer = null;
var colorChipValue = 0;
var textileTimer = null;
var textileValue = 0;
var finishTimer = null;
var finishValue = 0;

function expandFinishes(jobj) {
	jobj.toggleClass("expand");
	jobj.toggleClass("collapse");
	jobj.parents(':first').next().slideToggle("normal",
		function() {
			$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
		});
}

function hideTextile(whichTxtl) {
	$('#txtlDtl-textile-hover-' + whichTxtl).remove();
	textileValue = ''
}

function hideColorChip(whichChip) {
	$('#prodDtl-colorChip-hover-' + whichChip).remove();
	colorChipValue = '';
}

function hideFinish(whichFinish) {
	$('#prodDtl-finish-hover-' + whichFinish).remove();
	finishValue = '';
}

function getAbsX(elt) { 
	return (elt.x) ? elt.x : getAbsPos(elt,"Left"); 
}

function getAbsY(elt) { 
	return (elt.y) ? elt.y : getAbsPos(elt,"Top");
}

function getAbsPos(elt,which) {
	iPos = 0;
	while (elt != null) {
		iPos += elt["offset" + which];
		elt = elt.offsetParent;
	}
	return iPos;
}


$(function() {
	$('#tab01').click(
		function() {
			activeTab = 1;		
			$("#prodDtl-overview").css("display", "block");
			$("#prodDtl-dimensions").css("display", "none");
			$("#prodDtl-finishes").css("display", "none");
			$("#prodDtl-textiles").css("display", "none");
			$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
			for(var i=1; i<5; i++) {
				$("#tab0" + i).removeClass("active");
			};
			$("#tab01").addClass("active");
			$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
		}
	);
	$('#tab02').click(
		function() {
			activeTab = 2;
			$("#prodDtl-overview").css("display", "none");
			$("#prodDtl-dimensions").css("display", "block");
			$("#prodDtl-finishes").css("display", "none");
			$("#prodDtl-textiles").css("display", "none");
			for(var i=1; i<5; i++) {
				$("#tab0" + i).removeClass("active");
			};
			$("#tab02").addClass("active");
			$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
		}
	);
	$('#tab03').click(
		function() {
			activeTab = 3;
			$("#prodDtl-overview").css("display", "none");
			$("#prodDtl-dimensions").css("display", "none");
			$("#prodDtl-finishes").css("display", "block");
			$("#prodDtl-textiles").css("display", "none");
			for(var i=1; i<5; i++) {
				$("#tab0" + i).removeClass("active");
			};
			$("#tab03").addClass("active");
			$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
		}
	);
	$('#tab04').click(
		function() {
			activeTab = 4;		
			$("#prodDtl-overview").css("display", "none");
			$("#prodDtl-dimensions").css("display", "none");
			$("#prodDtl-finishes").css("display", "none");
			$("#prodDtl-textiles").css("display", "block");
			for(var i=1; i<5; i++) {
				$("#tab0" + i).removeClass("active");
			};
			$("#tab04").addClass("active");
			$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
		}
	);
	
	$('.txtlDtl-finishesRow div').mouseover(
		function() {
			var attributes = $(this).attr('rel').split("|");
			var thisImage = $(this).children();
			var x = getAbsX($(this)[0]);
			var y = getAbsY($(this)[0]);
			x = x + 15;
			y = y + 10;
			
			if(textileValue == attributes[0].split(".")[0] && textileTimer ) {
				clearTimeout(textileTimer);
			}
			
			if(($('#txtlDtl-textile-hover-' + textileValue).length) && textileValue != attributes[0].split(".")[0]) {
				hideTextile(textileValue);
				if (textileTimer) { 
					clearTimeout(textileTimer); 					
				}
			}
			
			if(textileValue != attributes[0].split(".")[0]) {
				textileValue = attributes[0].split(".")[0];
				$('#footer').after('<div id="txtlDtl-textile-hover-' + textileValue + '" class="txtlDtl-textile-hover" style="position:absolute; top:' + y + 'px; left:' + x + 'px; z-index:99;"><div><img src="/onlinecatalog/resources/images/jpg95x95/' + attributes[0] + '" width="95" height="95" border="0" alt="" /><p>' + attributes[1] + '<br /></p></div><img src="/common/images/textileDtl-textile-bottom.png" width="120" height="8" alt="" border="0"></div>');
			}
			
			$('#txtlDtl-textile-hover-' + textileValue).hover(
			function() {
				if (textileTimer) { 
					clearTimeout(textileTimer); 					
				}
			},
			function() {
				if (textileTimer) { 
					clearTimeout(textileTimer); 					
				}
				textileTimer = setTimeout("hideTextile(textileValue)",10);
				return;
			}
	);
		}
	);
	
	$('.txtlDtl-finishesRow div').mouseout(
	function() {
		if (textileTimer) { 
			clearTimeout(textileTimer); 					
		}
		textileTimer = setTimeout("hideTextile(textileValue)",10);
		return;
	}
	);
	
	/*$('.txtlDtl-finishesRow div img').click(
		function() {
			$('.txtlDtl-finishesRow div img').removeClass("active");
			$(this).addClass("active");
			var activeImg = $(this).attr("src");
			activeImg = activeImg.split("/")[5];
			$('#txtlDtl-photoArea .photo img').attr("src","/onlinecatalog/resources/images/jpg325x325/" + activeImg);
		}
	);*/
	

	$('.prodDtl-finishesRow div').mouseover(
		function() {
			var attributes = $(this).attr('rel').split("|");
			var finishName = attributes[1];
			var thisImage = $(this).children();
			var x = getAbsX($(this)[0]);
			var y = getAbsY($(this)[0]);
			x = x - 35;
			y = y + 15;
			
			if(finishValue == attributes[0].split(".")[0] && finishTimer ) {
				clearTimeout(finishTimer);
			}
			
			if(($('#prodDtl-finish-hover-' + finishValue).length) && finishValue != attributes[0].split(".")[0]) {
				hideFinish(finishValue);
				if (finishTimer) { 
					clearTimeout(finishTimer); 					
				}
			}
			
			if(finishValue != attributes[0].split(".")[0]) {
				finishValue = attributes[0].split(".")[0];
				$('#footer').after('<div id="prodDtl-finish-hover-' + finishValue + '" class="txtlDtl-textile-hover" style="position:absolute; top:' + y + 'px; left:' + x + 'px; z-index:99;"><div><img src="/onlinecatalog/resources/images/jpg95x95/' + attributes[0] + '" width="95" height="95" border="0" alt="" /><p>' + finishName + '<br /></p></div><img src="/common/images/textileDtl-textile-bottom.png" width="120" height="8" alt="" border="0"></div>');
			}
			
			$('#prodDtl-finish-hover-' + finishValue).hover(
			function() {
				if (finishTimer) { 
					clearTimeout(finishTimer); 					
				}
			},
			function() {
				if (finishTimer) { 
					clearTimeout(finishTimer); 					
				}
				finishTimer = setTimeout("hideFinish(finishValue)",10);
				return;
			}
	);
		}
	);
	
	$('.prodDtl-finishesRow div').mouseout(
	function() {
		if (finishTimer) { 
			clearTimeout(finishTimer); 					
		}
		finishTimer = setTimeout("hideFinish(finishValue)",10);
		return;
	}
	);
	
	$('.prodDtl-textilesRow div').mouseover(
	function() {
			var attributes = $(this).attr('rel').split("|");
			var productNumber = attributes[1];
			var itemNumber = attributes[2];
			var itemName = attributes[3];
			var thisImage = $(this).children();
			var x = getAbsX($(this)[0]);
			var y = getAbsY($(this)[0]);
			x = x + 15;
			y = y + 15;
			
			if(colorChipValue == attributes[0].split(".")[0] && colorChipTimer ) {
				clearTimeout(colorChipTimer);
			}
			
			if(($('#prodDtl-colorChip-hover-' + colorChipValue).length) && colorChipValue != attributes[0].split(".")[0]) {
				hideColorChip(colorChipValue);
				if (colorChipTimer) { 
					clearTimeout(colorChipTimer); 					
				}
			}
			
			if(colorChipValue != attributes[0].split(".")[0]) {
				colorChipValue = attributes[0].split(".")[0];
				$('#footer').after('<div id="prodDtl-colorChip-hover-' + colorChipValue + '" class="prodDtl-colorChip-hover" style="position:absolute; top:' + y + 'px; left:' + x + 'px; z-index:99;"><img src="/onlinecatalog/resources/images/jpg95x95/' + attributes[0] + '" width="95" height="95" border="0" alt="" /><strong>' + itemName + '</strong><ul><li class="link"><a href="/onlinecatalog/textiles/detail.mcg?productNumber=' + productNumber + '&itemNumber=' + itemNumber + '">View Product Detail</a></li></ul></div>');
			}
			$('#prodDtl-colorChip-hover-' + colorChipValue).hover(
			function() {
				if (colorChipTimer) { 
					clearTimeout(colorChipTimer); 					
				}
			},
			function() {
				if (colorChipTimer) { 
					clearTimeout(colorChipTimer); 					
				}
				colorChipTimer = setTimeout("hideColorChip(colorChipValue)",10);
				return;
			}
	);
		}
	);
	
	
	$('.prodDtl-textilesRow div').mouseout(
	function() {
		if (colorChipTimer) { 
			clearTimeout(colorChipTimer); 					
		}
		colorChipTimer = setTimeout("hideColorChip(colorChipValue)",10);
		return;
	}
	);
	
	$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
	
	$('#prodDtl-finishes a.expandAll-finishes').click( function() {
		$('#prodDtl-finishes .finishGroup').not(":last").slideDown("normal");
		$('#prodDtl-finishes .finishGroup:last').slideDown("normal",
		 function() {
		 	$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
		 });
		$('#prodDtl-finishes li.expand').addClass("collapse").removeClass("expand");
		$('#prodDtl-finishes a.expandAll-finishes').css("display","none");
		$('#prodDtl-finishes a.collapseAll-finishes').css("display","block");
	});
	
	$('#prodDtl-finishes a.collapseAll-finishes').click( function() {
		$('#prodDtl-finishes .finishGroup').not(":last").slideUp("normal");
		$('#prodDtl-finishes .finishGroup:last').slideUp("normal",
		 function() {
		 	$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14});
		 });
		$('#prodDtl-finishes li.collapse').addClass("expand").removeClass("collapse");
		$('#prodDtl-finishes a.expandAll-finishes').css("display","block");
		$('#prodDtl-finishes a.collapseAll-finishes').css("display","none");
	});
	
	
	$('#prodDtl-textiles a.expandAll-textiles').click( function() {
		$('#prodDtl-textiles .finishGroup').not(":last").slideDown("normal");
		$('#prodDtl-textiles .finishGroup:last').slideDown("normal",
			function() {
				$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14})
			});
		$('#prodDtl-textiles li.expand').addClass("collapse").removeClass("expand");
		$('#prodDtl-textiles a.expandAll-textiles').css("display","none");
		$('#prodDtl-textiles a.collapseAll-textiles').css("display","block");
	});
	

		 
	$('#prodDtl-textiles a.collapseAll-textiles').click( function() {
		$('#prodDtl-textiles .finishGroup').not(":last").slideUp("normal");
		$('#prodDtl-textiles .finishGroup:last').slideUp("normal",
			function() {
				$('#prodDtl-tabbedCopy').jScrollPane({showArrows:true, scrollbarWidth:14})
			});
		$('#prodDtl-textiles li.collapse').addClass("expand").removeClass("collapse");
		$('#prodDtl-textiles a.expandAll-textiles').css("display","block");
		$('#prodDtl-textiles a.collapseAll-textiles').css("display","none");
	});
	
	$('.tabCopy li.collapse').click( function() {
		expandFinishes($(this))
	});
	$('.tabCopy li.expand').click( function() {
		expandFinishes($(this))
	});
});

var activeImg = 0
var enlargedImage;
function changeProdPhoto(whatSrc) {
	if (whatSrc == 'undefined') { whatSrc = 0; }
	activeImg = whatSrc;
	for (var j=0; j < roomSceneArray.length; j++) {
		$('#prodDtl-otherImgs #otherImg' + j).removeClass("active");
	}
	$('#prodDtl-otherImgs #otherImg' + whatSrc).addClass("active");
	if ($('.prodDtl-shownIn') != 'undefined') {
        var showInHtml = $('#shownIn' + whatSrc).html();
        if (showInHtml == null) {
            showInHtml = "&nbsp;";
        }
        $('.prodDtl-shownIn').html(showInHtml);
	}
    $('#prodDtl-photo').attr({src:'/onlinecatalog/resources/images/jpg375x375/' + roomSceneArray[whatSrc].src});
	//$('#prodDtl-photo').attr({src:'http://s7d4.scene7.com/is/image/KIG/' + roomSceneArray[whatSrc].src + '?layer=comp&wid=375&hei=375&fmt=jpeg&qlt=85,1&op_sharpen=1&resMode=sharp2&op_usm=1.0,1.0,5,0&iccEmbed=0'});
    if ($('#enlargeImage-popup') != 'undefined') {
		for (var k=0; k < roomSceneArray.length; k++) {
			$('#enlargedImage-popup-thumb' + k).removeClass("active");
		}
		$('#enlargedImage-popup-thumb' + whatSrc).addClass("active");
		$('#enlargeImage-enlarged').attr({src:'/onlinecatalog/resources/images/jpg525x525/' + roomSceneArray[whatSrc].src});
		if ($('.prodDtl-shownIn').length && $('.prodDtl-shownIn').html() != null) {
			$('#enlargeImage-popup-finish').html($('.prodDtl-shownIn').html())
		}
	}
}
function createEnlargedCode() {
    
    var activeShownIn = $('.prodDtl-shownIn').html();
	enlargedImage =	'<div id="enlargeImage-popup">' +
						'<div class="lightbox-canvasClose" style="width:525px;"><img src="/common/images/btn-closeLightbox.gif" width="9" height="9" alt="Close" border="0" onClick="killLightbox();" /></div>' +
						'<img src="/onlinecatalog/resources/images/jpg525x525/' + roomSceneArray[activeImg].src + '" width="525" height="525" border="0" id="enlargeImage-enlarged" />' +
						'<div id="enlargedImage-otherViews">';
//							for (var i=0; i < roomSceneArray.length; i++) {
//								enlargedImage += '<img src="/onlinecatalog/resources/images/jpg55x70/' + roomSceneArray[i].src + '" width="55" height="70" border="0" id="enlargedImage-popup-thumb' + i + '"';
//								if(activeImg == i){ enlargedImage += ' class="active"'; }
//								enlargedImage += ' onclick="changeProdPhoto(' + i + ');" />';
//							}
						enlargedImage += '<br />';
						if (activeShownIn != null) {
							enlargedImage += '<span id="enlargeImage-popup-finish">' + activeShownIn + '</span>';
						}
						enlargedImage += '</div>' +
					'</div>';
}

var activeTxtl = 0
var enlargedTxtl;
function changeTxtlPhoto(whatSrc) {
	if (whatSrc == 'undefined') { whatSrc = 0; }
	activeTxtl = whatSrc;
	for (var c=0; c < textileOptionsArray.length; c++) {
		$('#txtlColor' + c).removeClass("active");
	}
	$('#txtlColor' + whatSrc).addClass("active");
	$('#txtlDtl-photo').attr({src:'/onlinecatalog/resources/images/jpg325x325/' + textileOptionsArray[whatSrc]}); 
	if ($('#enlargeImage-popup') != 'undefined') {
		for (var d=0; d < textileOptionsArray.length; d++) {
			$('#enlargedImage-popup-thumb' + d).removeClass("active");
		}
		$('#enlargedImage-popup-thumb' + whatSrc).addClass("active");
		$('#enlargeTxtl-enlarged').attr({src:'/onlinecatalog/resources/images/jpg525x525/' + textileOptionsArray[whatSrc]});
	}
	$('#shownIn').html(textileOptionsCaptionArray[whatSrc]);
	$('#shownIn-txtlPopup').html($('#shownIn').html());
}

function createEnlargedTxtlCode() {
	var activeTxtlShownIn = $('#shownIn').html();
	enlargedTxtl =	'<div id="enlargeTxtl-popup">' +
						'<div class="lightbox-canvasClose" style="width:525px;"><img src="/common/images/btn-closeLightbox.gif" width="9" height="9" alt="Close" border="0" onClick="killLightbox();" /></div>' +
						'<img src="/onlinecatalog/resources/images/jpg525x525/' + textileOptionsArray[activeTxtl] + '" width="525" height="525" border="0" id="enlargeTxtl-enlarged" />';
						if (activeTxtlShownIn != null) {
							enlargedTxtl += '<div id="shownIn-txtlPopup">' + activeTxtlShownIn + '</div>';
						}
						enlargedTxtl += '<div id="enlargedTxtl-otherViews">';
							for (var b=0; b < textileOptionsArray.length; b++) {
								enlargedTxtl += '<img src="/onlinecatalog/resources/images/jpg38x19/' + textileOptionsArray[b] + '" width="38" height="19" border="0" id="enlargedImage-popup-thumb' + b + '"';
								if(activeTxtl == b){ enlargedTxtl +=  ' class="active"'; }
								enlargedTxtl += ' onclick="changeTxtlPhoto(' + b + ');" />';
							}
						enlargedTxtl += '</div>' +
					'</div>';
	}


(function($) {
    var SCENE7_URL = "http://s7d4.scene7.com/is/image/KIG/";
    var SCENE7_PARAMS = "?qlt=85,1&op_sharpen=1&resMode=sharp2";
    var s7viewer;
    var currentZoom = 1;

    $(document).ready(function() {

        var mainImage = $("#prodDtl-photo").attr("src");
        if (mainImage == null || mainImage == "") {
            return;
        }
        mainImage = getImageIdFromSrc(mainImage);
        if (s7viewer == null && HAS_SCENE7 == 1) {
            s7viewer = new SjZViewer(SCENE7_URL, mainImage + SCENE7_PARAMS, 448, 448);
            s7viewer.setBackground("0xffffff");
            s7viewer.setTurnTime(0.5);
            s7viewer.setTransitionTime(0.5);
            s7viewer.setTurnTime(1);
            s7viewer.setMaxZoom(100); //sets the initial maxZoom for images
            s7viewer.setZoomStep(2); //sets the initial maxZoom for images
            s7viewer.onEvent.onImageZoomedIn = s7viewer.onEvent.onImageZoomedOut = function(scale) {
                currentZoom = scale;
            }
        }
        
        $('#lightbox-copy').append($("#lb-otherViews-content"));

        $("#otherViews-alternateViews .alternateView a").click(function() {
            var index = $(this).parent().parent().find(".alternateView a").index(this);
            changeImage(index);
            changeProdPhoto(index);
            return false;
        });

        $("#sceneSeven-tools #sceneSeven-zoomIn").click(function() {
            s7viewer.zoomIn();
            return false;
        });
        $("#sceneSeven-tools #sceneSeven-zoomOut").click(function() {
            s7viewer.zoomOut();
            return false;
        });
        $("#sceneSeven-tools #sceneSeven-fullImage").click(function() {
            s7viewer.reset();
            return false;
        });
        $("#sceneSeven-tools .sceneSeven-pan").click(function() {
            var direction = $(this).attr("id");
            direction = direction.substring(direction.lastIndexOf("-") + 1, direction.length);
            s7viewer.pan(direction, 1/currentZoom*2);
            return false;
        });
        $("#otherViews-close").click(function() {
            $("#lightbox").click();
        });

        $("#prodDtl-otherImgs img").click(function() {
            var index = $(this).parent().find("img").index(this);
            changeImage(index);
            return false;
        });
    });

    function getImageIdFromSrc(src) {
        if (src == null || src.length == 0) {
            return "";
        }
        var imageId = src;
        imageId = imageId.substring(0, imageId.indexOf("?"));
        imageId = imageId.substring(imageId.lastIndexOf("/") + 1, imageId.length);
        return imageId;
    }

    function changeImage(index) {
        var view = $("#otherViews-alternateViews .alternateView").eq(index);

        $("#otherViews-alternateViews .alternateView").removeClass("active-alternateView");
        view.addClass("active-alternateView");

        var imageId = getImageIdFromSrc(view.find("img").attr("src"));
        var imageUrl = SCENE7_URL + imageId + SCENE7_PARAMS;
        s7viewer.setImage(imageUrl, true);
    }
})(jQuery);