﻿<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
	<xsl:output method="html" indent="yes" />
	<xsl:variable name="level" />


	<xsl:template match="/">
		<xsl:text disable-output-escaping="yes">
		<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]>
		</xsl:text>
		<html xmlns="http://www.w3.org/1999/xhtml">
			<head>
				<title>Configuration: Bill of Materials View</title>
				<xsl:call-template name="styles" />
				<xsl:call-template name="script" />
			</head>
			<body>
				<xsl:apply-templates />
			</body>
		</html>
	</xsl:template>


	<xsl:template match="mpcbom">
		<h1 class="mainCaption">Bill Of Materials</h1>
		<ul>
			<xsl:apply-templates select="assembly" mode="first" />
		</ul>
		<div id="propertiesFlyOut">
			<table style="width:100%" class="hdr">
				<tr>
					<td class="headerName">Property Name</td>
					<td class="headerValue">
						<div class="propertyValueHeaderText">Property Value</div>
						<div class="flyOutPinButton" title="Pin this window to the document" onclick="tog();"> </div>
					</td>
				</tr>
			</table>
			<div id="propertiesFlyOutContent">
			</div>
		</div>
	</xsl:template>


	<xsl:template name="script">
		<script language="javascript" type="text/javascript">
			<xsl:text disable-output-escaping="yes">
				<![CDATA[
				function getStyle(el, cssprop){
					if (el.currentStyle) //IE
						return el.currentStyle[cssprop]
					else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
						return document.defaultView.getComputedStyle(el, "")[cssprop]
					else //try and get inline style
						return el.style[cssprop]
				}

				function toggleState(itemId) {
					var item = document.getElementById(itemId);
					item.className = item.isExpanded ? 'props' : 'propsExpanded';
					item.isExpanded = !item.isExpanded;
				}

				function expandCollapseLineItem(element, itemId) {
					var target = document.getElementById(itemId);
					if ( target ) target.style.display = ( getStyle(target, "display") == 'block' ) ? 'none' : 'block';
					window.parent.resizeIFrame();
				}

				function openPropertiesFlyOut(element, elementId) {
					var position = getPosition(element);
					var right = position.left + element.offsetWidth;
					var propertiesItemContent = document.getElementById('properties' + elementId + 'Content');

					propertiesFlyOut.style.top = position.top;
					propertiesFlyOut.style.left= right + 10; //Right plus padding.
					propertiesFlyOutContent.innerHTML = propertiesItemContent.innerHTML;
					propertiesFlyOut.propertiesItemId = elementId;
					propertiesFlyOut.style.display = 'block';
					sizeFlyOutMenu();
					placeFlyOutMenu(true);
				
					document.body.onresize = placeFlyOutMenu;
				
					document.onmousedown = function(e) { 
						var e = window.event;
						var isInArea = e.x >= propertiesFlyOut.offsetLeft && e.x <= (propertiesFlyOut.offsetLeft + propertiesFlyOut.offsetWidth)
											&& e.y >= propertiesFlyOut.offsetTop && e.y <= (propertiesFlyOut.offsetTop + propertiesFlyOut.offsetHeight);
						if ( !isInArea ) removeFlyOut();
					}
				}
			
				function sizeFlyOutMenu() {
					var items = propertiesFlyOutContent.getElementsByTagName("tr");
					if ( items.length > 19 ) {
						propertiesFlyOut.style.height = '302px';
						propertiesFlyOutContent.style.height = '285px';
						return;
					}

					var computedSize = 0;
					for ( var i in items ) {
						if ( items[i].offsetHeight ) computedSize += items[i].offsetHeight;
					}
				
					propertiesFlyOut.style.height = ( computedSize + 17 ) + 'px';
					propertiesFlyOutContent.style.height = computedSize + 'px';
				}
			
				function placeFlyOutMenu(explicitCall) {
					if ( explicitCall ) {
						propertiesFlyOut.originalLeft = propertiesFlyOut.offsetLeft;
						propertiesFlyOut.originalTop = propertiesFlyOut.offsetTop;
					}
					else {
						propertiesFlyOut.style.left = propertiesFlyOut.originalLeft + 'px';
						propertiesFlyOut.style.top = propertiesFlyOut.originalTop + 'px';
					}

					var leftOffset = (document.documentElement.clientWidth - propertiesFlyOut.offsetWidth) - (propertiesFlyOut.offsetLeft - document.documentElement.scrollLeft);
					if ( leftOffset < 0 ) {
						propertiesFlyOut.style.left = (propertiesFlyOut.offsetLeft + leftOffset) + 'px';
						if ( explicitCall ) {
							// need to move it down so it's no over the item that was expanded.
							propertiesFlyOut.style.top = (propertiesFlyOut.offsetTop + 20) + 'px';
						}
					}

					var topOffset = (document.documentElement.clientHeight - propertiesFlyOut.offsetHeight) - (propertiesFlyOut.offsetTop - document.documentElement.scrollTop);
					if ( topOffset < 0 ) {
						propertiesFlyOut.style.top = (propertiesFlyOut.offsetTop + topOffset) + 'px';
					}
				}
			
				function removeFlyOut(){
					 propertiesFlyOut.style.display = 'none';
					 document.onmousedown = null;
					 document.body.onresize = null;
				}

				function elementIsFlyOutChild(element){  
					var obj = element.parentNode;
					while ( obj ) {
						if ( obj.id == 'propertiesFlyOut' ) return true;
						obj = obj.parentNode;
					}
					return false;
				}
			
				function getPosition(element) {
					var position = new Object();
					position.left = 0;
					position.top = 0;

					if ( element.offsetParent ) {
						do {
							position.left += element.offsetLeft;
							position.top += element.offsetTop;
						} while ( element = element.offsetParent );
					}

					return position;
				}

				function tog(elementId) {
					if ( !elementId ) elementId = propertiesFlyOut.propertiesItemId;
					toggleState('properties' + elementId);
					window.parent.resizeIFrame();
				}

				function setFlyOutButtonDisplay(displayMode, elementId) {
					var flyOutMenuButton = document.getElementById('pfb' + elementId);
					flyOutMenuButton.style.display = displayMode;
				}
				]]>
			</xsl:text>
		</script>
	</xsl:template>


	<xsl:template name="styles">
		<style media="screen">
			.props { display:none; width:80%; border:solid 1px #555; }
			.propsExpanded { display:block; border:solid 1px #555; margin-bottom:9px; }
			.prop { clear:both; height:15px; border-style:solid; border-width:0px 1px 1px 1px; text-indent:2px; }
			.prop .n { width:200px; }
			.prop .v { }
			.even { background-color:#F8F8F8; }
			.hdr { background-color:#B0C4DE; border-collapse:collapse; }
			.hdr td { border-style:none; border-bottom:solid 1px black; font-weight:bold; height:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-index:2px; }
			.hdr .n { width:200px; }
			.hdr .v { }
			.optionsBlock { clear:both; }
			.optionsBlockExpanded { clear:both; }
			.assembly { clear:both; }
			.bomLine { clear:left; float:left; background-image:url('../../configurator/images/bomLine.png'); background-repeat:no-repeat; text-indent:20px; cursor:pointer; }
			.bomAssy { clear:left; float:left; background-image:url('../../configurator/images/bomAssy.png'); background-repeat:no-repeat; text-indent:20px; cursor:pointer; }
			.bomMat { clear:left; float:left; background-image:url('../../configurator/images/bomMat.png'); background-repeat:no-repeat; text-indent:20px; }
			.bomOper { clear:left; float:left; background-image:url('../../configurator/images/bomOper.png'); background-repeat:no-repeat; text-indent:20px; }
			.material { clear:both; }
			.operation { clear:both; }
			.li { clear:left; min-width:400px; }
			.liBody { clear:left; }
			.item { height:22px; }
			.error, .error * { color:maroon !important; }
			.errorMsg { color:maroon; font-style:italic; padding-left:16px; }
			.propertiesCaption { margin:0px 0px 10px 0px; }
			.mainCaption { padding:4px 10px; font-weight:normal; font-size:16px; color:#fff; background-color:#a2a2a2; }
			#propertiesFlyOut { display:none; height:302px; width:450px; position:absolute; top:0; left:0; background-color:#ffffff; border:solid 1px #555; padding:0px 0px 3px 0px; }
			#propertiesFlyOutContent { overflow-y:auto; overflow-x:hidden; }
			.flyOutPinButton { float:right; background-image:url('../../configurator/images/unpinned.png'); background-repeat:no-repeat; width:20px; height:15px; cursor:pointer; }
			.flyOutButton { cursor:pointer; display:inline-block; background-image:url('../../configurator/images/expand.png'); background-repeat:no-repeat; width:20px; height:15px; }
			.oid { font-weight:bold; color:Navy; }
		</style>
		<style media="print">
			#propertiesFlyOut { display:none; }
			.props .hdr { display:none; }
			.prop .v { text-align:left; position:relative; }
			.li, .assembly, .material, .operation { border-top:solid 1px lightgrey; }
		</style>
	</xsl:template>


	<xsl:template match="assembly" mode="first">
		<xsl:variable name="bodyId" select="generate-id(.)" />
		<!--<xsl:variable name="seriesid" select="@seriesid" />-->
		<div class="li">
			<xsl:choose>
				<xsl:when test="@error != ''">
					<div class="bomLine item error" onclick="javascript:expandCollapseLineItem(this, '{$bodyId}');">
						<span class="oid"><xsl:value-of select="@id" /></span>: <xsl:value-of select="@name" />
					</div>
					<div class="liBody errorMsg" id="{$bodyId}">
						<xsl:value-of select="@error" />
					</div> 
				</xsl:when>
				<xsl:otherwise>
					<div class="bomLine item" onclick="javascript:expandCollapseLineItem(this, '{$bodyId}');">
						<span class="oid"><xsl:value-of select="@id" /></span>: <xsl:value-of select="@name" /> (<xsl:value-of select="@qty" />)
					</div>
					<xsl:call-template name="propertyFlyOutButton" />
					<xsl:if test="/*">
						<xsl:call-template name="properties">
							<xsl:with-param name="seriesid" select="@seriesid" />
						</xsl:call-template>
						<div class="liBody" id="{$bodyId}">
							<xsl:for-each select="*">
								<xsl:choose>
									<xsl:when test="name(.) = 'material'">
										<xsl:call-template name="singleMaterial" />
									</xsl:when>
									<xsl:when test="name(.) = 'operation'">
										<xsl:call-template name="singleOperation" />
									</xsl:when>
									<xsl:when test="name(.) = 'assembly'">
										<xsl:call-template name="singleAssembly" />
									</xsl:when>
									<xsl:otherwise />
								</xsl:choose>
							</xsl:for-each>
						</div>
					</xsl:if>
				</xsl:otherwise>
			</xsl:choose>
		</div>
	</xsl:template>


	<xsl:template name="propertyFlyOutButton">
		<xsl:if test="prop">
			<xsl:variable name="propGridId">
				<xsl:value-of select="generate-id(.)"/>
			</xsl:variable>
			<div class="flyOutButton" id="pfb{$propGridId}" onclick="javascript:tog('{$propGridId}');"></div>
		</xsl:if>
	</xsl:template>



	<xsl:template name="singleMaterial">
	   <xsl:variable name="propertyCount">
	      <xsl:value-of select="count(prop[not(@hide)])" />
	   </xsl:variable>
      
		<ul class="optionsBlock">
			<div class="material">
				<div class="bomMat item">
					<span class="oid"><xsl:value-of select="@id" /></span>: <xsl:value-of select="@name" /> (<xsl:value-of select="@qty" />)
				</div>
			   <xsl:if test="$propertyCount &gt; 0">
				   <xsl:call-template name="propertyFlyOutButton" />
				</xsl:if>
			   <xsl:call-template name="properties">
            <xsl:with-param name="seriesid" select="@seriesid" />
				</xsl:call-template>
			</div>
		</ul>
	</xsl:template>



	<xsl:template name="singleOperation">
		<ul class="optionsBlock">
			<div class="operation">
				<div class="bomOper item">
					<span class="oid"><xsl:value-of select="@id" /></span>: <xsl:value-of select="@name" />
				</div>
				<xsl:call-template name="propertyFlyOutButton" />
				<xsl:call-template name="properties">
					<xsl:with-param name="seriesid" select="@seriesid" />
				</xsl:call-template>
			</div>
		</ul>
	</xsl:template>



	<xsl:template name="singleAssembly">
		<xsl:variable name="asmId" select="generate-id(.)" />
		<ul class="optionsBlock">
			<div class="assembly">
				<xsl:choose>
					<xsl:when test="@rid">
						<div class="bomLine item" onclick="javascript:expandCollapseLineItem(this, '{$asmId}');">
							<span class="oid">
								<xsl:value-of select="@id" />
							</span>: <xsl:value-of select="@name" /> (<xsl:value-of select="@qty" />)
						</div>
					</xsl:when>
					<xsl:otherwise>
						<div class="bomAssy item" onclick="javascript:expandCollapseLineItem(this, '{$asmId}');">
							<span class="oid">
								<xsl:value-of select="@id" />
							</span>: <xsl:value-of select="@name" /> (<xsl:value-of select="@qty" />)
						</div>
					</xsl:otherwise>
				</xsl:choose>
				<xsl:call-template name="propertyFlyOutButton" />
				<xsl:call-template name="properties">
					<xsl:with-param name="seriesid" select="@seriesid" />
				</xsl:call-template>
				<xsl:if test="/*">
					<div id="{$asmId}">
						<xsl:for-each select="*">
							<xsl:choose>
								<xsl:when test="name(.) = 'material'">
									<xsl:call-template name="singleMaterial" />
								</xsl:when>
								<xsl:when test="name(.) = 'operation'">
									<xsl:call-template name="singleOperation" />
								</xsl:when>
								<xsl:when test="name(.) = 'assembly'">
									<xsl:call-template name="singleAssembly" />
								</xsl:when>
								<xsl:otherwise />
							</xsl:choose>
						</xsl:for-each>
					</div>
				</xsl:if>
			</div>
		</ul>
	</xsl:template>



	<xsl:template name="properties">
		<xsl:param name="seriesid" />
		<xsl:if test="prop[not(@hide)]">
			<xsl:variable name="propertyCount">
				<xsl:value-of select="count(prop[not(@hide)])" />
			</xsl:variable>
			<xsl:variable name="propGridId">
				<xsl:value-of select="generate-id(.)"/>
			</xsl:variable>
			<ul class="optionsBlock">
				<div class="props" id="properties{$propGridId}">
					<table width="100%" class="hdr">
						<tr>
							<td class="n">Property Name</td>
							<td class="v">Property Value</td>
						</tr>
					</table>
					<div id="properties{$propGridId}Content">
						<table width="100%" cellSpacing="0" style="table-layout:fixed;">
							<xsl:for-each select="prop[not(@hide)]">
								<tr class="prop">
									<xsl:if test="position() mod 2 = 0">
										<xsl:attribute name="class">prop even</xsl:attribute>
									</xsl:if>
									<td class="n">
										<xsl:value-of select="/mpcbom/propDefn/prop[(@id=current()/@id) and (@seriesid=./@seriesid or @seriesid=$seriesid)]/@text" />
									</td>
									<td class="v">
										<xsl:value-of select="@val" />
										<xsl:text> </xsl:text>
									</td>
								</tr>
							</xsl:for-each>
						</table>
					</div>
				</div>
			</ul>
		</xsl:if>
	</xsl:template>
</xsl:stylesheet>
