var zIndex;
var tabLength;
var zAry;
var currentEZChannel=0;
var vmoStart = 0;
var hotLookColorList = new Array();
var unSupportedProd = new Array('broweyemakers','advradiance_concealer', 'invisible_concealer', 'fresh_under_eye_concealer', 'cg_smoothers_concealer', 'masters_lash_curler', 'masters_eye_shadow_applicators', 'masters_eye_shadow_brush', 'masters_3_in_1_sharpener', 'clean_makeup_remover_for_eyeslips' ,'masters_sponge_puffs', 'masters_sponge_wedges', 'masters_powder_puffs', 'masters_blush_brush', 'masters_powder_brush', 'simply_ageless_concealer', 'simply_ageless_corrector', 'smoky_shadowblast_eyeshadow', 'shineblast_lipgloss', 'clean_sensitive_makeup', 'clean_oil_control_pressed_powder', 'clean_sensitive_pressed_powder');

function openVMOTab(tabId) {
	try {
		if 	($('vmoPopUpBG').style.display=='block' || $('vmoUploadBox').style.display=='block') closeUploadWin(); 
		
		if ($('uploadUserPhotos').style.display == 'none') {
			tabHdrCopy[0]='<div style="font-weight:bold;color:#CCCCCC;">SELECT A PHOTO BELOW OR </div><div class="tabLink" style="cursor:pointer;position:relative;" onclick="showUploadInstructions();"> <span style="text-decoration:underline;">UPLOAD NEW PHOTO</span> </div>'
		} else {
			tabHdrCopy[0]='<div class="tabLink" style="cursor:pointer;position:relative;" onclick="showMyPhotos();"><span style="text-decoration:underline;">VIEW MY PHOTOS</span></div>';
		}
		tabHdrCopy[1]='To try on a look, select a model.'
		tabHdrCopy[2]='Choose a look to try on now!'
		tabHdrCopy[3]='Click a model to try on looks created by our Celebrity Makeup Artist!'
		
		clearTabContents();
		$('tabHeaderImg').src='images/tabHeader'+tabId+'.gif'
		$('tabHdrCopy').innerHTML = tabHdrCopy[tabId];
		$('tabsContainer').style.marginLeft = '240px'
		$('tabsButtonContainer').style.marginLeft = '560px'
		$('tabsButtonContainer').style.width = '48px'
		$('tabFlag').value = tabId;
		setTabZIndex(tabId);
		for(x=0;x<tabLength;x++) {
			if (x==tabId) {
				imgSrc = 'vmo_tab_'+x+'_on_open.png';
				$('content'+x+'Footer').style.display='block';
			} else {
				$('content'+x+'Footer').style.display='none';
				imgSrc = 'vmo_tab_'+tabId+'_'+x+'.png';
			}
			$('tab'+x+'Container').style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image src=\'/connect/makeupmirror/images/'+imgSrc+'\')';
		}
		$('content'+tabId).style.display = 'block'
		$('rightTranslucentContainer').style.display='block'
	} catch(err) {}
}

function showUploadInstructions() {
	$('dvUserPhotos').style.display='none'
	$('tabHdrCopy').innerHTML = '<div class="tabLink" style="cursor:pointer;position:relative;" onclick="showMyPhotos();"><span style="text-decoration:underline;">VIEW MY PHOTOS</span></div>' 
	$('uploadUserPhotos').style.display='block';
}

function showMyPhotos() {
	$('dvUserPhotos').style.display='block'
	$('tabHdrCopy').innerHTML = '<div style="font-weight:bold;color:#666666;">SELECT A PHOTO BELOW OR </div><div class="tabLink" style="cursor:pointer;position:relative;" onclick="showUploadInstructions();"> <span style="text-decoration:underline;">UPLOAD NEW PHOTO</span> </div>' 
	$('uploadUserPhotos').style.display='none';	
}

function openUploadWin() {
	$('uploadIFrm').src='/connect/makeupmirror/upload.jsp'
	//$('uploadIFrm').src='/connect/makeupmirror/uploadconfirm.jsp?code=-50'
	$('vmoPopUpBG').style.display='block';
	$('vmoUploadBox').style.display='block';
}

function closeUploadWin() {
	$('uploadIFrm').src='';
	$('vmoPopUpBG').style.display='none';
	$('vmoUploadBox').style.display='none';
}

function openTAF() {
	$('vmoPopUpBG').style.display='block';
	$('vmoTAFBox').style.display='block';
	$('vmoTAF').style.display='block';
}

function closeTAF() {
	$('vmoPopUpBG').style.display='none';
	$('vmoTAFBox').style.display='none';
	$('vmoTAF').style.display='none';
}

function setTabZIndex(tabId) {
	z = zIndex;
	zAry[tabId] = z;
	
	for(x=tabId;x<tabLength;x++) {
		zAry[x] = z--;
	}
	minZ = zIndex - (tabLength-1);
	for(x=0;x<tabId;x++) {
		zAry[x] = minZ++;
	};
	
	for(x=0;x<tabLength;x++) {
		$('tabContainer').getElementsByClassName('tabContainer')[x].style.zIndex = zAry[x];
	}
}

function overVMOTab(tabId) {
	if ($('tabsContainer').style.marginLeft == '240px' && $('tabsButtonContainer').style.marginLeft == '560px' && $('tabsButtonContainer').style.width == '48px') {
		if (tabId!=$F('tabFlag')) {
			imgSrc = 'vmo_tab_'+$F('tabFlag')+'_'+tabId+'_on.png'	
		} else {
			return;
		}
	} else {
		imgSrc = 'vmo_tab_'+tabId+'_on.png'
	}
	$('tab'+tabId+'Container').style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image src=\'/connect/makeupmirror/images/'+imgSrc+'\')';	
}

function outVMOTab(tabId) {
	if ($('tabsContainer').style.marginLeft != '0px') {
		if (tabId!=$F('tabFlag') && $F('tabFlag').length>0) {
			imgSrc = 'vmo_tab_'+$F('tabFlag')+'_'+tabId+'.png'	
		} else {
			return;
		}
	} else {
		imgSrc = 'vmo_tab_'+tabId+'.png'		
	}
	$('tab'+tabId+'Container').style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image src=\'/connect/makeupmirror/images/'+imgSrc+'\')';	
}

function clearTabContents() {
	contentDiv = $('sliderContents').getElementsByClassName('tabContent')
	for(x=0;x<contentDiv.length;x++) {
		contentDiv[x].style.display='none';
	}
}

function closeVMOTab() {
	resetTabs();
	setTabZIndex(0);
	$('tabsContainer').style.marginLeft = '0px'
	$('tabsButtonContainer').style.marginLeft = '324px'
	$('tabsButtonContainer').style.width = '39px'
	$('rightTranslucentContainer').style.display='none'
	$('tabFlag').value = '';
}

function resetTabs() {
	for(x=0;x<tabLength;x++) {
		imgSrc = 'vmo_tab_'+x+'.png'
		$('tab'+x+'Container').style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image src=\'/connect/makeupmirror/images/'+imgSrc+'\')';
	}
}

function applyEyeshadow(sku, eyeLocation, ezFaceSkuId, colorName, colorVal, texture) {
		try {
//alert(sku+','+eyeLocation+ ', '+ezFaceSkuId+','+colorName+','+colorVal+','+texture)

	eyeLocation=='top' ? currentEZChannel=0 : currentEZChannel=1;  
	ChangeChannelID(currentEZChannel);

	if ($('miniVMOSwatch')) {
		$('miniVMOSwatch1DIV').style.display='block'
		// miniVMOSwatchType is initialized in product.jsp. forgot to add it as a paramater in flash. Line75 - Vlimjap	 
		ezFaceId = ezFaceSkuId.substring(ezFaceSkuId.indexOf(':')+1, ezFaceSkuId.length)
		flashVars = 'swatchType='+miniVMOSwatchType+'&swatchColor='+colorVal+'&texture='+texture
		
		selectedShadeContent = '<div><div style="float:left;">'
		+ '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="48" height="48" id="miniVMOswatch1" align="middle">'
		+'<param name="allowScriptAccess" value="sameDomain" />'
		+'<param name="movie" value="/products/flash/single_swatch.swf" />'
		+'<param name="flashvars" value="'+flashVars+'" />'
		+'<param name="movie" value="/products/flash/single_swatch.swf" />'
		+'<param name="base" value="" />'
		+'<param name="quality" value="high" />'
		+'<param name="bgcolor" value="#ffffff" />'
		+'<param name="wmode" value="transparent" />'
		+'<embed src="/products/flash/single_swatch.swf" wmode="transparent" quality="high" bgcolor="#ffffff" width="48" height="48" id="miniVMOswatch1" name="miniVMOswatch1" base="" align="middle" flashvars="'+flashVars+'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'
		+'</object></div><div style="float:left;margin-top:15px">'+colorName+'</div><div class="clear"></div></div>';
		
		try {
			if (currentEZChannel==0) {
				$('miniVMOSwatch').innerHTML = selectedShadeContent;
			} else {
				$('miniVMOSwatch1DIV').innerHTML = selectedShadeContent;
			} 	
		} catch(err) {}	
	}

	ApplyProductColor(ezFaceSkuId)
	UpdateWindowlessObject(1);
	} catch(err) {}
}

function goEyeshadow(actionType) {
	if (actionType==1) {
		$('eyeshadowOff').style.visibility='hidden';
		$('eyeshadowOn').style.display='block';
	} else {
		$('eyeshadowOff').style.visibility='visible';
		$('eyeshadowOn').style.display='none';
	}
}

function toggleProLook() {
	$('hotLooks').style.display='block'
	$('modelList').style.display='none';
	$('tabsContents').style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image src=\'/connect/beautystudio/images/tabTest.png\');'
	$('hotLooks').style.position='absolute';
	$('closeTab').style.position='absolute';
	$('rightTranslucentContainer').style.display='block'
	$('tabsContainer').style.paddingLeft = '240px'
}

function toggleModel() {
	$('hotLooks').style.display='none'
	$('modelList').style.display='block';
	$('tabsContents').style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image src=\'/connect/beautystudio/images/tabTest1.png\');'
	$('hotLooks').style.position='absolute';
	$('closeTab').style.position='absolute';
	$('rightTranslucentContainer').style.display='block'
	$('tabsContainer').style.paddingLeft = '240px'
}

function clearSwatchBG() {
	for(i=0;i<$('swatches').getElementsByTagName('div').length;i++) {
		if ($('swatches').getElementsByTagName('div')[i].className=='swatchContainer') {
			$('swatches').getElementsByTagName('div')[i].style.background = 'none';
		}			
	}
}

function applyVMOSwatch(sku, ezFaceSkuId, colorName, colorVal, texture) {
	var currentUrl = window.location.pathname;
	pageTracker._trackPageview('/action/vmo/clickedApply' + currentUrl);
	
	//try {
//alert(sku+','+ezFaceSkuId+','+colorName+','+colorVal+','+texture)

	if (currentEZChannel==1) {
		currentEZChannel=0;
		ChangeChannelID(currentEZChannel);
	}

	if($('miniVMOSwatch')) {
		// miniVMOSwatchType is initialized in product.jsp. forgot to add it as a paramater in flash. Line75 - Vlimjap	 
		ezFaceId = ezFaceSkuId.substring(ezFaceSkuId.indexOf(':')+1, ezFaceSkuId.length)
		flashVars = 'swatchType='+miniVMOSwatchType+'&swatchColor='+colorVal+'&texture='+texture
		
		selectedShade1 = '<div><div style="float:left;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="48" height="48" id="miniVMOswatch1" align="middle">'
		+'<param name="allowScriptAccess" value="sameDomain" />'
		+'<param name="movie" value="/products/flash/single_swatch.swf" />'
		+'<param name="flashvars" value="'+flashVars+'" />'
		+'<param name="movie" value="/products/flash/single_swatch.swf" />'
		+'<param name="base" value="" />'
		+'<param name="quality" value="high" />'
		+'<param name="bgcolor" value="#ffffff" />'
		+'<param name="wmode" value="transparent" />'
		+'<embed src="/products/flash/single_swatch.swf" wmode="transparent" quality="high" bgcolor="#ffffff" width="48" height="48" id="miniVMOswatch1" name="miniVMOswatch1" base="" align="middle" flashvars="'+flashVars+'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'
		+'</object></div><div style="float:left;margin-top:15px">'+colorName+'</div><div class="clear"></div></div>';
		
		$('miniVMOSwatch').innerHTML = selectedShade1;
	}	
	ApplyProductColor(ezFaceSkuId)
	UpdateWindowlessObject(1)
	//ApplyColor(sku)
	//if ($('rightCol').style.display!='block') $('rightCol').style.display='block'
	//} catch(err) {}
}

function applyVMONailColor(sku, nailCoat, ezFaceSkuId, colorName, colorVal, texture) {
	var currentUrl = window.location.pathname;
	pageTracker._trackPageview('/action/vmo/clickedApply' + currentUrl);
	try {
	//alert('nail func::'+sku+','+nailCoat+','+ezFaceSkuId+','+colorName+','+colorVal+','+texture)

			try {
				if ($('draggableNail').style.display!='block') {
					 $('draggableNail').style.display='block'
					 $('draggableNail').style.top = '350px';
					 $('draggableNail').style.left = '730px';
				}
			} catch(err) {}
			//nailCoat=='top' ? currentEZChannel=1 : currentEZChannel=0;  
			ChangeChannelID(0);
			
			if($('miniVMOSwatch')) {
				$('miniVMOSwatch1DIV').style.display='block'
				// miniVMOSwatchType is initialized in product.jsp. forgot to add it as a paramater in flash. Line75 - Vlimjap			
					 
				ezFaceId = ezFaceSkuId.substring(ezFaceSkuId.indexOf(':')+1, ezFaceSkuId.length)
				flashVars = 'swatchType='+miniVMOSwatchType+'&swatchColor='+colorVal+'&texture='+texture
				
				selectedShade1 = '<div><div style="float:left;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="48" height="48" id="miniVMOswatch1" align="middle">'
				+'<param name="allowScriptAccess" value="sameDomain" />'
				+'<param name="movie" value="/products/flash/single_swatch.swf" />'
				+'<param name="flashvars" value="'+flashVars+'" />'
				+'<param name="movie" value="/products/flash/single_swatch.swf" />'
				+'<param name="base" value="" />'
				+'<param name="quality" value="high" />'
				+'<param name="bgcolor" value="#ffffff" />'
				+'<param name="wmode" value="transparent" />'
				+'<embed src="/products/flash/single_swatch.swf" wmode="transparent" quality="high" bgcolor="#ffffff" width="48" height="48" id="miniVMOswatch1" name="miniVMOswatch1" base="" align="middle" flashvars="'+flashVars+'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'
				+'</object></div><div style="float:left;margin-top:15px">'+colorName+'</div><div class="clear"></div></div>';
				if (nailCoat=='top') {
					$('miniVMOSwatch').innerHTML = selectedShade1;
				} else {
					try {
						$('miniVMOSwatch1DIV').innerHTML = selectedShade1;
						
					} catch(err){}
				}
			}	
			ApplyProductColor(ezFaceSkuId)
			UpdateWindowlessObject(2)

	} catch(err) {}
} 

function generateUsedProds() {
	$('vmoDeleteList').value='';
	hotLookColorList = new Array();
	var vmoHotLookXML=new ActiveXObject("Microsoft.XMLDOM");
  	vmoHotLookXML.async="false";
	vmoHotLookXML.loadXML(GetHotlookXML());
	var oVMOHotLookXML=vmoHotLookXML.documentElement;
	hotLookList = '';
	
	if (oVMOHotLookXML.getElementsByTagName('Product').length>0) {
		for(x=0;x<oVMOHotLookXML.getElementsByTagName('Product').length;x++) {
			
			subProdId = oVMOHotLookXML.getElementsByTagName('Product')[x].getElementsByTagName('SubProductID')[0].childNodes[0].nodeValue
			if (hotLookList.indexOf(subProdId)==-1) hotLookList += subProdId+','
		}
		hotLookList = hotLookList.substring(0, hotLookList.length-1)
		currentTime = new Date()
		var fetchSubProds = new Ajax.Request(
			'/connect/makeupmirror/prodUsedGenerator.jsp', 
			{
				method: 'post',
				postBody: 'ezfaceIds='+hotLookList+'&currentTime='+currentTime.getTime(),
				//onLoading: AjaxVMO.productOnLoading,
				//onFailure: AjaxVMO.productOnFailure,
				onComplete: displayUsedProds
			}
		);
	} else {
		clearProductsUsed()
	}
	
}

function clearProductsUsed() {
	$('prodUsedColumn').innerHTML = '';
}

function vmoDeleteSelected() {
	deleteAry=$F('vmoDeleteList').substring(0,$F('vmoDeleteList').length-1).split(',')
	for (i=0;i<deleteAry.length;i++) {
		setTimeout('RemoveProductByID(deleteAry['+i+'])',100);
		MembersClass.removeSkuSingle(deleteAry[i]); 
	}
	setTimeout('generateUsedProds()',750);
}

function vmoSaveLook() {
	x = 'Look Title: <input type="text" id="txtSaveLook" name="txtSaveLook" maxlength="10" width="10" style="width:100px;font-size:9px" onkeypress="if (event.keyCode==13) return false"/> &nbsp;<img src="/global/images/globalmenu_goBtn1.gif" style="cursor:pointer;" onclick="SaveUserLook();">';
	$('saveLookBody').innerHTML='<div style="padding-top:10px;">'+x+'</div>';
	
	$('saveLookContainer').style.display='block';
}

function displayUsedProds(ajaxResponse) {
	//closeVMOTab();
	if ($('rightCol').style.display!='block') $('rightCol').style.display='block'
	$('prodUsedColumn').innerHTML = ajaxResponse.responseText
}

function printUsedProds() {
	var vmoHotLookXML=new ActiveXObject("Microsoft.XMLDOM");
  	vmoHotLookXML.async="false";
	vmoHotLookXML.loadXML(GetHotlookXML());
	var subProdId='';
	var hotLookList='';
	var oVMOHotLookXML=vmoHotLookXML.documentElement;
	
	if (oVMOHotLookXML.getElementsByTagName('Product').length>0) {
		for(x=0;x<oVMOHotLookXML.getElementsByTagName('Product').length;x++) {
			subProdId = oVMOHotLookXML.getElementsByTagName('Product')[x].getElementsByTagName('SubProductID')[0].childNodes[0].nodeValue
			if (subProdId.indexOf('_')>=0) subProdId = subProdId.substring(0, subProdId.length-2)
			if (hotLookList.indexOf(subProdId)==-1) hotLookList += subProdId+','
		}
		hotLookList = hotLookList.substring(0, hotLookList.length-1)
	}
	$('vmoPrintList').src='/connect/makeupmirror/printTemplate.jsp?skuIds='+hotLookList
}

function wedge(event){ return false }

if (document.location.href.indexOf('/connect/makeupmirror')>=0) {
	window.onload = function() {
	 	$('tabsContainer').style.marginLeft = '0px'
		zIndex = 15;
		tabLength = $('tabContainer').getElementsByClassName('tabContainer').length;
		zAry = new Array(tabLength);
		z = zIndex;
		 
		setTabZIndex(0);
		
		new Draggable('draggableNail', {
			onStart: function(){
			if (document.all){
			Event.observe(document.body, "drag", wedge, false);
			Event.observe(document.body, "selectstart", wedge, false);
			}
			},
			revert: function(){
			if (document.all){
			Event.stopObserving(document.body, "drag", wedge, false);
			Event.stopObserving(document.body, "selectstart", wedge, false);
			}
			}
			})
		$('slinkvmoPreload').style.display='none';
	}
}