{% extends 'base.html.twig' %}

{% block title %}
	{{ 'Unit list'|trans }}
{% endblock %}

{% block body %}

	<div class="carName">
		{% if vehicle is defined %}
			<h2>{{ vehicle.brand }} {{ vehicle.model }}</h2>
		{% endif %}
	</div>

	<div class="layout">

		<div class="pageActions">
			{{ wo_render_breadcrumbs() }} | <a href="javascript:window.print()">Print</a>
		</div>

		<table id="unitDetailTable" class="unitDetailTable" width="100%" cellspacing="0" cellpadding="0">
			<tbody>

				{% for imageMap in unit.imageMaps %}

				<tr>
					<td width="440" valign="top">
						<div id="g_container" style="vertical-align:top; height:502px; width:420px; overflow:hidden;">
							<div id="viewport" class="inline_block" style="position: relative; border: 1px solid rgb(119, 119, 119); background: white; width: 418px; height: 400px; overflow: auto;">
								{% for area in imageMap.areas %}
									{% set posX = area.x1 -3 %}
									{% set posY = area.y1 -3 %}
									{% set width = area.x2 - posX %}
									{% set height = area.y2 - posY %}
									<div name="{{ area.areaCode}}" class="dragger g_highlight" style="position: absolute; width: {{ width }}px; height: {{ height }}px; margin-top: {{ posY }}px; margin-left: {{ posX }}px; overflow: hidden;">
										<img width="200" height="200" src="/images/spacer.gif">
									</div>
								{% endfor %}
								<img class="dragger" src="{{ imageMap.imageName|replace({'%size%': 'source'}) }}">
							</div>
							<table>
								<tbody>
									<tr>
										<td><img width="20" src="/images/mouse_wheel.png" alt="Mouse wheel"></td>
										<td>: {{ 'image resizing'|trans }}</td>
									</tr>
									<tr>
										<td><img width="20" src="/images/lmb.png" alt="Mouse lmb"><img width="20" src="/images/move.png" alt="Mouse move"></td>
										<td>: {{ 'scroll image'|trans }}</td>
									</tr>
									<tr>
										<td><img width="20" src="/images/mouse.png" alt="Mouse"><img width="20" src="/images/pointer.png" alt="Mouse pointer"></td>
										<td>: {{ 'highlight all details on picture and in table'|trans }}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</td>
					<td valign="top">
						<p class="categoryName">{{ 'Category'|trans }}:
							<strong>{{ unit.name }}</strong>
						</p>


						<div id="unitsHoder">
							{% for partSection in unitParts.partSections %}

								{% if partSection.title is defined %}
									<h4>{{ partSection.title }}</h4>
								{% endif %}

							<table id="units" cellspacing="0" cellpadding="0" width="97%">
								<tbody>
									<tr>
										<th>{{ 'Nb.'|trans }}</th>
										<th></th>
										<th>{{ 'Name'|trans }}</th>
										<th>{{ 'OEM'|trans }}</th>
										<th>{{ 'Note'|trans }}</th>
										<th>{{ 'Models'|trans }}</th>
										<th>&nbsp;</th>
									</tr>

									{% for part in partSection.parts %}

									<tr id="d_1" class="g_collapsed g_highlight" name="{{ part.areaCode }}" onmouseover="hl(this, 'in');" onmouseout="hl(this, 'out');">
										<td class="g_num">
											<div id="row-01">
											 {{ part.areaCode }}
											</div>
										</td>
										<td width="20">
											<a href="#" class="otherInfoLink" onclick="return false;" style="position: relative;">
												<img src="/images/info_icon.png">
												<div class="infoBox">

													<table>
														<tbody>
															<tr>
																<th>{{ 'Name'|trans }}:</th>
																<td>
																	{{ part.displayName }}
																</td>
															</tr>
															<tr>
																<th>{{ 'OEM'|trans }}:</th>
																<td>51110029880</td>
															</tr>

															{% for attribute in part.attributes %}
																<tr>
																	<th>{{ attribute.label|capitalize|trans }}</th>
																	<td>{{ attribute.values|join }}</td>
																</tr>
															{% endfor %}

														</tbody>
													</table>
												</div>
											</a>
										</td>


										<td class="g_ttd" name="c_name">
											{{ part.displayName }}
										</td>
										<td class="g_oem" name="c_oem">
											{{ part.partNumberFormatted }}
										</td>
										<td class="g_note" name="c_oem">
											{% if part.attributes.note is defined %}
												{{ part.attributes.note.values|join }}
											{% endif %}
										</td>
										<td class="g_models" name="c_oem">
											{% if part.attributes.applicableModels is defined %}
												{{ part.attributes.applicableModels.values|join('<br />') }}
											{% endif %}

											{% if part.attributes.range is defined %}
												{{ part.attributes.range.values|join|replace({
													'(C)': '<br />',
													'(D)': '<br />',
													'(E)': '<br />',
													'(T)': '<br />'
												}) }}
											{% endif %}
										</td>
										<td class="g_search" align="center">
											{% if part.partNumber is not empty %}
												{# TODO ancient link magic #}
												{# <?php $searchurl = $sf_user->getAttribute('searchurl', '') ?>

												<?php if (preg_match('/ecat\.elit|www\.maxi\.ec24\.ch/', $searchurl)): ?>
													<?php $start = '&'; ?>
													<?php if (!strpos($searchurl, '?')): ?>
													<?php $start = '?' ?>
													<?php endif; ?>
													<?php $searchurl .= $start . 'mini=false'; ?>
												<?php endif; ?>

												<?php if ($sf_user->getAttribute('blank', 0)): ?>
													<a class="search" onclick="openNewPageParent('<?php echo str_replace('_OEM_', (string)$detail['oem'], $searchurl) ?>'); return false;" href="#"><img src="/images/search-<?php echo (int)OemRecordTable::getInstance()->oemTest((string)$detail['oem']) ?>.png" alt="Search" /></a>
												<?php else: ?>
													<a class="search" onclick="window.parent.location.href='<?php echo str_replace('_OEM_', (string)$detail['oem'], $searchurl) ?>'; return false;" href="#"><img src="/images/search-<?php echo (int)OemRecordTable::getInstance()->oemTest((string)$detail['oem']) ?>.png" alt="Search" /></a>
												<?php endif; ?> #}

												{% if parameters.blank %}
													<a class="search" onclick="openNewPageParent('{{ parameters.searchurl | replace({'_OEM_': part.partNumber}) }}'); return false;" href="#">
														<img src="/images/search-{{ oem.check(part.partNumber) ? '1': '0' }}.png" alt="Search">
													</a>
												{% else  %}
													<a class="search" onclick="window.parent.location.href='{{ parameters.searchurl | replace({'_OEM_': part.partNumber}) }}'; return false;" href="#">
														<img src="/images/search-{{ oem.check(part.partNumber) ? '1': '0' }}.png" alt="Search">
													</a>
												{% endif %}
											{% else %}
												&nbsp;
											{% endif %}
										</td>

									</tr>

									{% endfor %}
								</tbody>
							</table>

							{% endfor %}
						</div>
					</td>
				</tr>

				{% endfor %}
			</tbody>
		</table>
		<div id="bottomMeter">&nbsp;</div>
	</div>

{% endblock %}


{% block javascripts %}

	{{ parent() }}

	<script src="/js/jquery.js" ></script>
	<script src="/js/dragscrollable.js" ></script>
	<script src="/js/jquery.colorbox.js" ></script>
	<script src="/js/jquery.mousewheel.js" ></script>
	<script src="/js/jquery.tooltip.js" ></script>

	<script src="/js/laximo/detailslist.js" ></script>
	<script src="/js/laximo/unit.js" ></script>

	<script>

		window.onload = function() {
			console.log('window.onload');
			rescaleImage(-100);
		};


		$(document).ready(function() {
			resizeIframe();
		});

		function openNewPageParent(href)
		{
			var data = {
			'action':'open',
			'url': href,
			};

			parent.postMessage(JSON.stringify(data), '{{ cm.parameter('domain') }}');
		}


		function resizeIframe()
		{
			console.log('resizeIframe');
			var data = {
				'action':'resize',
				'height': $('body').innerHeight() + 70,
			};

			parent.postMessage(JSON.stringify(data), '{{ cm.parameter('domain') }}');

			var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
			var eventer = window[eventMethod];
			var messageEvent = eventMethod == 'attachEvent' ? 'onmessage' : 'message';

			eventer(messageEvent, function(e) {
					var message = e.data;
					try {
						var data = JSON.parse(e.data);
					} catch (e) {
						return;
					}
					if (data.action == 'scroll')
					{
						var top = parseInt(data.position) - 130;

						var bottom_position = $('#bottomMeter').position();
						if (top > (bottom_position.top - 510))
			 			{
			 				top = bottom_position.top - 510;
			 			}

			 			if (top < 0)
			 			{
			 				top = 0;
			 			}

			 			$('#g_container').css('marginTop',top + 'px');
			 		}
			 	}, false
			 );
		}

		$('.dragger').click(function() {
			var id = $(this).attr('name');

			if (!$('tr[name=' + id + ']').hasClass('g_highlight_lock'))
			{
				var element = $('tr[name=' + id + ']');
				var position = element.position();
				var table_margin_top = position.top - 300;
				var bottom_position = $('#bottomMeter').position();

				if (table_margin_top > (bottom_position.top - 510))
				{
					table_margin_top = bottom_position.top - 510;
				}

				if (table_margin_top < 0)
				{
					table_margin_top = 0;
				}

				$('#g_container').css('marginTop', table_margin_top + 'px');

				var data = {
				'action':'scroll',
				'top': table_margin_top,
				};

				parent.postMessage(JSON.stringify(data), '{{ cm.parameter('domain') }}');
			}
		});
	</script>

{% endblock %}