AJAX_ZOOM - Version 1.2.3

Version Notes

Added visual hotspot editor, few other changes

Release Info

Developer	AJAX-ZOOM
Extension	AJAX_ZOOM
Version	1.2.3
Comparing to
See all releases

Code changes from version 1.2.2 to 1.2.3

Files changed (10) hide show

app/code/local/Ax/Zoom/Model/Ax360.php +37 -8
app/code/local/Ax/Zoom/controllers/AxzoomController.php +48 -3
app/code/local/Ax/Zoom/etc/config.xml +4 -4
app/code/local/Ax/Zoom/etc/system.xml +3 -3
app/design/adminhtml/default/default/template/axzoom/tab360-sets.phtml +51 -14
app/design/frontend/base/default/template/ax_zoom/catalog/product/view/media.phtml +3 -3
js/axzoom/preview/cropeditor.php +231 -206
js/axzoom/preview/hotspoteditor.php +3604 -0
js/axzoom/preview/preview.php +1 -1
package.xml +5 -5

app/code/local/Ax/Zoom/Model/Ax360.php CHANGED Viewed

	@@ -3,9 +3,9 @@
3	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/Model/Ax360.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	- * Version: 1.2.1
7	- * Date: 2016-05-15
8	- * Review: 2016-05-15
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*
	@@ -77,16 +77,31 @@ class Ax_Zoom_Model_Ax360 extends Mage_Core_Model_Abstract
77	if ($group['qty'] > 0) {
78
79	$crop = empty($group['crop']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['crop']));
80	-
81	- if ($group['qty'] == 1) {
82	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $productId . "/" . $group['id_360'] . "/" . $group['id_360set'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
83	} else {
84	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $productId . "/" . $group['id_360'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";






85	}
86
87	if ($crop && $crop != '[]') {


88	$json .= ', "crop": '.$crop;
89	}







90
91	$json .= '}';
92
	@@ -111,12 +126,20 @@ class Ax_Zoom_Model_Ax360 extends Mage_Core_Model_Abstract
111	if (!empty($settings)) $settings = ", $settings";
112
113	if ($group['qty'] > 0) {

114	$crop = empty($group['crop']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['crop']));

115
116	- if ($group['qty'] == 1) {
117	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $group['id_product'] . "/" . $group['id_360'] . "/" . $group['id_360set'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
118	} else {
119	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $group['id_product'] . "/" . $group['id_360'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";






120	}
121
122	if ($crop && $crop != '[]') {
	@@ -125,6 +148,12 @@ class Ax_Zoom_Model_Ax360 extends Mage_Core_Model_Abstract
125	$json .= ', "crop": '.$crop;
126	}
127






128	$json .= '}';
129
130	$cnt++;
	@@ -144,9 +173,9 @@ class Ax_Zoom_Model_Ax360 extends Mage_Core_Model_Abstract
144	$settings = (array)Mage::helper('core')->jsonDecode($str);
145	foreach ($settings as $key => $value) {
146	if ($value == 'false' \|\| $value == 'true' \|\| $value == 'null' \|\| is_numeric($value) \|\| substr($value, 0, 1) == '{' \|\| substr($value, 0, 1) == '[') {
147	- $res[] = "'$key': $value";
148	} else {
149	- $res[] = "'$key': '$value'";
150	}
151	}
152	return implode(', ', $res);


3	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/Model/Ax360.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

77	if ($group['qty'] > 0) {
78
79	$crop = empty($group['crop']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['crop']));
80	+ $hotspot = empty($group['hotspot']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['hotspot']));
81	+ /*if ($group['qty'] == 1) {
82	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $productId . "/" . $group['id_360'] . "/" . $group['id_360set'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
83	} else {
84	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $productId . "/" . $group['id_360'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
85	+ }*/
86	+
87	+ if ($group['qty'] == 1) {
88	+ $json .= '"' . $group['id_360'] . '"' . ': {"path": "' . $this->rootFolder() . 'js/axzoom/pic/360/' . $productId . '/' . $group['id_360'] . '/' . $group['id_360set'] . '"' . $settings . ', "combinations": [' . $group['combinations'] . ']';
89	+ } else {
90	+ $json .= '"' . $group['id_360'] . '"' . ': {"path": "' . $this->rootFolder() . 'js/axzoom/pic/360/' . $productId . '/' . $group['id_360'] . '"' . $settings . ', "combinations": [' . $group['combinations'] . ']';
91	}
92
93	if ($crop && $crop != '[]') {
94	+ // this goes over parseJson
95	+ $crop = str_replace('\\', '\\\\', $crop);
96	$json .= ', "crop": '.$crop;
97	}
98	+
99	+ if ($hotspot && $hotspot != '{}') {
100	+ // this goes over parseJson
101	+ $hotspot = str_replace('\\', '\\\\', $hotspot);
102	+ $json .= ', "hotspotFilePath": '.$hotspot;
103	+ }
104	+
105
106	$json .= '}';
107

126	if (!empty($settings)) $settings = ", $settings";
127
128	if ($group['qty'] > 0) {
129	+
130	$crop = empty($group['crop']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['crop']));
131	+ $hotspot = empty($group['hotspot']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['hotspot']));
132
133	+ /*if ($group['qty'] == 1) {
134	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $group['id_product'] . "/" . $group['id_360'] . "/" . $group['id_360set'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
135	} else {
136	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $group['id_product'] . "/" . $group['id_360'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
137	+ }*/
138	+
139	+ if ($group['qty'] == 1) {
140	+ $json .= '"' . $group['id_360'] . '"' . ': {"path": "' . $this->rootFolder() . 'js/axzoom/pic/360/' . $group['id_product'] . '/' . $group['id_360'] . '/' . $group['id_360set'] . '"' . $settings . ', "combinations": [' . $group['combinations'] . ']';
141	+ } else {
142	+ $json .= '"' . $group['id_360'] . '"' . ': {"path": "' . $this->rootFolder() . 'js/axzoom/pic/360/' . $group['id_product'] . '/' . $group['id_360'] . '"' . $settings . ', "combinations": [' . $group['combinations'] . ']';
143	}
144
145	if ($crop && $crop != '[]') {

148	$json .= ', "crop": '.$crop;
149	}
150
151	+ if ($hotspot && $hotspot != '{}') {
152	+ // this goes over parseJson
153	+ $hotspot = str_replace('\\', '\\\\', $hotspot);
154	+ $json .= ', "hotspotFilePath": '.$hotspot;
155	+ }
156	+
157	$json .= '}';
158
159	$cnt++;

173	$settings = (array)Mage::helper('core')->jsonDecode($str);
174	foreach ($settings as $key => $value) {
175	if ($value == 'false' \|\| $value == 'true' \|\| $value == 'null' \|\| is_numeric($value) \|\| substr($value, 0, 1) == '{' \|\| substr($value, 0, 1) == '[') {
176	+ $res[] = '"'.$key.'": '.$value;
177	} else {
178	+ $res[] = '"'.$key.'": "'.$value.'"';
179	}
180	}
181	return implode(', ', $res);

app/code/local/Ax/Zoom/controllers/AxzoomController.php CHANGED Viewed

@@ -3,9 +3,9 @@
             *  Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/controllers/IndexController.php
             *  Copyright: Copyright (c) 2010-2016 Vadim Jacobi
             *  License Agreement: http://www.ajax-zoom.com/index.php?cid=download
-            -
            *  Version: 1.2.2
-            -
            *  Date: 2016-08-03
-            -
            *  Review: 2016-08-03
             *  URL: http://www.ajax-zoom.com
             *  Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
+            *
@@ -170,6 +170,9 @@ class Ax_Zoom_AxzoomController extends Mage_Adminhtml_Controller_Action
             			if (!in_array('crop', $check_crop_field_fetch)){
             				$db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `crop` TEXT NOT NULL');
+            			}
+            		}
             		$row = $db->fetchAll('SELECT * FROM `'.$db_prefix.'ajaxzoom360` WHERE id_360 = '.(int)$id_360.' LIMIT 1');
@@ -193,6 +196,48 @@ class Ax_Zoom_AxzoomController extends Mage_Adminhtml_Controller_Action
             			'status' => $result->rowCount()
             		)));
+            	}
                 public function AddSetAction()
+                {


3	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/controllers/IndexController.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

170	if (!in_array('crop', $check_crop_field_fetch)){
171	$db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `crop` TEXT NOT NULL');
172	}
173	+ if (!in_array('hotspot', $check_crop_field_fetch)){
174	+ $db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `hotspot` TEXT NOT NULL');
175	+ }
176	}
177
178	$row = $db->fetchAll('SELECT * FROM `'.$db_prefix.'ajaxzoom360` WHERE id_360 = '.(int)$id_360.' LIMIT 1');

196	'status' => $result->rowCount()
197	)));
198	}
199	+
200	+ public function GetHotspotJsonAction()
201	+ {
202	+ $get = Mage::app()->getRequest();
203	+ $id_360 = $get->getParam('id_360');
204	+
205	+ $db = Mage::getSingleton('core/resource')->getConnection('core_write');
206	+ $db_prefix = (string)Mage::getConfig()->getTablePrefix();
207	+
208	+ $check_crop_field = $db->query('SHOW FIELDS FROM `'.$db_prefix.'ajaxzoom360`');
209	+ if ($check_crop_field){
210	+ $check_crop_field_fetch = $check_crop_field->fetchAll(PDO::FETCH_COLUMN);
211	+ // Update table
212	+ if (!in_array('crop', $check_crop_field_fetch)){
213	+ $db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `crop` TEXT NOT NULL');
214	+ }
215	+ if (!in_array('hotspot', $check_crop_field_fetch)){
216	+ $db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `hotspot` TEXT NOT NULL');
217	+ }
218	+ }
219	+
220	+ $row = $db->fetchAll('SELECT * FROM `'.$db_prefix.'ajaxzoom360` WHERE id_360 = '.(int)$id_360.' LIMIT 1');
221	+ if ($row[0]['hotspot']){
222	+ die(stripslashes($row[0]['hotspot']));
223	+ }else{
224	+ die('{}');
225	+ }
226	+ }
227	+
228	+ public function SetHotspotJsonAction()
229	+ {
230	+ $json = $this->getRequest()->getPost('json');
231	+ $id_360 = Mage::app()->getRequest()->getParam('id_360');
232	+ $db_prefix = (string)Mage::getConfig()->getTablePrefix();
233	+ $db = Mage::getSingleton('core/resource')->getConnection('core_write');
234	+ $query = 'UPDATE `'.$db_prefix.'ajaxzoom360` SET hotspot = \''.addslashes($json).'\' WHERE id_360 = '.(int)$id_360;
235	+ $result = $db->query($query);
236	+
237	+ die(Mage::helper('core')->jsonEncode(array(
238	+ 'status' => $result->rowCount()
239	+ )));
240	+ }
241
242	public function AddSetAction()
243	{

app/code/local/Ax/Zoom/etc/config.xml CHANGED Viewed

	@@ -4,9 +4,9 @@
4	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/etc/config.xml
5	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
6	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
7	- * Version: 1.2.2
8	- * Date: 2016-08-03
9	- * Review: 2016-08-03
10	* URL: http://www.ajax-zoom.com
11	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
12	*
	@@ -20,7 +20,7 @@
20
21	<modules>
22	<Ax_Zoom>
23	- <version>1.2.2</version>
24	</Ax_Zoom>
25	</modules>
26


4	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/etc/config.xml
5	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
6	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
7	+ * Version: 1.2.3
8	+ * Date: 2016-08-12
9	+ * Review: 2016-08-12
10	* URL: http://www.ajax-zoom.com
11	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
12	*

20
21	<modules>
22	<Ax_Zoom>
23	+ <version>1.2.3</version>
24	</Ax_Zoom>
25	</modules>
26

app/code/local/Ax/Zoom/etc/system.xml CHANGED Viewed

	@@ -4,9 +4,9 @@
4	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/etc/system.xml
5	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
6	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
7	- * Version: 1.2.2
8	- * Date: 2016-08-03
9	- * Review: 2016-08-03
10	* URL: http://www.ajax-zoom.com
11	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
12	*


4	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/etc/system.xml
5	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
6	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
7	+ * Version: 1.2.3
8	+ * Date: 2016-08-12
9	+ * Review: 2016-08-12
10	* URL: http://www.ajax-zoom.com
11	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
12	*

app/design/adminhtml/default/default/template/axzoom/tab360-sets.phtml CHANGED Viewed

	@@ -3,9 +3,9 @@
3	* Module: jQuery AJAX-ZOOM for Magento, /app/design/adminhtml/default/default/template/axzoom/tab360-sets.phtml
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	- * Version: 1.2.1
7	- * Date: 2016-05-14
8	- * Review: 2016-05-14
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*
	@@ -57,13 +57,18 @@ $conf = Mage::getStoreConfig('axzoom_options');
57	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABX0lEQVQYGXXBPyiEcRgH8O/wJunSdRkvGSSZDDJckmSQZDCYrhskg0xGm3RJBoMMMkoGww2XJBkMMhh06XqTZJDOFV3e+/e+v+d5fo97ryuu+HzwmxnmIzOFdkWnHEeDF6WUPKragpkvOvjB11b5lLN8SatmQQpmkZYoy+laXzniT5YjkJKq/arNoOGtg47R5I/QgXyqSh5mVIr+OB9wxk9UBziNFi9uVdUSAHbRUOvlPb6nja8uk/QTtCJPfCEuJQGwixazxhl5VbXKx9Ue3g8mEGIXTZU+W+c0bVm1pXoc4Nx7B0LsAl6E1ilL23REh3xVjgG1QckgxLtW+ITOg2k00R7ngkmvm3doCSG5UBXXi6KFbypDtCEFVZNCqBoL5mhZHoIxNHgxzgP1Xnmz1WACP/wBvqXND8ckedfM8mW9P+eg3YdDm/JsRV5ov9SJv8mdqpVSDP8xY3xGK2jzDTL14vqSI1apAAAAAElFTkSuQmCC);
58	background-repeat: no-repeat;
59	}
60	-





61	#file360-add-button span{
62	padding-left: 20px;
63	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAulBMVEUAAADj4+Pi4uLk5OTm5ubn5+fo6Ojy8vLn5+fv7+/w8PDo6Oj29vbv7+/29vb19fX39/f7+/v6+vr8/Pz7+/v+/v77+/v8/Pz8/Pz7+/v7+/v8/Pz9/f38/Pz9/f38/Pz8/Pz9/f37+/v9/f39/f38/Pz9/f38/Pz9/f3+/v7////7+/v8/Pz9/f39/f39/f39/f39/f39/f39/f38/Pz8/Pz9/f39/f3+/v7+/v79/f3+/v7+/v7///84WsHxAAAAPHRSTlMAAgQEBAQEBAYIDBAYHBweLD5ESlBgbnJ4h42PkZmdn6Ghp6eztbm7u729y8vP1dvd3+Hp7e/v8fP3+f27bAlAAAAAjklEQVR42mXIxwKCMBRE0WfvqIiKYseCFWyAZvL/v+WLISvurOZQvsPNtNMAdwQJ1TcDfy11Gbgz01jDdGOaaACkmvzs5xr0xbZt9a0/+McTb9FcCYhlg2EwVFU9xLUYHoOQ3L2URhc6RykDVNcWOmWqdMHwVBAXQ7zphZChUFeRI5JeIhwGkx08Apvy/QCdyxpVfEL2sAAAAABJRU5ErkJggg==);
64	background-repeat: no-repeat;
65	}
66	-
67	.link_add{
68	margin-top: 2px;
69	margin-bottom: 2px;
	@@ -180,8 +185,8 @@ $conf = Mage::getStoreConfig('axzoom_options');
180	<tr class="headings">
181	<th><?php echo $this->__('Cover Image'); ?></th>
182	<th><?php echo $this->__('Name'); ?></th>
183	- <th><?php echo $this->__('Active'); ?></th>
184	- <th class="last" style="width:~~400px~~;"><?php echo $this->__('Actions'); ?></th>
185	</tr>
186	</thead>
187	<tbody id="imageTableSetsRows">
	@@ -203,10 +208,11 @@ $conf = Mage::getStoreConfig('axzoom_options');
203	</span>
204	</td>
205	<td>
206	- <button class="delete_set scalable delete"><span><?php echo $this->__('Delete'); ?></span></button>
207	<button class="images_set scalable"><span><?php echo $this->__('Images'); ?></span></button>
208	<button class="scalable preview_set hide_class"><span><?php echo $this->__('Preview'); ?></span></button>
209	- <button class="~~crop_set~~ scalable"><span><?php echo $this->__('~~360° Product Tour~~'); ?></span></button>


210	</td>
211	</tr>
212	</table>
	@@ -377,26 +383,57 @@ $conf = Mage::getStoreConfig('axzoom_options');
377
378	var id360 = $(this).parent().parent().data('group');
379	var id360set = $(this).parent().parent().attr('id');
380	-
381	- $.openAjaxZoomInFancyBox({href: '<?php echo Mage::getBaseUrl('js') ?>axzoom/preview/preview.php?3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder() ?>js/axzoom/pic/360/' + id_product + '/' + id360+'&group='+id360+'&id='+id360set, iframe: true});







382	});
383
384	-
385	$('.crop_set').die().live('click', function(e) {
386	e.preventDefault();
387
388	var id360 = $(this).parent().parent().data('group');
389	var id360set = $(this).parent().parent().attr('id');
390	-

391	var cropHref = '<?php echo Mage::getBaseUrl('js'); ?>axzoom/preview/cropeditor.php?';
392	cropHref += '3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder(); ?>js/axzoom/pic/360/' + id_product + '/' + id360;



393	cropHref += '&group='+id360+'&id='+id360set;
394	cropHref += '&url_get=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/getCropJson"); ?>';
395	cropHref += '&url_set=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/setCropJson"); ?>';
396	cropHref += '&form_key=<?php echo Mage::getSingleton('core/session')->getFormKey(); ?>';
397	-

398	$.openAjaxZoomInFancyBox({href: cropHref, iframe: true, scrolling: 1});
399




















400	});
401
402	$('.images_set').die().live('click', function(e) {


3	* Module: jQuery AJAX-ZOOM for Magento, /app/design/adminhtml/default/default/template/axzoom/tab360-sets.phtml
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

57	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABX0lEQVQYGXXBPyiEcRgH8O/wJunSdRkvGSSZDDJckmSQZDCYrhskg0xGm3RJBoMMMkoGww2XJBkMMhh06XqTZJDOFV3e+/e+v+d5fo97ryuu+HzwmxnmIzOFdkWnHEeDF6WUPKragpkvOvjB11b5lLN8SatmQQpmkZYoy+laXzniT5YjkJKq/arNoOGtg47R5I/QgXyqSh5mVIr+OB9wxk9UBziNFi9uVdUSAHbRUOvlPb6nja8uk/QTtCJPfCEuJQGwixazxhl5VbXKx9Ue3g8mEGIXTZU+W+c0bVm1pXoc4Nx7B0LsAl6E1ilL23REh3xVjgG1QckgxLtW+ITOg2k00R7ngkmvm3doCSG5UBXXi6KFbypDtCEFVZNCqBoL5mhZHoIxNHgxzgP1Xnmz1WACP/wBvqXND8ckedfM8mW9P+eg3YdDm/JsRV5ov9SJv8mdqpVSDP8xY3xGK2jzDTL14vqSI1apAAAAAElFTkSuQmCC);
58	background-repeat: no-repeat;
59	}
60	+ #imageTableSetsRows .hotspot_set>span {
61	+ padding-left: 20px;
62	+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAllBMVEUAAADs7Ozy8vL29vb29vb39/f4+Pj4+Pj4+Pj4+Pj4+Pj5+fn5+fn4+Pj5+fn6+vr6+vr6+vr6+vr5+fn6+vr6+vr6+vr8/Pz8/Pz8/Pz9/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f3+/v7+/v7+/v79/f3+/v7+/v7+/v7+/v7+/v7////Ln3C7AAAAMHRSTlMABA4SGhoiJCYqLjA2ODg4PEBESEhMUHyBmaOpr7O3u72/yc/R19/j5+vx9/f5+/1Qz7jwAAAAcUlEQVR4AXXBBw6CQBBA0W8vYFfsRexl3Jn7X85NEIRE3+O3YPOQXY9M/6mejEmd7BhNYruUSDRValC5a0iio2e8g45IlMUF0BBX5WNut9n0aktS9Zd6rk1mod6ar5Yz0y45K9U9eaHakIJtTNEg4o83rY4LEIWzwoYAAAAASUVORK5CYII=);
63	+ background-repeat: no-repeat;
64	+ }
65	+
66	#file360-add-button span{
67	padding-left: 20px;
68	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAulBMVEUAAADj4+Pi4uLk5OTm5ubn5+fo6Ojy8vLn5+fv7+/w8PDo6Oj29vbv7+/29vb19fX39/f7+/v6+vr8/Pz7+/v+/v77+/v8/Pz8/Pz7+/v7+/v8/Pz9/f38/Pz9/f38/Pz8/Pz9/f37+/v9/f39/f38/Pz9/f38/Pz9/f3+/v7////7+/v8/Pz9/f39/f39/f39/f39/f39/f39/f38/Pz8/Pz9/f39/f3+/v7+/v79/f3+/v7+/v7///84WsHxAAAAPHRSTlMAAgQEBAQEBAYIDBAYHBweLD5ESlBgbnJ4h42PkZmdn6Ghp6eztbm7u729y8vP1dvd3+Hp7e/v8fP3+f27bAlAAAAAjklEQVR42mXIxwKCMBRE0WfvqIiKYseCFWyAZvL/v+WLISvurOZQvsPNtNMAdwQJ1TcDfy11Gbgz01jDdGOaaACkmvzs5xr0xbZt9a0/+McTb9FcCYhlg2EwVFU9xLUYHoOQ3L2URhc6RykDVNcWOmWqdMHwVBAXQ7zphZChUFeRI5JeIhwGkx08Apvy/QCdyxpVfEL2sAAAAABJRU5ErkJggg==);
69	background-repeat: no-repeat;
70	}
71	+
72	.link_add{
73	margin-top: 2px;
74	margin-bottom: 2px;

185	<tr class="headings">
186	<th><?php echo $this->__('Cover Image'); ?></th>
187	<th><?php echo $this->__('Name'); ?></th>
188	+ <th style="width: 100px;"><?php echo $this->__('Active'); ?></th>
189	+ <th class="last" style="width: 250px;"><?php echo $this->__('Actions'); ?></th>
190	</tr>
191	</thead>
192	<tbody id="imageTableSetsRows">

208	</span>
209	</td>
210	<td>

211	<button class="images_set scalable"><span><?php echo $this->__('Images'); ?></span></button>
212	<button class="scalable preview_set hide_class"><span><?php echo $this->__('Preview'); ?></span></button>
213	+ <button class="delete_set scalable delete"><span><?php echo $this->__('Delete'); ?></span></button>
214	+ <button class="hotspot_set scalable" style="margin-top: 5px"><span><?php echo $this->__('Hotspots'); ?></span></button>
215	+ <button class="crop_set scalable" style="margin-top: 5px"><span><?php echo $this->__('360° Product Tour'); ?></span></button>
216	</td>
217	</tr>
218	</table>

383
384	var id360 = $(this).parent().parent().data('group');
385	var id360set = $(this).parent().parent().attr('id');
386	+ var qty = $('tr[data-group=' + id360 + ']').length;
387	+
388	+ var href = '<?php echo Mage::getBaseUrl('js') ?>axzoom/preview/preview.php?';
389	+ href += '3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder() ?>js/axzoom/pic/360/' + id_product + '/' + id360;
390	+ if (qty < 2){
391	+ href += '/' + id360set;
392	+ }
393	+ href += '&group='+id360+'&id='+id360set;
394	+ $.openAjaxZoomInFancyBox({href: href, iframe: true});
395	});
396

397	$('.crop_set').die().live('click', function(e) {
398	e.preventDefault();
399
400	var id360 = $(this).parent().parent().data('group');
401	var id360set = $(this).parent().parent().attr('id');
402	+ var qty = $('tr[data-group=' + id360 + ']').length;
403	+
404	var cropHref = '<?php echo Mage::getBaseUrl('js'); ?>axzoom/preview/cropeditor.php?';
405	cropHref += '3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder(); ?>js/axzoom/pic/360/' + id_product + '/' + id360;
406	+ if (qty < 2){
407	+ cropHref += '/' + id360set;
408	+ }
409	cropHref += '&group='+id360+'&id='+id360set;
410	cropHref += '&url_get=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/getCropJson"); ?>';
411	cropHref += '&url_set=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/setCropJson"); ?>';
412	cropHref += '&form_key=<?php echo Mage::getSingleton('core/session')->getFormKey(); ?>';
413	+ cropHref += '&hs_get=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/getHotspotJson"); ?>';
414	+
415	$.openAjaxZoomInFancyBox({href: cropHref, iframe: true, scrolling: 1});
416
417	+ });
418	+
419	+ $('.hotspot_set').die().live('click', function(e) {
420	+ e.preventDefault();
421	+
422	+ var id360 = $(this).parent().parent().data('group');
423	+ var id360set = $(this).parent().parent().attr('id');
424	+ var qty = $('tr[data-group=' + id360 + ']').length;
425	+
426	+ var hotspotHref = '<?php echo Mage::getBaseUrl('js'); ?>axzoom/preview/hotspoteditor.php?';
427	+ hotspotHref += '3dDir=3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder(); ?>js/axzoom/pic/360/' + id_product + '/' + id360;
428	+ if (qty < 2){
429	+ hotspotHref += '/' + id360set;
430	+ }
431	+ hotspotHref += '&group='+id360+'&id='+id360set;
432	+ hotspotHref += '&url_get=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/getHotspotJson"); ?>';
433	+ hotspotHref += '&url_set=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/setHotspotJson"); ?>';
434	+ hotspotHref += '&form_key=<?php echo Mage::getSingleton('core/session')->getFormKey(); ?>';
435	+ $.openAjaxZoomInFancyBox({href: hotspotHref, iframe: true, scrolling: 1});
436	+
437	});
438
439	$('.images_set').die().live('click', function(e) {

app/design/frontend/base/default/template/ax_zoom/catalog/product/view/media.phtml CHANGED Viewed

	@@ -3,9 +3,9 @@
3	* Module: jQuery AJAX-ZOOM for Magento, /app/design/frontend/base/default/template/ax_zoom/catalog/product/view/media.phtml
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	- * Version: 1.2.0
7	- * Date: 2016-05-07
8	- * Review: 2016-05-07
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*


3	* Module: jQuery AJAX-ZOOM for Magento, /app/design/frontend/base/default/template/ax_zoom/catalog/product/view/media.phtml
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

js/axzoom/preview/cropeditor.php CHANGED Viewed

	@@ -3,9 +3,9 @@
3	* Module: jQuery AJAX-ZOOM for Magento, /jss/axzoom/preview.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	- * Version: 1.2.1
7	- * Date: 2016-05-15
8	- * Review: 2016-05-15
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*
	@@ -31,7 +31,11 @@
31	}
32
33	/* Set to true to remove certain things not needed if included in shops / cms */


34	$axzm_cms_mode = true;


35	$first_load360_dir = Mage::app()->getRequest()->getParam('3dDir');
36	$default_thumb_size = $axzm_cms_mode ? 140 : 180;
37	$player_responsive = $axzm_cms_mode ? true : false;
	@@ -52,92 +56,94 @@
52	$id_360set = Mage::app()->getRequest()->getParam('id');
53	$first_load_crop_json = Mage::app()->getRequest()->getParam('url_get')."?id_360set=$id_360set&id_360=$id_360";
54	$save_crop_json = Mage::app()->getRequest()->getParam('url_set')."?id_360set=$id_360set&id_360=$id_360&form_key=".Mage::app()->getRequest()->getParam('form_key');



55	?>
56
57	- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
58	- <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">
59	- <head>
60	- <title>jCrop AJAX-ZOOM zoomTo and crop on large images</title>
61	- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
62	- <meta http-equiv="imagetoolbar" content="no">
63	-
64	<?php
65	- if (!$~~axzm_cms_mode~~)
66	{
67	?>
68	- <meta property="og:type" content="article"/>
69	- <meta property="og:title" content="jCrop AJAX-ZOOM"/>
70	- <meta property="og:description" content="Crop high resolution images with jCrop and AJAX-ZOOM."/>
71	- <meta name="description" content="Crop high resolution images with jCrop and AJAX-ZOOM." />
72	- <meta property="og:image" content="http://www.ajax-zoom.com/pic/layout/image-zoom_35.jpg"/>
73	- <?php
74	- }
75	- ?>
76
















77	<?php


78	if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone'))
79	echo '<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">';
80	else
81	echo '<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">';
82	- ?>



83	<!-- jQuery core -->
84	- <script type="text/javascript" src="~~../axZm/~~plugins/jquery-1.8.3.min.js"></script>
85
86	<!-- AJAX-ZOOM -->
87	- <link rel="stylesheet" href="~~../~~axZm~~/axZm~~.css" type="text/css" media="screen">
88	- <script type="text/javascript" src="~~../axZm/~~jquery.axZm.js"></script>
89
90	<!-- jCrop (external jQuery plugin utilized for this crop editor) -->
91	- <link type="text/css" href="~~../axZm/~~plugins/jCrop/css/jquery.Jcrop.css" rel="stylesheet" />
92	- <script type="text/javascript" src="~~../axZm/~~plugins/jCrop/js/jquery.Jcrop.js"></script>
93
94	<!-- Include mousewheel script -->
95	- <script type="text/javascript" src="~~../axZm/~~extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
96
97	<!-- Only needed for the 360 hotspot example where fancybox is applied for one hotspot click event -->
98	- <link href="~~../axZm/~~plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.zIndex.css" type="text/css" media="screen" rel="stylesheet">
99	- <script type="text/javascript" src="~~../axZm/~~plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.js"></script>
100	-
101	<!-- Include thumbSlider CSS && JS. -->
102	- <link rel="stylesheet" type="text/css" href="~~../axZm/~~extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" />
103	- <script type="text/javascript" src="~~../axZm/~~extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>
104
105	<!-- Set of functions for this image cropping tool -->
106	- <link rel="stylesheet" type="text/css" href="~~../axZm/~~extensions/jquery.axZm.imageCropEditor.css">
107	- <script type="text/javascript" src="~~../axZm/~~extensions/jquery.axZm.imageCropEditor.js"></script>
108
109	<!-- A small function to add title button which will expend to full description -->
110	- <link rel="stylesheet" type="text/css" href="~~../axZm/~~extensions/jquery.axZm.expButton.css">
111	- <script type="text/javascript" src="~~../axZm/~~extensions/jquery.axZm.expButton.js"></script>
112
113	<!-- Some other JavaScripts for the editor -->
114	- <script type="text/javascript" src="~~../axZm/~~plugins/JSON/jquery.json-2.3.min.js"></script>
115	- <script type="text/javascript" src="~~../axZm/~~plugins/js-beautify/beautify-all.min.js"></script>
116	- <script type="text/javascript" src="~~../axZm/~~plugins/jquery.scrollTo.min.js"></script>
117
118	<!-- Because of "sortable" used here, only needed for the editor! -->
119	- <link href="~~../axZm/~~plugins/jquery.ui/themes/ajax-zoom/jquery-ui.css" type="text/css" rel="stylesheet" />
120	- <script type="text/javascript" src="~~../axZm/~~plugins/jquery.ui/js/jquery-ui-1.8.24.custom.min.js"></script>
121
122	<!-- CLEditor - WYSIWYG Editor (external jQuery plugin) -->
123	- <link rel="stylesheet" type="text/css" href="~~../axZm/~~plugins/CLEditor/jquery.cleditor.css" />
124	- <script type="text/javascript" src="~~../axZm/~~plugins/CLEditor/jquery.cleditor.min.js"></script>
125	- <script type="text/javascript" src="~~../axZm/~~plugins/CLEditor/jquery.cleditor.table.min.js"></script>
126
127	<?php
128	if (!$axzm_cms_mode)
129	{
130	?>
131	<!-- Javascript to style the syntax, not needed! -->
132	- <link href="~~../axZm/~~plugins/demo/~~syntaxhighlighter~~/~~styles/shCore~~.css" type="text/css" ~~rel~~="~~stylesheet~~" />
133	- <~~link~~ ~~href~~="~~../axZm~~/plugins/demo/~~syntaxhighlighter~~/~~styles/shThemeCustom~~.~~css~~" ~~type="text/css" rel="stylesheet" />~~
134	- <style type="text/css">.syntaxhighlighter .line .number code{width: auto !important;} </style>
135	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/src/shCore.js"></script>
136	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/scripts/shBrushJScript.js"></script>
137	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/scripts/shBrushPhp.js"></script>
138	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/scripts/shBrushCss.js"></script>
139	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/scripts/shBrushXml.js"></script>
140	- <script type="text/javascript">SyntaxHighlighter.all();</script>
141	<?php
142	}
143	?>
	@@ -151,13 +157,27 @@ if (!$axzm_cms_mode)
151	echo 'jQuery.aZcropEd.errors = false;';
152	?>
153	</script>
154	-



155	</head>
156	<body>
157
158	<?php
159	if (!$axzm_cms_mode)
160	include ('navi.php');











161	?>
162
163	<div id="outerWrap" style="width: 821px; margin: 0 auto;">
	@@ -201,9 +221,9 @@ if (!$axzm_cms_mode)
201	<ul>
202	<li><a href="#aZcR_tabs-about">About</a></li>
203	<li><a href="#aZcR_tabs-sel">Crop settings</a></li>
204	- <li><a href="#aZcR_tabs-crops">~~Cropped images~~</a></li>
205	- <li><a href="#aZcR_tabs-descr">~~Description / Settings~~</a></li>
206	- <li><a href="#aZcR_tabs-import"><?php echo !$axzm_cms_mode ? 'Import' : 'Save'; ?></a></li>
207	<?php
208	if (!$axzm_cms_mode)
209	{
	@@ -221,7 +241,10 @@ if (!$axzm_cms_mode)
221	if (!$axzm_cms_mode)
222	{
223	?>
224	- <div class="legend">About AJAX-ZOOM crop editor ~~[Last updated: 2016-04-25]</div~~>



225	<p>With this tool you can easily create several crops from 2D images / galleries,
226	360 spins or 3D multirow which are loaded into AJAX-ZOOM player.
227	Besides other thinkable purposes the goal here is to make a "crop gallery" placed outside of the AJAX-ZOOM player.
	@@ -259,15 +282,15 @@ if (!$axzm_cms_mode)
259	</script>
260	<div class="legend">Demo other content</div>
261	<p>Press on the buttons below to load a different content into the player.</p>
262	- <input type="button" value="360 example"
263	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[1])">
264	- <input type="button" value="2d example (single image)"
265	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[2])">
266	- <input type="button" value="2d gallery (many images)"
267	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[3])">
268	- <input type="button" value="3d example (multirow)"
269	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[4])">
270	- <input type="button" value="360 with hotspots"
271	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[5])">
272	</div>
273	<?php
	@@ -280,17 +303,17 @@ if (!$axzm_cms_mode)
280	<div class="legend">How to</div>
281	<ol>
282	<li style="margin-bottom: 10px">
283	- <img src="~~../axZm/~~icons/default/button_iPad_settings.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
284	Optionally hit crop settings button or
285	<a class="linkShowTab" href="javascript: void(0)" onclick="jQuery('#aZcR_tabs').tabs('select','#aZcR_tabs-sel');">
286	Crop settings</a>tab to adjust crop selector e.g. set aspect ratio and output parameters for the thumbnail.
287	</li>
288	<li style="margin-bottom: 10px">
289	- <img src="~~../axZm/~~icons/default/button_iPad_jcrop.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
290	Hit the crop button to toggle crop and select region to crop.
291	</li>
292	<li style="margin-bottom: 10px">
293	- <img src="~~../axZm/~~icons/default/button_iPad_fire.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
294	When ready hit the red "fire crop" button.
295	</li>
296	<li style="margin-bottom: 10px">
	@@ -301,7 +324,7 @@ if (!$axzm_cms_mode)
301	<li style="margin-bottom: 10px">
302	Optionally add thumb title, title and description to the crop regions in
303	<a class="linkShowTab" href="javascript: void(0)"
304	- onclick="jQuery('#aZcR_tabs').tabs('select','#aZcR_tabs-descr');">~~Description / Settings~~</a> tab.
305	</li>
306	<li>
307	<a class="linkShowTab" href="javascript: void(0)"
	@@ -339,28 +362,28 @@ if (!$axzm_cms_mode)
339	<div class="azMsg clearfix">
340	<a href="example35_clean.php">
341	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_clean.jpg"
342	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
343	</a>
344	<a href="example35_clean.php">example35_clean.php</a> basically has the same setup as this editor but without the toolbar under the player.
345	</div>
346	<div class="azMsg clearfix">
347	<a href="example35_clean_horizontal.php">
348	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_clean_horizontal.jpg"
349	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
350	</a>
351	If you want to have a horizontal gallery please check out <a href="example35_clean_horizontal.php">example35_clean_horizontal.php</a>
352	</div>
353	<div class="azMsg clearfix">
354	<a href="example35_responsive.php">
355	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_responsive.jpg"
356	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
357	</a>
358	For responsive integrations please use <a href="example35_responsive.php">example35_responsive.php</a>
359	</div>
360	<div class="azMsg clearfix">
361	<a href="example35_gallery.php">
362	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_gallery.jpg"
363	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
364	</a>
365	Of course the cropped thumbnails do not need to be loaded into the thumb slider.
366	In <a href="example35_gallery.php">example35_gallery.php</a> they are appended to some div.
	@@ -368,16 +391,15 @@ if (!$axzm_cms_mode)
368	<div class="azMsg clearfix">
369	<a href="example32_responsive.php">
370	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_32_responsive.jpg"
371	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
372	</a>
373	<a href="example32_responsive.php">example32_responsive.php</a>
374	optionally loads the results of this crop editor into mouseover zoom / 360 combination
375	and instantly attaches the crop gallery to the player. Very convenient for e-commerce.
376	</div>
377
378	- <~~div class="azMsg"><~~a href="http://www.ajax-zoom.com/index.php?cid=contact">On request</a>
379	AJAX-ZOOM team will deliver to you exactly what you need as a different example or integrated into your page layout / html.
380	- </div>
381
382	<div class="legend">The final code example</div>
383	The only difference between basic AJAX-ZOOM implementation / example
	@@ -386,7 +408,7 @@ if (!$axzm_cms_mode)
386	the thumbsnails; all codes for implementing can be also found in the example35_*.php files.
387	<div class="legend">JavaScript & CSS files in Head</div>
388	<?php
389	- echo "<pre class='brush: html'>";
390	echo htmlspecialchars ('
391	<!-- jQuery core -->
392	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	@@ -407,12 +429,12 @@ if (!$axzm_cms_mode)
407	<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.expButton.css" type="text/css" />
408	<script type="text/javascript" src="../axZm/extensions/jquery.axZm.expButton.js"></script>
409	');
410	- echo '</pre>';
411	?>
412
413	<div class="legend">CSS</div>
414	<?php
415	- echo '<pre class="brush: css">';
416	echo htmlspecialchars ('
417	#playerInnerWrap{
418	position: relative; border-left: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA;
	@@ -431,12 +453,12 @@ if (!$axzm_cms_mode)
431	}
432
433	');
434	- echo '</pre>';
435	?>
436
437	<div class="legend">HTML markup (taken from <a href="http://www.ajax-zoom.com/examples/example35_clean.php">example35_clean.php</a>)</div>
438	<?php
439	- echo "<pre class='brush: html'>";
440	echo htmlspecialchars ('
441	<div id="playerInnerWrap" style="min-height: 480px;">
442	<div id="azPlayer" style="width: 721px;">
	@@ -452,12 +474,12 @@ if (!$axzm_cms_mode)
452	</div>
453	</div>
454	');
455	- echo '</pre>';
456	?>
457
458	<div class="legend">Javascript</div>
459	<?php
460	- echo "<pre class='brush: js'>";
461	echo htmlspecialchars ('
462	// Init the slider
463	// Thumbs will be appended instantly
	@@ -494,7 +516,7 @@ ajaxZoom.parameter = "example=spinIpad&3dDir=../pic/zoom3d/Canon_1100D";
494
495	// Id of element where AJAX-ZOOM will be loaded into
496	ajaxZoom.divID = "azPlayer";
497	-
498	// Define callbacks, for complete list check the docs
499	ajaxZoom.opt = {
500	onLoad: function(){
	@@ -581,29 +603,9 @@ jQuery.fn.axZm.load({
581	//window.fullScreenStartSplash = {enable: false, className: false, opacity: 0.75};
582	//jQuery.fn.axZm.openFullScreen(ajaxZoom.path, ajaxZoom.parameter, ajaxZoom.opt, ajaxZoom.divID, false, false);
583	');
584	- echo '</pre>';
585	?>
586
587	- <div class="legend">Is it free?</div>
588	-
589	- <ul style="margin: 0;">
590	- <li style="margin-top: 10px">
591	- The answer is Yes and No. AJAX-ZOOM has it's own
592	- <a href="http://www.ajax-zoom.com/index.php?cid=download#heading_4">License Agreement</a>, please read!
593	- </li>
594	- <li style="margin-top: 10px">
595	- Under certain conditions You can use it totally for free!
596	- </li>
597	- <li style="margin-top: 10px">
598	- In any case you can and should <a href="http://www.ajax-zoom.com/index.php?cid=download" target="_blank">download</a>
599	- and test AJAX-ZOOM without any further obligations. If you like it and would have certain features enabled - You can buy it.
600	- </li>
601	- <li style="margin-top: 10px">
602	- In case after all you have any doubts or questions please contact the
603	- <a href="http://www.ajax-zoom.com/index.php?cid=contact" target="_blank">support</a>.
604	- </li>
605	- </ul>
606	-
607	<?php
608	/* This include is just for the demo, you can remove it */
609	include ('footer.php');
	@@ -629,28 +631,37 @@ jQuery.fn.axZm.load({
629	</div>
630	<div id="cropOpt_ratioBox" style="clear: both; margin: 5px 0px 5px 0px;">
631	<label>Aspect ratio:</label>
632	- W: <input id="cropOpt_ratio1" type="text" value="1" ~~style~~="~~width: 50px~~" ~~onchange="jQuery.aZcropEd.jCropAspectRatio()">~~
633	- ~~<input type="button"~~ style="width: ~~30px;~~" ~~value~~="~~⇔" onclick="~~jQuery.aZcropEd.~~jCropAspectFlipValues~~()">
634	- H: <input id="~~cropOpt_ratio2~~" ~~type~~="~~text~~" value="1" ~~style~~="~~width: 50px~~" ~~onchange="jQuery.aZcropEd.jCropAspectRatio()">~~



635	<div>
636	<label></label>
637	- <input type="button" value="as thumb" ~~style~~="~~margin-top: 3px; width: 80px;~~" ~~onclick="jQuery.aZcropEd.jCropAspectAsThumb()">~~
638	- ~~<input type="button" value="as image"~~ style="margin-top: 3px; width: 80px;" onclick="jQuery.aZcropEd.~~jCropAspectAsImage~~()">


639	</div>
640	</div>
641	<div id="cropOpt_sizeBox" style="clear: both; margin: 5px 0px 5px 0px; display: none;">
642	<label>Fixed size:</label>
643	- W: <input id="cropOpt_sizeW" type="text" value="" ~~style~~="~~width: 50px~~" ~~onchange="jQuery.aZcropEd.jCropFixedSize()">~~
644	- ~~H: <input id="cropOpt_sizeH" type="text" value=""~~ style="width: 50px" onchange="jQuery.aZcropEd.jCropFixedSize()"> px


645	</div>
646
647	<div class="legend">Thumbnail settings</div>
648
649	<div style="clear: both; margin: 5px 0px 5px 0px;">
650	<label>Thumbnail size:</label>
651	- W: <input id="cropOpt_thumbSizeW" type="text" ~~value="<?php echo $default_thumb_size; ?>"~~

652	style="width: 50px" onchange="jQuery.aZcropEd.jCropInitSettings()">
653	- H: <input id="cropOpt_thumbSizeH" type="text" ~~value="<?php echo $default_thumb_size; ?>"~~

654	style="width: 50px" onchange="jQuery.aZcropEd.jCropInitSettings()"> px
655	</div>
656
	@@ -665,20 +676,22 @@ jQuery.fn.axZm.load({
665
666	<div id="cropOpt_colorBox" style="clear: both; margin: 5px 0px 5px 0px; display: none;">
667	<label>Background color (hex):</label>
668	- #<input id="cropOpt_backColor" type="text" value="FFFFFF" ~~style~~="~~width: 100px~~" ~~onchange="jQuery.aZcropEd.jCropInitSettings()">~~

669	</div>
670	<div style="clear: both; margin: 5px 0px 5px 0px;">
671	<label>Jpeg quality:</label>
672	- <input id="cropOpt_jpgQual" type="text" value="90" style="width: 40px" ~~onchange~~="~~jQuery.aZcropEd.jCropInitSettings()~~">

673	(10 - 100)
674	</div>
675	<div style="clear: both; margin: 5px 0px 5px 0px;">
676	<label>Cache (can be set later):</label>
677	- <input id="cropOpt_cache" type="checkbox" value="1" ~~onchange~~="~~jQuery.aZcropEd.jCropInitSettings()~~">

678	</div>
679	</div>
680	</div>
681	-
682	</div>
683
684	<!-- Cropped images -->
	@@ -702,7 +715,8 @@ jQuery.fn.axZm.load({
702	if (!$axzm_cms_mode)
703	{
704	?>
705	- <div class="azMsg">Drag & drop to reorder the thumbs, ~~click to get the paths and other information (see below),~~

706	double click to zoom.
707	</div>
708	<?php
	@@ -711,7 +725,8 @@ jQuery.fn.axZm.load({
711
712	<!-- Crop results real size -->
713	<div id="aZcR_cropResults"></div>
714	- <input type="button" value="Reamove all crops" ~~style~~="~~margin-top: 5px~~" ~~onclick="jQuery.aZcropEd.clearAll()" />~~

715	<?php
716	if (!$axzm_cms_mode)
717	{
	@@ -722,19 +737,22 @@ jQuery.fn.axZm.load({
722
723	<div style="clear: both; margin: 5px 0px 5px 0px;">
724	<label>Query string:</label>
725	- <input id="aZcR_qString" type="text" onClick="this.select();" ~~style~~="~~margin-bottom: 5px; width: 100%~~" ~~value="">~~

726	</div>
727
728	<div style="clear: both; margin: 5px 0px 5px 0px;">
729	<label>Url:</label>
730	(please note that full Url might differ if this editor is implemented in a backend of some CMS)
731	- <input id="aZcR_url" type="text" onClick="this.select();" ~~style~~="~~margin-bottom: 5px; width: 100%~~" ~~value="">~~

732	</div>
733
734	<div style="clear: both; margin: 5px 0px 5px 0px;">
735	<label>Cached image url:</label>
736	(only available if "cache" option is chacked under "crop settings" tab)
737	- <input id="aZcR_contentLocation" type="text" onClick="this.select();" ~~style~~="~~margin-bottom: 5px; width: 100%~~" ~~value="">~~

738	</div>
739	<?php
740	}
	@@ -743,12 +761,9 @@ jQuery.fn.axZm.load({
743
744	<!-- Description -->
745	<div id="aZcR_tabs-descr">
746	- <div class="legend">Crop ~~description~~</div>
747
748	<div class="azMsg">
749	- <img border="0" style="position: relative; cursor: pointer; float: right; margin-right: -5px; margin-top: -5px;"
750	- alt="close this box" title="close this message" onclick="jQuery(this).parent().remove()" src="../axZm/icons/default/zoombutton_close.png">
751	-
752	<?php
753	if (!$axzm_cms_mode)
754	{
	@@ -757,19 +772,21 @@ jQuery.fn.axZm.load({
757	In this editor and also in the derived "clean" examples like
758	<a href="example35_clean.php">example35_clean.php</a>
759	we use "axZmEb" - expandable button (AJAX-ZOOM additional plugin) to display these titles \|\| descriptions
760	- over the image respectively inside the player. ~~You could however easily change the usage of title \|\| description in your implementation,~~

761	e.g. display them under the player or whatever. Just change the "handleTexts" property of the options object
762	- when passing it to jQuery.axZmImageCropLoad - see source code of e.g. ~~<a href="example35_clean.php">example35_clean.php</a>;<br><hr />~~

763
764	Besides HTML or your text you could also load external content in iframe! The prefix for the source is "iframe:"<br><br>
765	- e.g. to load an ~~extennal~~ page simply put something like this in the descripion:<br>
766	- iframe://www.canon.co.uk/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1100D
767	<br><br>
768	To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>
769	- iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage
770	<br><br>
771	To load some dynamic content over AJAX use "ajax:" as prefix, e.g.<br>
772	- ajax:/test/some_content_data.php?req=123
773	<br><br>
774	If you do not define the title, then the content will be loaded instantly as soon as the spin animation finishes.
775
	@@ -781,7 +798,7 @@ jQuery.fn.axZm.load({
781	Optionally add a title and/or description.
782	Besides HTML or your text you could also load external content in iframe!
783	The prefix for the source is "iframe:"<br><br>
784	- e.g. to load an ~~extennal~~ page simply put something like this in the descripion:<br>
785	iframe://www.canon.co.uk/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1100D
786	<br><br>
787	To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>
	@@ -831,31 +848,32 @@ jQuery.fn.axZm.load({
831	if (!$axzm_cms_mode)
832	{
833	?>
834	- <input type="button" value="Get all" onclick="jQuery.aZcropEd.getAllThumbs()">
835
836	- <select onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete=off>
837	<option value="qString">Query string</option>
838	<option value="url">Url</option>
839	<option value="contentLocation">Cached image url</option>
840	</select>
841
842	- <select onchange="handleDisplayLongLine(this)" autocomplete=off>
843	<option value="JSON_data">JSON with data</option>
844	<option value="JSON">JSON</option>
845	<option value="CSV">CSV</option>
846	</select>
847
848	- <span style="display: none;">separated with <input type="text" value="\|" style="width: 20px;" ~~onchange~~="~~jQuery.aZcropEd.getAllThumbs()~~"~~></span>~~

849	<br>and convert to be cached
850	- <input type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs()" checked="true" autocomplete=off>
851	and replace thumb size
852	- <input type="checkbox" value="1" onclick="jQuery(this).next().toggle(); jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
853	<span style="display: none">
854	- W: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
855	- H: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete=off> px
856	</span>
857	<br>and convert px coordinates to percentage
858	- <input type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
859	<?php
860	}
861	else
	@@ -863,13 +881,13 @@ jQuery.fn.axZm.load({
863	?>
864	<input type="button" value="Refresh" onclick="jQuery.aZcropEd.getAllThumbs()">
865
866	- <select style="display: none;" onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete=off>
867	<option value="qString">Query string</option>
868	<option value="url">Url</option>
869	<option value="contentLocation">Cached image url</option>
870	</select>
871
872	- <select style="display: none;" onchange="handleDisplayLongLine(this)" autocomplete=off>
873	<option value="JSON_data">JSON with data</option>
874	<option value="JSON">JSON</option>
875	<option value="CSV">CSV</option>
	@@ -877,30 +895,30 @@ jQuery.fn.axZm.load({
877
878	<span style="display: none;"> <input type="text" value="\|" style="width: 20px; display: none;"
879	onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete=off></span>
880	- <input style="display: none;" type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs()" checked="true" autocomplete=off>
881	and replace thumb size
882	- <input type="checkbox" value="1" onclick="jQuery(this).next().toggle(); jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
883	<span style="display: none">
884	- W: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
885	- H: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete=off> px
886	</span>
887	- <input style="display: none;" type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
888
889	<?php
890	}
891	?>
892	</div>
893
894	- <form <?php echo !$axzm_cms_mode ? 'action="~~../axZm/~~saveCropJSON.php"' : ''; ?> id="aZcR_saveJSON">
895	- <textarea id="aZcR_getAllThumbs" style="width: 100%; height: 350px; font-size: 10px; margin-top: 5px;" ~~spellcheck="false"></textarea>~~

896	</form>
897	-
898	<?php
899	if ($axzm_cms_mode)
900	{
901	?>
902	- <input type="button" value="Save into database" id="btnSaveJSON">
903	- <input type="button" value="Remove line breaks" style="margin-top: 5px;"
904	onclick="jQuery('#aZcR_getAllThumbs').val(jQuery('#aZcR_getAllThumbs').val().replace(/(\r\n\|\n\|\r\|\t)/gm,''))">
905
906	<div id="dialog-saveJSON" title="JSON saved" style="display: none;">
	@@ -934,8 +952,9 @@ jQuery.fn.axZm.load({
934	{
935	?>
936	<!-- Just a button to select text in the textarea above, can be removed -->
937	- <input type="button" value="Select text" style="margin-top: 5px;" ~~onclick~~="~~jQuery('#aZcR_getAllThumbs')[0].select()~~">
938	- ~~<input type~~="~~button~~" ~~value="Remove line breaks" style="margin-top: 5px;"~~

939	onclick="jQuery('#aZcR_getAllThumbs').val(jQuery('#aZcR_getAllThumbs').val().replace(/(\r\n\|\n\|\r\|\t)/gm,''))">
940
941	<!-- Save -->
	@@ -948,8 +967,8 @@ jQuery.fn.axZm.load({
948	<div style="margin-top: 10px"><label>Create backup:</label><input type="checkbox" id="aZcR_jsBackUp" value="1" checked> -
949	creates backup of the current JSON file if present with a timestamp in file name</div>
950	<div style="margin-top: 10px"><label>Save JSON:</label>
951	- <input style="width: 100px;" type="button" value="Save" onClick="jQuery.aZcropEd.saveJSONtoFile();">
952	- to <input type="text" value="" id="aZcR_jsFileName">.json (a-zA-Z0-9-_)
953	</div>
954
955	<div style="margin-top: 10px"><label></label>
	@@ -962,11 +981,8 @@ jQuery.fn.axZm.load({
962	</div>
963
964	<div class="legend">Notes</div>
965	- ~~<ul>~~
966	- <li>~~In your final frontend presentation you can compose url out of query string with js~~
967	- <code>jQuery.fn.axZm.installPath()+'zoomLoad.php?'+queryString</code>
968	- </li>
969	- </ul>
970	<?php
971	}
972	?>
	@@ -986,43 +1002,43 @@ jQuery.fn.axZm.load({
986	</div>
987
988	<div style="clear: both; margin: 5px 0px 5px 0px;">
989	- <label>1. Path for 2D:</label> <input type="text" value="" ~~id="aZcR_pathToLoad2D" style="width: 400px;"> or~~

990	</div>
991
992	<div style="clear: both; margin: 5px 0px 5px 0px;">
993	- <label>2. Path for 360 or 3D:</label> <input type="text" value="" ~~id="aZcR_pathToLoad360" style="width: 400px;">~~

994	</div>
995
996	<div style="clear: both; margin: 15px 0px 5px 0px;">
997	- <label>3. Hotspot file path:</label> <input type="text" value="" ~~id="aZcR_hotspotFileToLoad" style="width: 350px;"> (optional)~~

998	</div>
999
1000	<div style="clear: both; margin: 5px 0px 5px 0px;">
1001	- <label>4. Crop file path:</label> <input type="text" value="" ~~id="aZcR_cropFileToLoad" style="width: 350px;"> (optional)~~

1002	</div>
1003
1004	<div style="clear: both; margin: 5px 0px 5px 0px;">
1005	- <input type="button" value="LOAD" onClick="jQuery.aZcropEd.changeAxZmContentPHP();">
1006	- <input type="button" value="GET" onClick="jQuery.aZcropEd.getLoadedParameters();">
1007	</div>
1008
1009	<div id="aZcR_pathToParameter"></div>
1010
1011	<div class="legend">How does it work:</div>
1012	-
1013	<div style="clear: both; margin: 5px 0px 5px 0px;">
1014	<ol>
1015	<li>
1016	- <ul>
1017	- ~~<li><strong>For~~ ~~2D</strong>~~ (~~single~~ ~~image~~ or ~~gallery~~ ~~with~~ ~~more images)~~
1018	- ~~please enter local path(s) to the image(s), e~~.g. <br>
1019	- ~~"<code>/pic/zoom/animals/test_animals1~~.~~png</code>"<~~br>
1020	- ~~or image set with image paths separated with vertical dash e~~.~~g.<~~br>
1021	- ~~"<code>/pic/zoom/animals/test_animals1~~.~~png\|/pic/zoom/animals/test_animals2~~.~~png</code>"~~<br>
1022	- ~~If you want to load all images from a folder please just enter the path to this folder e.g.~~ <br>
1023	- "<code>/pic/zoom/animals</code>"
1024	- </li>
1025	- </ul>
1026	</li>
1027	<li style="margin-top: 10px;">
1028	<ul>
	@@ -1040,37 +1056,28 @@ jQuery.fn.axZm.load({
1040	</ul>
1041	</li>
1042	<li style="margin-top: 10px;">
1043	- <ul>
1044	- <~~li style=~~"~~margin-top:~~ ~~5px;">~~
1045	- ~~<strong>Hotspot~~ ~~file~~ ~~path</strong>~~ is ~~the~~ ~~path to the~~ file ~~with~~ ~~hotspot~~ ~~configurations and positions, e~~.~~g.<br~~>
1046	- "<code>../pic/hotspotJS/eos_1100D.js</code>"<br>
1047	- You can create such a file in <a href="example33.php">example33.php</a>
1048	- </li>
1049	- </ul>
1050	</li>
1051	-
1052	<li style="margin-top: 10px;">
1053	- <ul>
1054	- <~~li style=~~"~~margin-top:~~ ~~5px;">~~
1055	- <strong>Crop file path</strong> is the path to the file with crop data which can be created with this editor, e.g.<br>
1056	- "<code>../pic/hotspotJS/eos_1100d.json</code>"<br>
1057	-
1058	- </li>
1059	- </ul>
1060	</li>
1061	</ol>
1062	</div>
1063
1064	<div class="legend">Load only JSON data from file into editor</div>
1065	- <div style="margin-top: 10px">
1066	- <label>Crop JSON file path:</label>
1067	- <input type="text" value="" id="aZcR_onlyJSONcropFile" style="width: 350px;">
1068	- </div>
1069	- <label></label>e.g.: "~~../~~pic/cropJSON/eos_1100d.json"
1070	- <div style="margin-top: 10px">
1071	- <label></label>
1072	- <input type="button" value="Load" ~~onclick~~="~~jQuery.aZcropEd.getJSONdataFromFile(jQuery('#aZcR_onlyJSONcropFile').val())~~">
1073	- ~~</div~~>

1074
1075	</div>
1076
	@@ -1093,6 +1100,18 @@ jQuery.fn.axZm.load({
1093	// First json to load
1094	onLoad: function(){ // onSpinPreloadEnd
1095	jQuery.aZcropEd.getJSONdataFromFile('<?php echo $first_load_crop_json;?>');












1096	},
1097
1098	onCropEnd: function(){
	@@ -1106,7 +1125,7 @@ jQuery.fn.axZm.load({
1106	}
1107	},
1108
1109	- onBeforeStart: function(){
1110	// Set background color, can also be done in css file
1111	jQuery('.axZm_zoomContainer').css({backgroundColor: '#FFFFFF'});
1112
	@@ -1245,7 +1264,7 @@ jQuery.fn.axZm.load({
1245	};
1246
1247	// Define the path to the axZm folder, adjust the path if needed!
1248	- ajaxZoom.path = "~~../axZm/~~";
1249
1250	// Define your custom parameter query string
1251	// example=spinIpad has many presets for 360 images
	@@ -1331,6 +1350,12 @@ jQuery.fn.axZm.load({
1331	});
1332
1333	</script>
1334	-



1335	</body>
1336	- </html>


3	* Module: jQuery AJAX-ZOOM for Magento, /jss/axzoom/preview.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

31	}
32
33	/* Set to true to remove certain things not needed if included in shops / cms */
34	+ $editor_version = '2.0.1';
35	+ $last_updated = '2016-08-05';
36	$axzm_cms_mode = true;
37	+ $axzm_tpl_mode = false;
38	+ $axzm_path = '../axZm/';
39	$first_load360_dir = Mage::app()->getRequest()->getParam('3dDir');
40	$default_thumb_size = $axzm_cms_mode ? 140 : 180;
41	$player_responsive = $axzm_cms_mode ? true : false;

56	$id_360set = Mage::app()->getRequest()->getParam('id');
57	$first_load_crop_json = Mage::app()->getRequest()->getParam('url_get')."?id_360set=$id_360set&id_360=$id_360";
58	$save_crop_json = Mage::app()->getRequest()->getParam('url_set')."?id_360set=$id_360set&id_360=$id_360&form_key=".Mage::app()->getRequest()->getParam('form_key');
59	+
60	+ // hotspots
61	+ $first_load_hotspot_json = Mage::app()->getRequest()->getParam('hs_get')."?id_360set=$id_360set&id_360=$id_360";
62	?>
63







64	<?php
65	+ if (!$axzm_tpl_mode)
66	{
67	?>








68
69	+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
70	+ <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">
71	+ <head>
72	+ <title>jCrop AJAX-ZOOM zoomTo and crop on large images</title>
73	+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
74	+ <meta http-equiv="imagetoolbar" content="no">
75	+
76	+ <?php
77	+ if (!$axzm_cms_mode)
78	+ {
79	+ ?>
80	+ <meta property="og:type" content="article"/>
81	+ <meta property="og:title" content="jCrop AJAX-ZOOM"/>
82	+ <meta property="og:description" content="Crop high resolution images with jCrop and AJAX-ZOOM."/>
83	+ <meta name="description" content="Crop high resolution images with jCrop and AJAX-ZOOM." />
84	+ <meta property="og:image" content="http://www.ajax-zoom.com/pic/layout/image-zoom_35.jpg"/>
85	<?php
86	+ }
87	+
88	if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone'))
89	echo '<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">';
90	else
91	echo '<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">';
92	+
93	+ }
94	+ ?>
95	+
96	<!-- jQuery core -->
97	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery-1.8.3.min.js"></script>
98
99	<!-- AJAX-ZOOM -->
100	+ <link name="az_editor_css_scripts" rel="stylesheet" href="<?php echo $axzm_path;?>axZm.css" type="text/css" media="screen">
101	+ <script type="text/javascript" src="<?php echo $axzm_path;?>jquery.axZm.js"></script>
102
103	<!-- jCrop (external jQuery plugin utilized for this crop editor) -->
104	+ <link name="az_editor_css_scripts" type="text/css" href="<?php echo $axzm_path;?>plugins/jCrop/css/jquery.Jcrop.css" rel="stylesheet" />
105	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jCrop/js/jquery.Jcrop.js"></script>
106
107	<!-- Include mousewheel script -->
108	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
109
110	<!-- Only needed for the 360 hotspot example where fancybox is applied for one hotspot click event -->
111	+ <link name="az_editor_css_scripts" href="<?php echo $axzm_path;?>plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.zIndex.css" type="text/css" media="screen" rel="stylesheet">
112	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.js"></script>
113	+
114	<!-- Include thumbSlider CSS && JS. -->
115	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" />
116	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>
117
118	<!-- Set of functions for this image cropping tool -->
119	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>extensions/jquery.axZm.imageCropEditor.css">
120	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/jquery.axZm.imageCropEditor.js"></script>
121
122	<!-- A small function to add title button which will expend to full description -->
123	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>extensions/jquery.axZm.expButton.css">
124	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/jquery.axZm.expButton.js"></script>
125
126	<!-- Some other JavaScripts for the editor -->
127	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/JSON/jquery.json-2.3.min.js"></script>
128	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/js-beautify/beautify-all.min.js"></script>
129	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery.scrollTo.min.js"></script>
130
131	<!-- Because of "sortable" used here, only needed for the editor! -->
132	+ <link name="az_editor_css_scripts" href="<?php echo $axzm_path;?>plugins/jquery.ui/themes/ajax-zoom/jquery-ui.css" type="text/css" rel="stylesheet" />
133	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery.ui/js/jquery-ui-1.8.24.custom.min.js"></script>
134
135	<!-- CLEditor - WYSIWYG Editor (external jQuery plugin) -->
136	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.css" />
137	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.min.js"></script>
138	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.table.min.js"></script>
139
140	<?php
141	if (!$axzm_cms_mode)
142	{
143	?>
144	<!-- Javascript to style the syntax, not needed! -->
145	+ <link name="az_editor_css_scripts" rel="stylesheet" href="<?php echo $axzm_path;?>plugins/demo/prism/prism.css" type="text/css" media="screen">
146	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/demo/prism/prism.min.js"></script>







147	<?php
148	}
149	?>

157	echo 'jQuery.aZcropEd.errors = false;';
158	?>
159	</script>
160	+ <?php
161	+ if (!$axzm_tpl_mode)
162	+ {
163	+ ?>
164	</head>
165	<body>
166
167	<?php
168	if (!$axzm_cms_mode)
169	include ('navi.php');
170	+
171	+ }
172	+ else
173	+ {
174	+ ?>
175	+ <script type="text/javascript">
176	+ // Move css to head if template mode
177	+ jQuery('*[name=az_editor_css_scripts]').appendTo('head');
178	+ </script>
179	+ <?php
180	+ }
181	?>
182
183	<div id="outerWrap" style="width: 821px; margin: 0 auto;">

221	<ul>
222	<li><a href="#aZcR_tabs-about">About</a></li>
223	<li><a href="#aZcR_tabs-sel">Crop settings</a></li>
224	+ <li><a href="#aZcR_tabs-crops">Crops</a></li>
225	+ <li><a href="#aZcR_tabs-descr">Descriptions</a></li>
226	+ <li><a href="#aZcR_tabs-import"><?php echo !$axzm_cms_mode ? 'Import / Save' : 'Save'; ?></a></li>
227	<?php
228	if (!$axzm_cms_mode)
229	{

241	if (!$axzm_cms_mode)
242	{
243	?>
244	+ <div class="legend" style="line-height: 60%;">About AJAX-ZOOM crop editor <br>
245	+ <span style="font-size: 50%">[Editor version: <?php echo $editor_version; ?>, date: <?php echo $last_updated; ?>]</span>
246	+ </div>
247	+
248	<p>With this tool you can easily create several crops from 2D images / galleries,
249	360 spins or 3D multirow which are loaded into AJAX-ZOOM player.
250	Besides other thinkable purposes the goal here is to make a "crop gallery" placed outside of the AJAX-ZOOM player.

282	</script>
283	<div class="legend">Demo other content</div>
284	<p>Press on the buttons below to load a different content into the player.</p>
285	+ <input type="button" value="360 example" autocomplete="off"
286	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[1])">
287	+ <input type="button" value="2d example (single image)" autocomplete="off"
288	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[2])">
289	+ <input type="button" value="2d gallery (many images)" autocomplete="off"
290	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[3])">
291	+ <input type="button" value="3d example (multirow)" autocomplete="off"
292	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[4])">
293	+ <input type="button" value="360 with hotspots" autocomplete="off"
294	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[5])">
295	</div>
296	<?php

303	<div class="legend">How to</div>
304	<ol>
305	<li style="margin-bottom: 10px">
306	+ <img src="<?php echo $axzm_path;?>icons/default/button_iPad_settings.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
307	Optionally hit crop settings button or
308	<a class="linkShowTab" href="javascript: void(0)" onclick="jQuery('#aZcR_tabs').tabs('select','#aZcR_tabs-sel');">
309	Crop settings</a>tab to adjust crop selector e.g. set aspect ratio and output parameters for the thumbnail.
310	</li>
311	<li style="margin-bottom: 10px">
312	+ <img src="<?php echo $axzm_path;?>icons/default/button_iPad_jcrop.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
313	Hit the crop button to toggle crop and select region to crop.
314	</li>
315	<li style="margin-bottom: 10px">
316	+ <img src="<?php echo $axzm_path;?>icons/default/button_iPad_fire.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
317	When ready hit the red "fire crop" button.
318	</li>
319	<li style="margin-bottom: 10px">

324	<li style="margin-bottom: 10px">
325	Optionally add thumb title, title and description to the crop regions in
326	<a class="linkShowTab" href="javascript: void(0)"
327	+ onclick="jQuery('#aZcR_tabs').tabs('select','#aZcR_tabs-descr');">Descriptions</a> tab.
328	</li>
329	<li>
330	<a class="linkShowTab" href="javascript: void(0)"

362	<div class="azMsg clearfix">
363	<a href="example35_clean.php">
364	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_clean.jpg"
365	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
366	</a>
367	<a href="example35_clean.php">example35_clean.php</a> basically has the same setup as this editor but without the toolbar under the player.
368	</div>
369	<div class="azMsg clearfix">
370	<a href="example35_clean_horizontal.php">
371	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_clean_horizontal.jpg"
372	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
373	</a>
374	If you want to have a horizontal gallery please check out <a href="example35_clean_horizontal.php">example35_clean_horizontal.php</a>
375	</div>
376	<div class="azMsg clearfix">
377	<a href="example35_responsive.php">
378	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_responsive.jpg"
379	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
380	</a>
381	For responsive integrations please use <a href="example35_responsive.php">example35_responsive.php</a>
382	</div>
383	<div class="azMsg clearfix">
384	<a href="example35_gallery.php">
385	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_gallery.jpg"
386	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
387	</a>
388	Of course the cropped thumbnails do not need to be loaded into the thumb slider.
389	In <a href="example35_gallery.php">example35_gallery.php</a> they are appended to some div.

391	<div class="azMsg clearfix">
392	<a href="example32_responsive.php">
393	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_32_responsive.jpg"
394	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
395	</a>
396	<a href="example32_responsive.php">example32_responsive.php</a>
397	optionally loads the results of this crop editor into mouseover zoom / 360 combination
398	and instantly attaches the crop gallery to the player. Very convenient for e-commerce.
399	</div>
400
401	+ <a href="http://www.ajax-zoom.com/index.php?cid=contact">On request</a>
402	AJAX-ZOOM team will deliver to you exactly what you need as a different example or integrated into your page layout / html.

403
404	<div class="legend">The final code example</div>
405	The only difference between basic AJAX-ZOOM implementation / example

408	the thumbsnails; all codes for implementing can be also found in the example35_*.php files.
409	<div class="legend">JavaScript & CSS files in Head</div>
410	<?php
411	+ echo '<pre class="brush: html"><code class="language-markup">';
412	echo htmlspecialchars ('
413	<!-- jQuery core -->
414	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

429	<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.expButton.css" type="text/css" />
430	<script type="text/javascript" src="../axZm/extensions/jquery.axZm.expButton.js"></script>
431	');
432	+ echo '</code></pre>';
433	?>
434
435	<div class="legend">CSS</div>
436	<?php
437	+ echo '<pre class="brush: html"><code class="language-css">';
438	echo htmlspecialchars ('
439	#playerInnerWrap{
440	position: relative; border-left: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA;

453	}
454
455	');
456	+ echo '</code></pre>';
457	?>
458
459	<div class="legend">HTML markup (taken from <a href="http://www.ajax-zoom.com/examples/example35_clean.php">example35_clean.php</a>)</div>
460	<?php
461	+ echo '<pre class="brush: html"><code class="language-markup">';
462	echo htmlspecialchars ('
463	<div id="playerInnerWrap" style="min-height: 480px;">
464	<div id="azPlayer" style="width: 721px;">

474	</div>
475	</div>
476	');
477	+ echo '</code></pre>';
478	?>
479
480	<div class="legend">Javascript</div>
481	<?php
482	+ echo '<pre class="brush: html"><code class="language-js">';
483	echo htmlspecialchars ('
484	// Init the slider
485	// Thumbs will be appended instantly

516
517	// Id of element where AJAX-ZOOM will be loaded into
518	ajaxZoom.divID = "azPlayer";
519	+
520	// Define callbacks, for complete list check the docs
521	ajaxZoom.opt = {
522	onLoad: function(){

603	//window.fullScreenStartSplash = {enable: false, className: false, opacity: 0.75};
604	//jQuery.fn.axZm.openFullScreen(ajaxZoom.path, ajaxZoom.parameter, ajaxZoom.opt, ajaxZoom.divID, false, false);
605	');
606	+ echo '</code></pre>';
607	?>
608




















609	<?php
610	/* This include is just for the demo, you can remove it */
611	include ('footer.php');

631	</div>
632	<div id="cropOpt_ratioBox" style="clear: both; margin: 5px 0px 5px 0px;">
633	<label>Aspect ratio:</label>
634	+ W: <input id="cropOpt_ratio1" type="text" value="1" autocomplete="off"
635	+ style="width: 50px" onchange="jQuery.aZcropEd.jCropAspectRatio()">
636	+ <input type="button" style="width: 30px;" value="⇔" autocomplete="off"
637	+ onclick="jQuery.aZcropEd.jCropAspectFlipValues()">
638	+ H: <input id="cropOpt_ratio2" type="text" value="1" autocomplete="off"
639	+ style="width: 50px" onchange="jQuery.aZcropEd.jCropAspectRatio()">
640	<div>
641	<label></label>
642	+ <input type="button" value="as thumb" autocomplete="off"
643	+ style="margin-top: 3px; width: 80px;" onclick="jQuery.aZcropEd.jCropAspectAsThumb()">
644	+ <input type="button" value="as image" autocomplete="off"
645	+ style="margin-top: 3px; width: 80px;" onclick="jQuery.aZcropEd.jCropAspectAsImage()">
646	</div>
647	</div>
648	<div id="cropOpt_sizeBox" style="clear: both; margin: 5px 0px 5px 0px; display: none;">
649	<label>Fixed size:</label>
650	+ W: <input id="cropOpt_sizeW" type="text" value="" autocomplete="off"
651	+ style="width: 50px" onchange="jQuery.aZcropEd.jCropFixedSize()">
652	+ H: <input id="cropOpt_sizeH" type="text" value="" autocomplete="off"
653	+ style="width: 50px" onchange="jQuery.aZcropEd.jCropFixedSize()"> px
654	</div>
655
656	<div class="legend">Thumbnail settings</div>
657
658	<div style="clear: both; margin: 5px 0px 5px 0px;">
659	<label>Thumbnail size:</label>
660	+ W: <input id="cropOpt_thumbSizeW" type="text"
661	+ value="<?php echo $default_thumb_size; ?>" autocomplete="off"
662	style="width: 50px" onchange="jQuery.aZcropEd.jCropInitSettings()">
663	+ H: <input id="cropOpt_thumbSizeH" type="text"
664	+ value="<?php echo $default_thumb_size; ?>" autocomplete="off"
665	style="width: 50px" onchange="jQuery.aZcropEd.jCropInitSettings()"> px
666	</div>
667

676
677	<div id="cropOpt_colorBox" style="clear: both; margin: 5px 0px 5px 0px; display: none;">
678	<label>Background color (hex):</label>
679	+ #<input id="cropOpt_backColor" type="text" value="FFFFFF" autocomplete="off"
680	+ style="width: 100px" onchange="jQuery.aZcropEd.jCropInitSettings()">
681	</div>
682	<div style="clear: both; margin: 5px 0px 5px 0px;">
683	<label>Jpeg quality:</label>
684	+ <input id="cropOpt_jpgQual" type="text" value="90" style="width: 40px" autocomplete="off"
685	+ onchange="jQuery.aZcropEd.jCropInitSettings()">
686	(10 - 100)
687	</div>
688	<div style="clear: both; margin: 5px 0px 5px 0px;">
689	<label>Cache (can be set later):</label>
690	+ <input id="cropOpt_cache" type="checkbox" value="1" autocomplete="off"
691	+ onchange="jQuery.aZcropEd.jCropInitSettings()">
692	</div>
693	</div>
694	</div>

695	</div>
696
697	<!-- Cropped images -->

715	if (!$axzm_cms_mode)
716	{
717	?>
718	+ <div class="azMsg">Drag & drop to reorder the thumbs,
719	+ click to get the paths and other information (see below),
720	double click to zoom.
721	</div>
722	<?php

725
726	<!-- Crop results real size -->
727	<div id="aZcR_cropResults"></div>
728	+ <input type="button" value="Reamove all crops" autocomplete="off"
729	+ style="margin-top: 5px" onclick="jQuery.aZcropEd.clearAll()" />
730	<?php
731	if (!$axzm_cms_mode)
732	{

737
738	<div style="clear: both; margin: 5px 0px 5px 0px;">
739	<label>Query string:</label>
740	+ <input id="aZcR_qString" type="text" onClick="this.select();" autocomplete="off"
741	+ style="margin-bottom: 5px; width: 100%" value="">
742	</div>
743
744	<div style="clear: both; margin: 5px 0px 5px 0px;">
745	<label>Url:</label>
746	(please note that full Url might differ if this editor is implemented in a backend of some CMS)
747	+ <input id="aZcR_url" type="text" onClick="this.select();" autocomplete="off"
748	+ style="margin-bottom: 5px; width: 100%" value="">
749	</div>
750
751	<div style="clear: both; margin: 5px 0px 5px 0px;">
752	<label>Cached image url:</label>
753	(only available if "cache" option is chacked under "crop settings" tab)
754	+ <input id="aZcR_contentLocation" type="text" onClick="this.select();" autocomplete="off"
755	+ style="margin-bottom: 5px; width: 100%" value="">
756	</div>
757	<?php
758	}

761
762	<!-- Description -->
763	<div id="aZcR_tabs-descr">
764	+ <div class="legend">Crop descriptions / settings</div>
765
766	<div class="azMsg">



767	<?php
768	if (!$axzm_cms_mode)
769	{

772	In this editor and also in the derived "clean" examples like
773	<a href="example35_clean.php">example35_clean.php</a>
774	we use "axZmEb" - expandable button (AJAX-ZOOM additional plugin) to display these titles \|\| descriptions
775	+ over the image respectively inside the player.
776	+ You could however easily change the usage of title \|\| description in your implementation,
777	e.g. display them under the player or whatever. Just change the "handleTexts" property of the options object
778	+ when passing it to jQuery.axZmImageCropLoad - see source code of e.g.
779	+ <a href="example35_clean.php">example35_clean.php</a>;<br><br>
780
781	Besides HTML or your text you could also load external content in iframe! The prefix for the source is "iframe:"<br><br>
782	+ e.g. to load an external page simply put something like this in the descripion:<br>
783	+ <code>iframe://www.canon.co.uk/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1100D</code>
784	<br><br>
785	To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>
786	+ <code>iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage</code>
787	<br><br>
788	To load some dynamic content over AJAX use "ajax:" as prefix, e.g.<br>
789	+ <code>ajax:/test/some_content_data.php?req=123</code>
790	<br><br>
791	If you do not define the title, then the content will be loaded instantly as soon as the spin animation finishes.
792

798	Optionally add a title and/or description.
799	Besides HTML or your text you could also load external content in iframe!
800	The prefix for the source is "iframe:"<br><br>
801	+ e.g. to load an external page simply put something like this in the descripion:<br>
802	iframe://www.canon.co.uk/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1100D
803	<br><br>
804	To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>

848	if (!$axzm_cms_mode)
849	{
850	?>
851	+ <input type="button" value="Get all" autocomplete="off" onclick="jQuery.aZcropEd.getAllThumbs()">
852
853	+ <select onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete="off">
854	<option value="qString">Query string</option>
855	<option value="url">Url</option>
856	<option value="contentLocation">Cached image url</option>
857	</select>
858
859	+ <select onchange="handleDisplayLongLine(this)" autocomplete="off">
860	<option value="JSON_data">JSON with data</option>
861	<option value="JSON">JSON</option>
862	<option value="CSV">CSV</option>
863	</select>
864
865	+ <span style="display: none;">separated with <input type="text" value="\|" style="width: 20px;" autocomplete="off"
866	+ onchange="jQuery.aZcropEd.getAllThumbs()"></span>
867	<br>and convert to be cached
868	+ <input type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs()" checked="true" autocomplete="off">
869	and replace thumb size
870	+ <input type="checkbox" value="1" onclick="jQuery(this).next().toggle(); jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
871	<span style="display: none">
872	+ W: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
873	+ H: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete="off"> px
874	</span>
875	<br>and convert px coordinates to percentage
876	+ <input type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
877	<?php
878	}
879	else

881	?>
882	<input type="button" value="Refresh" onclick="jQuery.aZcropEd.getAllThumbs()">
883
884	+ <select style="display: none;" onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete="off">
885	<option value="qString">Query string</option>
886	<option value="url">Url</option>
887	<option value="contentLocation">Cached image url</option>
888	</select>
889
890	+ <select style="display: none;" onchange="handleDisplayLongLine(this)" autocomplete="off">
891	<option value="JSON_data">JSON with data</option>
892	<option value="JSON">JSON</option>
893	<option value="CSV">CSV</option>

895
896	<span style="display: none;"> <input type="text" value="\|" style="width: 20px; display: none;"
897	onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete=off></span>
898	+ <input style="display: none;" type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs()" checked="true" autocomplete="off">
899	and replace thumb size
900	+ <input type="checkbox" value="1" onclick="jQuery(this).next().toggle(); jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
901	<span style="display: none">
902	+ W: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
903	+ H: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete="off"> px
904	</span>
905	+ <input style="display: none;" type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
906
907	<?php
908	}
909	?>
910	</div>
911
912	+ <form <?php echo !$axzm_cms_mode ? 'action="'.$axzm_path.'saveCropJSON.php"' : ''; ?> id="aZcR_saveJSON">
913	+ <textarea id="aZcR_getAllThumbs" style="width: 100%; height: 350px; font-size: 10px; margin-top: 5px;"
914	+ spellcheck="false" autocomplete="off"></textarea>
915	</form>

916	<?php
917	if ($axzm_cms_mode)
918	{
919	?>
920	+ <input type="button" value="Save into database" id="btnSaveJSON" autocomplete="off">
921	+ <input type="button" value="Remove line breaks" style="margin-top: 5px;" autocomplete="off"
922	onclick="jQuery('#aZcR_getAllThumbs').val(jQuery('#aZcR_getAllThumbs').val().replace(/(\r\n\|\n\|\r\|\t)/gm,''))">
923
924	<div id="dialog-saveJSON" title="JSON saved" style="display: none;">

952	{
953	?>
954	<!-- Just a button to select text in the textarea above, can be removed -->
955	+ <input type="button" value="Select text" style="margin-top: 5px;" autocomplete="off"
956	+ onclick="jQuery('#aZcR_getAllThumbs')[0].select()">
957	+ <input type="button" value="Remove line breaks" style="margin-top: 5px;" autocomplete="off"
958	onclick="jQuery('#aZcR_getAllThumbs').val(jQuery('#aZcR_getAllThumbs').val().replace(/(\r\n\|\n\|\r\|\t)/gm,''))">
959
960	<!-- Save -->

967	<div style="margin-top: 10px"><label>Create backup:</label><input type="checkbox" id="aZcR_jsBackUp" value="1" checked> -
968	creates backup of the current JSON file if present with a timestamp in file name</div>
969	<div style="margin-top: 10px"><label>Save JSON:</label>
970	+ <input style="width: 100px;" type="button" value="Save" autocomplete="off" onClick="jQuery.aZcropEd.saveJSONtoFile();">
971	+ to <input type="text" value="" id="aZcR_jsFileName" autocomplete="off">.json (a-zA-Z0-9-_)
972	</div>
973
974	<div style="margin-top: 10px"><label></label>

981	</div>
982
983	<div class="legend">Notes</div>
984	+ In your final frontend presentation you can compose url out of query string with js
985	+ <code>jQuery.fn.axZm.installPath()+'zoomLoad.php?'+queryString</code>



986	<?php
987	}
988	?>

1002	</div>
1003
1004	<div style="clear: both; margin: 5px 0px 5px 0px;">
1005	+ <label>1. Path for 2D:</label> <input type="text" value=""
1006	+ id="aZcR_pathToLoad2D" style="width: 400px;" autocomplete="off"> or
1007	</div>
1008
1009	<div style="clear: both; margin: 5px 0px 5px 0px;">
1010	+ <label>2. Path for 360 or 3D:</label> <input type="text" value=""
1011	+ id="aZcR_pathToLoad360" style="width: 400px;" autocomplete="off">
1012	</div>
1013
1014	<div style="clear: both; margin: 15px 0px 5px 0px;">
1015	+ <label>3. Hotspot file path:</label> <input type="text" value=""
1016	+ id="aZcR_hotspotFileToLoad" style="width: 350px;" autocomplete="off"> (optional)
1017	</div>
1018
1019	<div style="clear: both; margin: 5px 0px 5px 0px;">
1020	+ <label>4. Crop file path:</label> <input type="text" value=""
1021	+ id="aZcR_cropFileToLoad" style="width: 350px;" autocomplete="off"> (optional)
1022	</div>
1023
1024	<div style="clear: both; margin: 5px 0px 5px 0px;">
1025	+ <input type="button" value="LOAD" onClick="jQuery.aZcropEd.changeAxZmContentPHP();" autocomplete="off">
1026	+ <input type="button" value="GET" onClick="jQuery.aZcropEd.getLoadedParameters();" autocomplete="off">
1027	</div>
1028
1029	<div id="aZcR_pathToParameter"></div>
1030
1031	<div class="legend">How does it work:</div>

1032	<div style="clear: both; margin: 5px 0px 5px 0px;">
1033	<ol>
1034	<li>
1035	+ <strong>For 2D</strong> (single image or gallery with more images)
1036	+ please enter local path(s) to the image(s), e.g. <br>
1037	+ "<code>/pic/zoom/animals/test_animals1.png</code>"<br>
1038	+ or image set with image paths separated with vertical dash e.g.<br>
1039	+ "<code>/pic/zoom/animals/test_animals1.png\|/pic/zoom/animals/test_animals2.png</code>"<br>
1040	+ If you want to load all images from a folder please just enter the path to this folder e.g. <br>
1041	+ "<code>/pic/zoom/animals</code>"



1042	</li>
1043	<li style="margin-top: 10px;">
1044	<ul>

1056	</ul>
1057	</li>
1058	<li style="margin-top: 10px;">
1059	+ <strong>Hotspot file path</strong> is the path to the file with hotspot configurations and positions, e.g.<br>
1060	+ "<code>../pic/hotspotJS/eos_1100D.js</code>"<br>
1061	+ You can create such a file in <a href="example33.php">example33.php</a>




1062	</li>

1063	<li style="margin-top: 10px;">
1064	+ <strong>Crop file path</strong> is the path to the file with crop data which can be created with this editor, e.g.<br>
1065	+ "<code>../pic/hotspotJS/eos_1100d.json</code>"<br>





1066	</li>
1067	</ol>
1068	</div>
1069
1070	<div class="legend">Load only JSON data from file into editor</div>
1071	+ <div style="margin-top: 10px">
1072	+ <label>Crop JSON file path:</label>
1073	+ <input type="text" value="" id="aZcR_onlyJSONcropFile" style="width: 350px;" autocomplete="off">
1074	+ </div>
1075	+ <label></label>e.g.: "<code>../pic/cropJSON/eos_1100d.json</code>"
1076	+ <div style="margin-top: 10px">
1077	+ <label></label>
1078	+ <input type="button" value="Load" autocomplete="off"
1079	+ onclick="jQuery.aZcropEd.getJSONdataFromFile(jQuery('#aZcR_onlyJSONcropFile').val())">
1080	+ </div>
1081
1082	</div>
1083

1100	// First json to load
1101	onLoad: function(){ // onSpinPreloadEnd
1102	jQuery.aZcropEd.getJSONdataFromFile('<?php echo $first_load_crop_json;?>');
1103	+ <?php
1104	+ if (isset($first_load_hotspot_json) && $first_load_hotspot_json)
1105	+ {
1106	+ ?>
1107	+ setTimeout(function(){
1108	+ jQuery.fn.axZm.loadHotspotsFromJsFile('<?php echo $first_load_hotspot_json; ?>', false, function(){
1109	+
1110	+ });
1111	+ }, 1000);
1112	+ <?php
1113	+ }
1114	+ ?>
1115	},
1116
1117	onCropEnd: function(){

1125	}
1126	},
1127
1128	+ onBeforeStart: function(){
1129	// Set background color, can also be done in css file
1130	jQuery('.axZm_zoomContainer').css({backgroundColor: '#FFFFFF'});
1131

1264	};
1265
1266	// Define the path to the axZm folder, adjust the path if needed!
1267	+ ajaxZoom.path = "<?php echo $axzm_path;?>";
1268
1269	// Define your custom parameter query string
1270	// example=spinIpad has many presets for 360 images

1350	});
1351
1352	</script>
1353	+ <?php
1354	+ if (!$axzm_tpl_mode)
1355	+ {
1356	+ ?>
1357	</body>
1358	+ </html>
1359	+ <?php
1360	+ }
1361	+ ?>

js/axzoom/preview/hotspoteditor.php ADDED Viewed

	@@ -0,0 +1,3604 @@


1	+ <?php
2	+ /**
3	+ * Module: jQuery AJAX-ZOOM for Magento, /js/axzoom/preview/hotspoteditor.php
4	+ * Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	+ * License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	+ * URL: http://www.ajax-zoom.com
10	+ * Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	+ *
12	+ * @author AJAX-ZOOM <support@ajax-zoom.com>
13	+ * @copyright 2010-2016 AJAX-ZOOM, Vadim Jacobi
14	+ * @license http://www.ajax-zoom.com/index.php?cid=download
15	+ */
16	+
17	+ require_once('../../../app/Mage.php');
18	+ umask(0);
19	+ Mage::app();
20	+
21	+ /* This is not full protection and is not ment to be full protection */
22	+ $sess = false;
23	+ $sess_id = isset($_COOKIE['adminhtml']) ? $_COOKIE['adminhtml'] : false;
24	+
25	+ if ($sess_id){
26	+ $sess = Mage::getSingleton('core/resource_session')->read($sess_id);
27	+ }
28	+
29	+ if (!($sess && stristr($sess, 'Mage_Admin_Model_User'))){
30	+ echo 'Oops. Something went wrong. If you are the admin of this website and you are logged in, please contact AJAX-ZOOM support.';
31	+ exit;
32	+ }
33	+
34	+ $editor_version = '3.0.1';
35	+ $last_updated = '2016-08-05';
36	+
37	+ /* List of "default" images for hotspots */
38	+ $hotspot_images = json_encode(array(
39	+ 'hotspot64_transparent.png',
40	+ 'hotspot64_red.png',
41	+ 'hotspot64_green.png',
42	+ 'hotspot64_blue.png',
43	+ 'hotspot64_yellow.png',
44	+ 'hotspot64_ring_red.png',
45	+ 'hotspot64_ring_green.png',
46	+ 'hotspot64_ring_blue.png',
47	+ 'hotspot64_ring_yellow.png',
48	+ 'hotspot64_map_red.png',
49	+ 'hotspot64_map_green.png',
50	+ 'hotspot64_map_blue.png',
51	+ 'hotspot64_map_yellow.png',
52	+ 'hotspot64_map_orange.png',
53	+ 'hotspot64_flat_red.png',
54	+ 'hotspot64_flat_green.png',
55	+ 'hotspot64_flat_blue.png',
56	+ 'hotspot64_flat_yellow.png',
57	+ 'hotspot64_flat_orange.png',
58	+ 'hotspot64_flat1_red.png',
59	+ 'hotspot64_flat1_green.png',
60	+ 'hotspot64_flat1_blue.png',
61	+ 'hotspot64_flat1_yellow.png',
62	+ 'hotspot64_flat1_orange.png',
63	+ 'hotspot64_flat2_red.png',
64	+ 'hotspot64_flat2_green.png',
65	+ 'hotspot64_flat2_blue.png',
66	+ 'hotspot64_flat2_yellow.png',
67	+ 'hotspot64_flat2_orange.png',
68	+ 'hotspot64_flag_red.png'
69	+ ));
70	+
71	+ /* List of "default" CSS classes for hotspots */
72	+ $hotspot_classes = json_encode(array(
73	+ 'axZm_cssHotspot',
74	+ 'axZm_cssHotspot_red',
75	+ 'axZm_cssHotspot_orange',
76	+ 'axZm_cssHotspot_blue',
77	+ 'axZm_cssHotspot_green',
78	+ 'axZm_cssHotspot1',
79	+ 'axZm_cssHotspot1_red',
80	+ 'axZm_cssHotspot1_orange',
81	+ 'axZm_cssHotspot1_blue',
82	+ 'axZm_cssHotspot1_green'
83	+ ));
84	+
85	+ /* List with additional CSS files */
86	+ $css_file_src = array();
87	+
88	+ /* List with additional JS files */
89	+ $js_file_src = array();
90	+
91	+ /* Set to true to remove certain things not needed if included in shops / cms */
92	+ $axzm_cms_mode = true;
93	+ $axzm_tpl_mode = false;
94	+ $axzm_path = '../axZm/';
95	+ $first_load_par = Mage::app()->getRequest()->getParam('3dDir');
96	+ $player_responsive = $axzm_cms_mode ? true : false;
97	+ $langugaes_array = array();
98	+
99	+ $store_collection = Mage::getModel('core/store')->getCollection();
100	+ foreach($store_collection as $store){
101	+ $storelang = Mage::getStoreConfig('general/locale/code', $store->getId());
102	+ array_push($langugaes_array, substr($storelang, 0, 2));
103	+ }
104	+
105	+ $langugaes_array = array_unique($langugaes_array);
106	+ $langugaes_array = json_encode($langugaes_array);
107	+
108	+ /* If used with a CMS / Shop, the dynamically generated url for controller */
109	+ $id_360 = Mage::app()->getRequest()->getParam('group');
110	+ $id_360set = Mage::app()->getRequest()->getParam('id');
111	+
112	+ $first_load_hotspot_json = Mage::app()->getRequest()->getParam('url_get')."?id_360set=$id_360set&id_360=$id_360";
113	+ $save_hotspot_json = Mage::app()->getRequest()->getParam('url_set')."?id_360set=$id_360set&id_360=$id_360&form_key=".Mage::app()->getRequest()->getParam('form_key');
114	+ ?>
115	+
116	+ <?php
117	+ if (!$axzm_tpl_mode)
118	+ {
119	+ ?>
120	+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
121	+ <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">
122	+ <html>
123	+ <head>
124	+ <title>Online hotspot editor 3D/360 and 2D zoom player</title>
125	+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
126	+ <meta http-equiv="imagetoolbar" content="no">
127	+ <?php
128	+ if (!$axzm_cms_mode)
129	+ {
130	+ ?>
131	+ <meta property="og:type" content="article"/>
132	+ <meta property="og:title" content="Online hotspot editor 3D/360 and 2D zoom player"/>
133	+ <meta property="og:description" content="Flash free online hotspot editor for AJAX-ZOOM 3D/360/2D player, useful to define positions of hotspots at each frame (360 or 3D)"/>
134	+ <meta name="description" content="Flash free online hotspot editor for AJAX-ZOOM 3D/360/2D player, useful to define positions of hotspots at each frame (360 or 3D)" />
135	+ <meta property="og:image" content="http://www.ajax-zoom.com/pic/layout/image-zoom_33.jpg"/>
136	+ <?php
137	+ }
138	+ if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone'))
139	+ echo '<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">';
140	+ else
141	+ echo '<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">';
142	+ }
143	+ ?>
144	+
145	+ <!-- jQuery core, needed! -->
146	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery-1.8.3.min.js"></script>
147	+
148	+ <!-- AJAX-ZOOM core -->
149	+ <link name="az_editor_css_scripts" href="<?php echo $axzm_path;?>axZm.css" type="text/css" rel="stylesheet" />
150	+ <script type="text/javascript" src="<?php echo $axzm_path;?>jquery.axZm.js"></script>
151	+
152	+ <!-- Only needed for the online configurator -->
153	+ <link name="az_editor_css_scripts" href="<?php echo $axzm_path;?>extensions/jquery.axZm.hotspotEditor.css" type="text/css" rel="stylesheet" />
154	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/JSON/jquery.json-2.3.min.js"></script>
155	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery.scrollTo.min.js"></script>
156	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/js-beautify/beautify-all.min.js"></script>
157	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/jquery.axZm.hotspotEditor.js"></script>
158	+
159	+ <!-- Because of ui tabs placed here, only needed for the online configurator ! -->
160	+ <link name="az_editor_css_scripts" href="<?php echo $axzm_path;?>plugins/jquery.ui/themes/ajax-zoom/jquery-ui.css" type="text/css" rel="stylesheet" />
161	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery.ui/js/jquery-ui-1.8.24.custom.min.js"></script>
162	+
163	+ <!-- Spectrum colorpicker, only needed for the online configurator -->
164	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>plugins/spectrum/spectrum.css">
165	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/spectrum/spectrum.min.js"></script>
166	+
167	+ <!-- A small function to add different type of description, not necessarily needed -->
168	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>extensions/jquery.axZm.expButton.css">
169	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/jquery.axZm.expButton.min.js"></script>
170	+
171	+ <!-- Only needed for the click example with fancybox -->
172	+ <link name="az_editor_css_scripts" href="<?php echo $axzm_path;?>plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.zIndex.css" type="text/css" rel="stylesheet">
173	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.pack.js"></script>
174	+
175	+ <!-- AJAX-ZOOM extension to load AJAX-ZOOM into maximized fancybox as iframe from "toolTipHtml" field,
176	+ requires jquery.fancybox-1.3.4.css and jquery.fancybox-1.3.4.js, optional -->
177	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/jquery.axZm.openAjaxZoomInFancyBox.js"></script>
178	+
179	+ <!-- CLEditor - WYSIWYG Editor (external jQuery plugin) -->
180	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.css" />
181	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.min.js"></script>
182	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.table.min.js"></script>
183	+
184	+ <?php
185	+ if (is_array($css_file_src) && !empty($css_file_src)){
186	+ foreach($css_file_src as $file){
187	+ echo '<link href="'.$file.'" type="text/css" rel="stylesheet"> ';
188	+ }
189	+ }
190	+ if (is_array($js_file_src) && !empty($js_file_src)){
191	+ foreach($js_file_src as $file){
192	+ echo '<script type="text/javascript" src="'.$file.'"></script> ';
193	+ }
194	+ }
195	+ ?>
196	+
197	+ <style name="az_editor_css_scripts" type="text/css" id="hs_docu_style">
198	+ .optionsTable {width: 100%; border-spacing: 0; border: 1px solid #AAAAAA;
199	+ font-family: Tahoma, Geneva, sans-serif; font-size: 10pt;}
200	+ .optionsTable th {background-color: #D4D4D4; padding-top: 10px; padding-bottom: 10px;
201	+ font-size:12pt; font-family: "Comic Sans MS", cursive, sans-serif;}
202	+ .optionsTable td, .optionsTable th{padding-left: 5px; padding-right: 5px;}
203	+ .optionsTable th{white-space: nowrap;}
204	+ .optionsTable td,
205	+ .optionsTable th {vertical-align: top; line-height: 1.2em; text-align: left;
206	+ border-bottom: 1px solid #AAAAAA; padding-top: 3px; padding-bottom: 8px;}
207	+ .optionsTable .subOpt td {border-bottom-width: 0; font-size: 12pt;}
208	+ .optionsTable tr.important {font-weight: bolder;}
209	+ .optionsTable td:nth-child(1) {border-right: #AAA 1px dotted;}
210	+ .optionsTable td:nth-child(2) {border-right: #AAA 1px dotted;}
211	+ .optionsTable ul, .optionsTable ol {padding-left: 14px; margin: 0 0 0 20px;}
212	+ .optionsTable ul {list-style-type: square;}
213	+ .optionsTable li {margin-bottom: 5px; padding-left: 14px; line-height: 0.85em;}
214	+ .optionsTable tr:nth-child(odd) { background-color: #FDFDFD;}
215	+ .optionsTable tr:nth-child(even) { background-color: #FFFFFF;}
216	+ .optionsTable tr:last-child>td { border-bottom: none;}
217	+ .optionsTable.sub th {padding-top: 3px; padding-bottom: 3px; font-size: 11pt;}
218	+ .optionsTable.sub td {line-height: 1em; padding-bottom: 2px; padding-top: 2px;}
219	+ .optionsTable pre {padding: 0 0 0 20px; margin: 5px 0px 5px 0px; tab-size: 4; -moz-tab-size: 4; line-height: 0.85em;}
220	+ .optionsTable code {font-size: 9pt; font-family: monospace;}
221	+ .optionsTable .mono {font-family: monospace;}
222	+ .optionsSimilarExDescr {position: absolute; background-color: #eee; font-size: 9px; width: 100%;
223	+ pointer-events: none; text-align: center; overflow: hidden;}
224	+ .optionsSimilarExLI {float: left; margin: 0 10px 10px 0; position: relative; border: #aaa 1px solid;}
225	+ .optionsHeader {color: #1a4a7a; font-size: 150%; margin: 0; padding: 20px 0px 5px 0px;}
226	+ .optionsText {}
227	+ </style>
228	+
229	+ <?php
230	+ if (!$axzm_cms_mode)
231	+ {
232	+ ?>
233	+ <!-- Javascript to style the syntax, not needed! -->
234	+ <link name="az_editor_css_scripts" rel="stylesheet" href="<?php echo $axzm_path;?>plugins/demo/prism/prism.css" type="text/css" media="screen">
235	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/demo/prism/prism.min.js"></script>
236	+
237	+ <?php
238	+ }
239	+ ?>
240	+
241	+ <script type="text/javascript">
242	+ <?php
243	+ echo 'jQuery.aZhSpotEd.langugaesArray = '.$langugaes_array.'; ';
244	+ echo 'jQuery.aZhSpotEd.playerResponsive = '.($player_responsive ? 'true' : 'false').'; ';
245	+ echo 'jQuery.aZhSpotEd.langVal = {}; ';
246	+ echo 'jQuery.aZhSpotEd.axZmPath = "'.$axzm_path.'"; ';
247	+ echo 'jQuery.aZhSpotEd.highLight = true; ';
248	+ echo 'jQuery.aZhSpotEd.drgbl = true; ';
249	+ echo 'jQuery.aZhSpotEd.hotspotImages = '.$hotspot_images.'; ';
250	+ echo 'jQuery.aZhSpotEd.hotspotClasses = '.$hotspot_classes.'; ';
251	+
252	+ if ($axzm_cms_mode)
253	+ echo 'jQuery.aZhSpotEd.errors = false;';
254	+ ?>
255	+ </script>
256	+
257	+ <?php
258	+ if (!$axzm_tpl_mode)
259	+ {
260	+ ?>
261	+
262	+ </head>
263	+ <body>
264	+
265	+ <?php
266	+ if (!$axzm_cms_mode)
267	+ include ('navi.php');
268	+
269	+ }
270	+ else
271	+ {
272	+ ?>
273	+ <script type="text/javascript">
274	+ // Move css to head if template mode
275	+ jQuery('*[name=az_editor_css_scripts]').appendTo('head');
276	+ </script>
277	+ <?php
278	+ }
279	+ ?>
280	+
281	+ <div id="outerWrap" style="width: 722px; margin: 0 auto;">
282	+ <div id="playerWrap" style="width: 722px;">
283	+ <?php
284	+ if (!$axzm_cms_mode)
285	+ {
286	+ ?>
287	+ <h2>Create interactive 2D/ 360°/ 3D product presentations / product catalogues
288	+ with clickable hotspots and hotspot areas using high or ultra resolution images!
289	+ </h2>
290	+ <?php
291	+ }
292	+ else
293	+ {
294	+ ?>
295	+ <div style="height: 35px;"></div>
296	+ <?php
297	+ }
298	+ ?>
299	+ <div id="playerInnerWrap" style="min-height: 538px;">
300	+ <div id="abc" style="width: 720px;<?php echo $player_responsive ? 'height: 720px' : ''; ?>">
301	+ <!-- Content inside target will be removed -->
302	+ <div style="padding: 20px">Loading, please wait...</div>
303	+ </div>
304	+ <div id='testCustomNavi' class="ui-widget-header" style="width: 720px;"></div>
305	+ </div>
306	+ <div id="marginAfter" style="display: none; margin-bottom: 100px;"></div>
307	+ </div>
308	+
309	+ <div id="aZhS_tabs" style="margin-top: 20px; margin-bottom: 20px;">
310	+ <ul>
311	+ <li><a href="#aZhS_tabs-8">About</a></li>
312	+ <li><a href="#aZhS_tabs-1">Hotspots</a></li>
313	+ <li><a href="#aZhS_tabs-2">Tooltips / Text</a></li>
314	+ <li><a href="#aZhS_tabs-5">Save / Edit JSON</a></li>
315	+ <?php
316	+ if (!$axzm_cms_mode)
317	+ echo '<li><a href="#aZhS_tabs-6">Load content</a></li>';
318	+ ?>
319	+ </ul>
320	+
321	+ <div id="aZhS_tabs-8">
322	+
323	+ <div id="aZhS_about" class="hs_subtab">
324	+ <ul>
325	+ <li><a href="#aZhS_about-1">Introduction</a></li>
326	+ <?php
327	+ if (!$axzm_cms_mode)
328	+ echo '<li><a href="#aZhS_about-2">Code example</a></li>';
329	+ ?>
330	+ <li><a href="#aZhS_about-3" onclick="jQuery('#docuTable tr').css('backgroundColor', '');">Options / Docu</a></li>
331	+ </ul>
332	+
333	+ <div id="aZhS_about-1" class="hs_subtab">
334	+ <?php
335	+ if ($axzm_cms_mode)
336	+ {
337	+ ?>
338	+ <div class="legend" style="line-height: 60%;">How to use hotspot editor <br>
339	+ <span style="font-size: 50%">[Editor version: <?php echo $editor_version; ?>,
340	+ date: <?php echo $last_updated; ?>]</span>
341	+ </div>
342	+ <ol style="margin: 0;">
343	+ <li style="margin-top: 10px">
344	+ Read this text below at least once, please!
345	+ </li>
346	+ <li style="margin-top: 10px">
347	+ Hit the
348	+ <a href="javascript: void(0)" class="linkShowTab"
349	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-1'); jQuery('#aZhS_hotspots').tabs('select','#aZhS_hotspots-1');">
350	+ Hotspots -> New Hotspot
351	+ </a> tab or
352	+ <img src="<?php echo $axzm_path;?>icons/default/button_iPad_tag.png" width="25" style="vertical-align: middle; margin: 2px;">
353	+ button, define a new hotspots name and push "ADD NEW HOTSPOT" button.
354	+ </li>
355	+ <li style="margin-top: 10px">
356	+ Adjust the hotspot position(s) by simply dragging it to the desired place.
357	+ For 360 we found it more convenient to use arrow keys to spin while adjusting the positions
358	+ (mouse pointer has to be over the player).
359	+ For precise positioning enlarge to the max zoom level!
360	+ For moving by one pixel in any direction you can also use numbers block on your keyboard.
361	+ You might also find it easier to roughly set the positions in
362	+ <a href="javascript: void(0)" class="linkShowTab"
363	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-1'); jQuery('#aZhS_hotspots').tabs('select','#aZhS_hotspots-3');">
364	+ Hotspots -> Positions
365	+ </a> tab before actually doing this precisely with zoom in the player.
366	+ </li>
367	+ <li>
368	+ In order to disable the hotspot at a particular frame you can right click on it. You can also hit the
369	+ <img src="<?php echo $axzm_path;?>icons/default/button_iPad_hsp.png" width="25" style="vertical-align: middle; margin: 2px;">
370	+ button to toggle enabling / disabling of the hotspot at current frame.
371	+ Same can be achieved by pressing "Insert" / "Delete" buttons on your keyboard, provided that the mouse pointer is over the player.
372	+ </li>
373	+ <li style="margin-top: 10px">
374	+ You can change the appearance of your hotspot under
375	+ <a href="javascript: void(0)" class="linkShowTab"
376	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-1'); jQuery('#aZhS_hotspots').tabs('select','#aZhS_hotspots-2');">
377	+ Hotspots -> Hotspot Appearance</a>
378	+ tab now or later. All the settings applied there e.g.
379	+ defining a different hotspot image and it's size can be defined for all hotspots at once.
380	+ </li>
381	+ <li style="margin-top: 10px">
382	+ Define what happens when the user clicks on / goes with mouse over a particular hotspot. Select the
383	+ <a href="javascript: void(0)" class="linkShowTab"
384	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-2');">
385	+ Tooltips / Text</a>
386	+ tab and choose the hotspot you want to edit.
387	+ </li>
388	+ <li style="margin-top: 10px">
389	+ Under the <a href="javascript: void(0)" class="linkShowTab"
390	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-2'); jQuery('#aZhS_tooltip').tabs('select','#aZhS_tooltip-1');">
391	+ Tooltips</a>
392	+ tab you can define most commonly used options to mark a hotspot:
393	+ <ul style="margin-top: 10px;">
394	+ <li>Alt title: appears when the user hovers a hotspot with the mouse</li>
395	+ <li>Sticky label: is similar to "alt title" but it is always visible</li>
396	+ <li>Draft label: a responsive positioned label connected with a line to the hotspot</li>
397	+ </ul>
398	+ </li>
399	+ <li style="margin-top: 10px">
400	+ Under the <a href="javascript: void(0)" class="linkShowTab"
401	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-2'); jQuery('#aZhS_tooltip').tabs('select','#aZhS_tooltip-4');">
402	+ Popup boxes</a>
403	+ tab you can add more text which appears on click / mouseover in:
404	+ <ul style="margin-top: 10px;">
405	+ <li>Default popup: a virtual window similar to Fancybox (it is not Fancybox)</li>
406	+ <li>Expandable: an alternative virtual window type</li>
407	+ </ul>
408	+
409	+ </li>
410	+ <li style="margin-top: 10px">
411	+ Farther more, under the <a href="javascript: void(0)" class="linkShowTab"
412	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-2'); jQuery('#aZhS_tooltip').tabs('select','#aZhS_tooltip-3');">
413	+ Link / Events</a>
414	+ tab, you can assign a link (like href) or assign any JavaScript
415	+ to click, mouseover etc. events to create something special.
416	+ An example for click event to open a fancybox is provided.
417	+ </li>
418	+ <li style="margin-top: 10px">
419	+ Under
420	+ <a href="javascript: void(0)" class="linkShowTab"
421	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-5');">
422	+ Save / Edit JSON</a>
423	+ you will see the code which was produced by this editor.
424	+ If you understand the structure you could also edit it manually in the textarea
425	+ (press "Apply" button to test if it works).
426	+ Finally press the "Save into database" button; you should get a confirmation.
427	+ </li>
428	+ </ol>
429	+
430	+ <?php
431	+ }
432	+ ?>
433	+ <?php
434	+ if (!$axzm_cms_mode)
435	+ {
436	+ ?>
437	+ <div class="legend" style="line-height: 60%;">About AJAX-ZOOM hotspot editor <br>
438	+ <span style="font-size: 50%">[Editor version: <?php echo $editor_version; ?>,
439	+ date: <?php echo $last_updated; ?>]</span>
440	+ </div>
441	+ <p>Flash free online hotspot editor for AJAX-ZOOM 3D/360/2D player.
442	+ With the help of this editor you can create multiple hotspots
443	+ or rectangle image areas and setup several click / mouseover actions for them
444	+ e.g. links, tooltips, popup lightboxes or bind your own JavaScript functions
445	+ including AJAX-ZOOM API for several events.
446	+ The default example is a 360 degrees image set. You can however
447	+ <a href="javascript: void(0)" class="linkShowTab"
448	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-6');">
449	+ load any other images</a>
450	+ like catalogue pages or photo albums
451	+ and create hotspots on single (2D) images as well.
452	+ </p>
453	+ <p>As a result the hotspot editor returns a
454	+ <a href="javascript: void(0)" class="linkShowTab"
455	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-5');">
456	+ JSON object</a>
457	+
458	+ with all settings including the positions of the hotspots and / or rectangle image areas.
459	+ Among other considerable possibilities this JSON object can be
460	+ <a href="javascript: void(0)" class="linkShowTab"
461	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-5'); jQuery('#aZhS_save').tabs('select','#aZhS_save-2');">
462	+ saved to a JavaScript file</a>
463	+ and loaded into any other AJAX-ZOOM example later.
464	+ </p>
465	+
466	+ <div class="legend">How does it work?</div>
467	+ <ol style="margin: 0;">
468	+ <li>
469	+ Hit the <a href="javascript: void(0)" class="linkShowTab" onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-6');">
470	+ Load content</a>
471	+ tab and follow the instructions in order to change the image(s) you would like to configure with hotspots.
472	+ For testing just leave whatever is loaded on default.
473	+ </li>
474	+ <li style="margin-top: 10px">
475	+ Hit the
476	+ <a href="javascript: void(0)" class="linkShowTab"
477	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-1'); jQuery('#aZhS_hotspots').tabs('select','#aZhS_hotspots-1');">
478	+ Hotspots -> New Hotspot</a>
479	+ tab and define a new hotspots name. Push "ADD NEW HOTSPOT" button.
480	+ </li>
481	+ <li style="margin-top: 10px">
482	+ Adjust the hotspot position(s) by simply dragging it to the desired place.
483	+ For 360 we found it more convenient to use arrow keys to spin while adjusting the positions
484	+ (mouse pointer has to be over the player).
485	+ For precise positioning enlarge to the max zoom level!
486	+ For moving by one pixel in any direction you can also use numbers block on your keyboard.
487	+ You might also find it easier to roughly set the positions in
488	+ <a href="javascript: void(0)" class="linkShowTab"
489	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-1'); jQuery('#aZhS_hotspots').tabs('select','#aZhS_hotspots-3');">
490	+ Hotspots -> Positions</a>
491	+ tab before actually doing this precisely with zoom in the player.
492	+ </li>
493	+ <li style="margin-top: 10px">
494	+ You can change the appearance of your hotspot under
495	+ <a href="javascript: void(0)" class="linkShowTab"
496	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-1'); jQuery('#aZhS_hotspots').tabs('select','#aZhS_hotspots-2');">
497	+ Hotspots -> Hotspot Appearance</a>
498	+ tab now or later. All the settings applied there e.g.
499	+ defining a different hotspot image and it's size can be taken over for all hotspots at once.
500	+ </li>
501	+ <li style="margin-top: 10px">Define what happens when the user clicks on / goes with mouse over a particular hotspot.
502	+ Hit the
503	+ <a href="javascript: void(0)" class="linkShowTab" onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-2');">
504	+ Tooltips / Text</a>
505	+ tab and select the hotspot, it turns red.
506	+ Under the <a href="javascript: void(0)" class="linkShowTab"
507	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-2'); jQuery('#aZhS_tooltip').tabs('select','#aZhS_tabs-1');">
508	+ Tooltips</a>
509	+ tab you can define most commonly used options for default tooltip which looks similar to Fancybox (it is not Fancybox).
510	+ If you do not like the appearance you can always modify its CSS (.axZmToolTipInner, .axZmToolTipOuter, .axZmToolTipTitle) or
511	+ just set a different class (toolTipTitleCustomClass and toolTipCustomClass options).
512	+ As an idea - the content of the tooltip can be iFrame with any other different content in it.
513	+ If nothing helps - you want something completely different, you can define event actions on your own.
514	+ They are saved as strings in the JSON object and will be instantly evaled when loaded.
515	+ </li>
516	+ <li style="margin-top: 10px">
517	+ Fine-tuning: possibly there are additional options which might not be "visualized" in this hotspot editor release.
518	+ Under
519	+ <a href="javascript: void(0)" class="linkShowTab"
520	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-5'); jQuery('#aZhS_save').tabs('select','#aZhS_save-1');">
521	+ Save / Edit JSON -> Import / Edit</a>
522	+ you will see the complete JSON object.
523	+ Any option (property, value) can be customized for each hotspot individually.
524	+ For a complete description of the options see under <a href="javascript: void(0)" class="linkShowTab"
525	+ onclick="jQuery('#aZhS_about').tabs('select','#aZhS_about-3');">
526	+ Option / Docu</a>
527	+ tab.
528	+ </li>
529	+ <li style="margin-top: 10px">
530	+ After you have created, positioned and configured your hotspots the
531	+ JSON should be saved somewhere to be accessed later by the player.
532	+ This can be done under <a href="javascript: void(0)" class="linkShowTab"
533	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-5'); jQuery('#aZhS_save').tabs('select','#aZhS_save-2');">
534	+ Save / Edit JSON -> Save JSON to JavaScript file</a>
535	+ tab.
536	+ Since AJAX-ZOOM does not utilize any DB we provide only saving to JavaScript file as generic way of saving the work.
537	+ The file is written into '/pic/hotspotJS/' directory (which has to be writeable by PHP);
538	+ you can change the path to any other directory by editing '/axZm/saveHotspotJS.php';
539	+ The password for saving is set inside saveHotspotJS.php as well.
540	+ </li>
541	+ <li style="margin-top: 10px">
542	+ The saved JS file is then called over an AJAX-ZOOM callback when the player is loaded...
543	+ <code>jQuery.fn.axZm.loadHotspotsFromJsFile('../pic/hotspotJS/eos_1100D.js'); </code>
544	+ If you will use a database you can just change the first few lines in this file
545	+ to load and POST the JSON. All variables are explained inline.
546	+ You can even parse this file as a template... There is no need to change
547	+ anything in this file except the upper part with few variables in order to
548	+ implement it in any CMS.
549	+ </li>
550	+ </ol>
551	+
552	+ <div class="legend">"Clean" examples</div>
553	+ <p>This file (example33.php) is the actual hotspots editor. With the help of this editor you can define and edit the hotspots.
554	+ It is supposed to be in some restricted area of your page. For showing the results and
555	+ integration of the player into your frontend please use one of the following "clean" examples as the starting point.
556	+ Also please be aware of that AJAX-ZOOM is highly configurable so you can change the look and feel of nearly everything
557	+ you could think of.
558	+ </p>
559	+
560	+ <div class="azExample clearfix">
561	+ <a href="example33_clean.php">
562	+ <img src="http://www.ajax-zoom.com/pic/layout/image-zoom_33_clean.jpg" width="100"
563	+ align="left" class="azExampleImg">
564	+ </a>
565	+ <a href="example33_clean.php">example33_clean.php</a> basically it has the same setup as this editor but without the toolbar under the player.
566	+ </div>
567	+
568	+ <div class="azExample clearfix">
569	+ <a href="example33_responsive.php">
570	+ <img src="http://www.ajax-zoom.com/pic/layout/image-zoom_33_responsive.jpg" width="100"
571	+ align="left" class="azExampleImg">
572	+ </a>
573	+ For responsive integrations please use <a href="example33_responsive.php">example33_responsive.php</a>
574	+ </div>
575	+
576	+ <div class="azExample clearfix">
577	+ <a href="example33_fullscreen.php">
578	+ <img src="http://www.ajax-zoom.com/pic/layout/image-zoom_33_fullscreen.jpg" width="100"
579	+ align="left" class="azExampleImg">
580	+ </a>
581	+ Fullscreen <a href="example33_responsive.php">example33_fullscreen.php</a>
582	+ </div>
583	+
584	+ <div class="azExample clearfix">
585	+ <a href="example29.php">
586	+ <img src="http://www.ajax-zoom.com/pic/layout/image-zoom_29.jpg" width="100"
587	+ align="left" class="azExampleImg">
588	+ </a>
589	+ Gallery with mixed content - still images, videos from diverse sources like
590	+ Youtube/Vimeo/Dailymotion, documents and 360/3D with or without hotspots.
591	+ </div>
592	+
593	+ <div class="legend">Alternatives</div>
594	+
595	+ <div class="azExample clearfix">
596	+ <a href="example35.php">
597	+ <img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35.jpg" width="100"
598	+ align="left" class="azExampleImg">
599	+ </a>
600	+ Sometimes you would want not to put visible hotspots on a spin but only spin to a certain frame and zoom to the area you want to show.
601	+ In this case we suggest you to take a look at example35.php which is also the main editor for this; there you will find links to
602	+ "clean" and responsive implementations.
603	+ With this tool you can easily create several crops / thumbnails from 2D images / galleries,
604	+ 360 spins or 3D multirow which are loaded into AJAX-ZOOM player.
605	+ </div>
606	+
607	+ <div class="legend">E-Commerce</div>
608	+ <div class="azExample clearfix">
609	+ <a href="example32_responsive.php">
610	+ <img src="http://www.ajax-zoom.com/pic/layout/image-zoom_32_responsive.jpg" width="100"
611	+ align="left" class="azExampleImg">
612	+ </a>
613	+ The basis for ecommerce modules / plugins is mainly
614	+ <a href="http://www.ajax-zoom.com/examples/example32_responsive.php">example32_responsive.php</a>.
615	+ It does already support hotspots over options settings.
616	+ This editor will be certainly, maybe already is (please check), integrated into our modules for
617	+ <a href="http://www.ajax-zoom.com/index.php?cid=modules&module=magento">Magento</a>,
618	+ <a href="http://www.ajax-zoom.com/index.php?cid=modules&module=prestashop">PrestaShop</a>,
619	+ <a href="http://www.ajax-zoom.com/index.php?cid=modules&module=opencart">Opencart</a>,
620	+ <a href="http://www.ajax-zoom.com/index.php?cid=modules&module=woocommerce">WooCommerce</a>,
621	+ <a href="http://www.ajax-zoom.com/index.php?cid=modules&module=shopware">Shopware</a>
622	+ and other plugins.
623	+ </div>
624	+
625	+ <div class="legend">Build Applications</div>
626	+
627	+ <p>AJAX-ZOOM offers an
628	+ <a href="http://www.ajax-zoom.com/index.php?cid=docs#api_createNewHotspot" target="_blank">extended API</a>
629	+ to handle hotspots in various ways. In fact the entire hotspot editor is built upon this API.
630	+ The result of the hotspot configurator is a static configuration saved in a file.
631	+ However you can also build applications which will set hotspots dynamically depending e.g. on users choice.
632	+ </p>
633	+
634	+ <div class="azExample clearfix">
635	+ <a href="example12.php">
636	+ <img src="http://www.ajax-zoom.com/pic/layout/image-zoom_12.jpg" width="100"
637	+ align="left" class="azExampleImg">
638	+ </a>
639	+ Tutorial for developers of how to add "tags" to the images and let the users add title and description.
640	+ This is a little different version of the hotspot editor which is kept simple and is focused only on couple
641	+ AJAX-ZOOM hotspot features. The example is not completed in the sense that it is meant for developers who can complete and
642	+ adjust for their own needs.
643	+ </div>
644	+
645	+ <div class="azExample clearfix">
646	+ <a href="example34.php">
647	+ <img src="http://www.ajax-zoom.com/pic/layout/image-zoom_34.jpg" width="100"
648	+ align="left" class="azExampleImg">
649	+ </a>
650	+ <a href="http://www.ajax-zoom.com/examples/example34.php">example34</a> shows an application, where hotspots are
651	+ created dynamically and highlight choosen words in the text (saved as image).
652	+ </div>
653	+
654	+ <p>If you would like AJAX-ZOOM team to build an application for you, please
655	+ <a href="http://www.ajax-zoom.com/index.php?cid=contact">get in touch</a> with us.
656	+ </p>
657	+
658	+ <div class="legend">Notes</div>
659	+
660	+ <ul style="margin: 0;">
661	+ <li style="margin-top: 10px">
662	+ <img style="position: relative; top: 12px; left: -4px;" src="<?php echo $axzm_path;?>icons/browser_ie.png" width="32" height="32">
663	+ IE8, IE9 - if you want to test hotspots working on older IE,
664	+ this will <b>fail</b> on some functionality if you will be using
665	+ simulation of older version in new IE developer tools.
666	+ Please use real old IE version or at least real IE9 version developer tools to test!
667	+ </li>
668	+
669	+ <li style="margin-top: 10px">
670	+ The Options / Docu tab only refers to the possible configurations of the hotspots and not the AJAX-ZOOM player.
671	+ AJAX-ZOOM player itself can be configured with hundreds of other options to suit anybody's needs.
672	+ See <a href="http://www.ajax-zoom.com/index.php?cid=docs">AJAX-ZOOM documentation</a> and other
673	+ <a href="http://www.ajax-zoom.com/index.php?cid=examples">examples</a>.
674	+ </li>
675	+
676	+ <li style="margin-top: 10px">
677	+ The file saveHotspotJS.php is very simple and can be ported to any other language other than PHP within minutes.
678	+ Due to possible XSS attacks it is not recommended to have this file publicly accessible as it is in this example.
679	+ </li>
680	+
681	+ <li style="margin-top: 10px">
682	+ For an alternative method of loading hotspots configurations and positions see also under
683	+ <a href="javascript: void(0)" class="linkShowTab" class="linkShowTab"
684	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-6');">
685	+ Load content</a>
686	+ tab.
687	+ </li>
688	+
689	+ <li style="margin-top: 10px">
690	+ This hotspot editor extension is fairly new and you can expect it to be extended in the nearby future.
691	+ <a href="http://www.ajax-zoom.com/index.php?cid=contact" target="_blank">
692	+ As usual, your feedback on usability along with suggestions is much appreciated!
693	+ </a>
694	+ </li>
695	+
696	+ <li style="margin-top: 10px">
697	+ Please note that the position object of each hotspot accepts absolute positions of the original image (pixel values) or
698	+ relative percentage values. So in case you already have the coordinates they can be easily imported in AJAX-ZOOM JSON object.
699	+ </li>
700	+ </ul>
701	+
702	+
703	+ <!-- Comments -->
704	+ <div style="clear: both; margin: 5px 0px 5px 0px;"></div>
705	+
706	+ <?php
707	+ // This include is just for the demo, you can remove it
708	+ include ('footer.php');
709	+ ?>
710	+ <?php
711	+ }
712	+ ?>
713	+ </div>
714	+ <?php
715	+ if (!$axzm_cms_mode)
716	+ {
717	+ ?>
718	+ <div id="aZhS_about-2" class="hs_subtab">
719	+ <div class="legend">The final code example</div>
720	+
721	+ <p>The only difference between any other AJAX-ZOOM implementation / example is that
722	+ the JavaScript file with JSON data produced by this editor is loaded in AJAX-ZOOM onLoad
723	+ callback with jQuery.fn.axZm.loadHotspotsFromJsFile API, see below...
724	+ Once again, do not try to adapt this editor (example33.php) for final view.
725	+ You can use other example33_x examples or basically any other example for this.
726	+ </p>
727	+
728	+ <div class="legend">JavaScript & CSS files in Head</div>
729	+ <p>Please note that depending on configured hotspots functionality
730	+ other plugins like Fancybox might be needed!
731	+ </p>
732	+ <?php
733	+ echo '<pre class="brush: html"><code class="language-markup">';
734	+ echo htmlspecialchars ('
735	+ <!-- jQuery core -->
736	+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
737	+
738	+ <!-- AJAX-ZOOM core, needed! -->
739	+ <link href="../axZm/axZm.css" type="text/css" rel="stylesheet" />
740	+ <script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
741	+ ');
742	+ echo '</code></pre>';
743	+ ?>
744	+
745	+ <div class="legend">HTML markup in body</div>
746	+ <?php
747	+ echo '<pre class="brush: html"><code class="language-markup">';
748	+ echo htmlspecialchars ('
749	+ <div style="min-width: 100px;">
750	+ <div id="abc">
751	+ <!-- Content inside target will be removed -->
752	+ <div style="padding: 20px">Loading, please wait...</div>
753	+ </div>
754	+ </div>
755	+ ');
756	+ echo '</code></pre>';
757	+ ?>
758	+
759	+ <div class="legend">Javascript to init AJAX-ZOOM with hotspots</div>
760	+ <?php
761	+ echo '<pre class="brush: js"><code class="language-js">';
762	+ echo htmlspecialchars ('
763	+ // Create empty object
764	+ var ajaxZoom = {};
765	+
766	+ // Define callbacks, for complete list check the docs
767	+ ajaxZoom.opt = {
768	+ onBeforeStart: function(){
769	+ // Set backgrounf color, can also be done in css file
770	+ jQuery(".axZm_zoomContainer").css({backgroundColor: "#FFFFFF"});
771	+ },
772	+ onLoad: function(){
773	+ // Some settings can be set inline
774	+ jQuery.axZm.spinReverse = false;
775	+
776	+ // Load hotspots over this function...
777	+ // or just define jQuery.axZm.hotspots here and trigger jQuery.fn.axZm.initHotspots();
778	+ jQuery.fn.axZm.loadHotspotsFromJsFile("../pic/hotspotJS/eos_1100D.js", false, function(){
779	+ // Do something after hotspots are loaded
780	+ });
781	+ }
782	+ };
783	+
784	+ // Define the path to the axZm folder, adjust the path if needed!
785	+ ajaxZoom.path = "../axZm/";
786	+
787	+ // Define your custom parameter query string
788	+ // example=spinIpad has many presets for 360 images
789	+ // You can change them in /axZm/zoomConfig.inc.php after elseif ($_GET[\'example\'] == \'spinIpad\')
790	+ // 3dDir - best absolute path to the folder with 360/3D images
791	+ // for 2D you can use zoomData, e.g. zoomData=/your/path/image1.jpg\|/your/otherPath/image2.jpg
792	+ ajaxZoom.parameter = "example=spinIpad&3dDir=/pic/zoom3d/Uvex_Occhiali";
793	+
794	+ // The ID of the element where ajax-zoom has to be inserted into
795	+ ajaxZoom.divID = "abc";
796	+
797	+ // Fire AJAX-ZOOM
798	+ jQuery.fn.axZm.load({
799	+ opt: ajaxZoom.opt,
800	+ path: ajaxZoom.path,
801	+ parameter: ajaxZoom.parameter,
802	+ divID: ajaxZoom.divID
803	+ });
804	+ ');
805	+ echo '</code></pre>';
806	+ ?>
807	+
808	+ </div>
809	+ <?php
810	+ }
811	+ ?>
812	+ <div id="aZhS_about-3" class="hs_subtab">
813	+ <div class="legend">Documentation of the hotspot configuration object options</div>
814	+
815	+ <p>These options below are only about possible hotspot settings and not the AJAX-ZOOM player itself.
816	+ AJAX-ZOOM player can be configured with hundreds of other options to suit anybody's needs.
817	+ See <a href="http://www.ajax-zoom.com/index.php?cid=docs" target="_blank">AJAX-ZOOM documentation</a>
818	+ and other
819	+ <a href="http://www.ajax-zoom.com/index.php?cid=examples" target="_blank">examples</a>.
820	+ </p>
821	+
822	+ <div id="hs_docu_parent" class="hs_5-0-5-0"></div>
823	+ </div>
824	+ </div>
825	+ </div>
826	+
827	+ <div id="aZhS_tabs-1">
828	+ <div class="ui-widget-header ui-corner-all hotspotselectparent">
829	+ <div class="hs_5-0-10-0">
830	+ <label>Select hotspot to edit:</label>
831	+ <input type="button" id="hotspotSelectorFocus" style="margin-right: 5px" autocomplete="off" value="Focus+"
832	+ title="Zoom & focus to this hotspot in current frame if possible">
833	+ <select id="hotspotSelector" autocomplete="off"></select>
834	+ <input type="checkbox" id="hotspotSelectorShow" value="1" autocomplete="off" checked> - focus
835	+ <div id="hs_mainLang_select_div"></div>
836	+ </div>
837	+
838	+ <div class="hs_5-0-10-0">
839	+ <label>Editor options:</label>
840	+ <input type="checkbox" id="hotspotSelectorHL" value="1" autocomplete="off" checked> - highlight selected
841	+ <input type="checkbox" id="hotspotSelectorDrag" value="1" autocomplete="off" style="margin-left: 10px;" checked> - draggable
842	+ <input type="checkbox" id="hotspotSelectorHI" value="1" autocomplete="off" style="margin-left: 10px;"> - hide inactive
843	+ </div>
844	+ </div>
845	+
846	+ <div id="aZhS_hotspots" class="hs_subtab">
847	+ <ul>
848	+ <li><a href="#aZhS_hotspots-1">New Hotspot</a></li>
849	+ <li><a href="#aZhS_hotspots-2">Hotspot Appearance</a></li>
850	+ <li><a href="#aZhS_hotspots-3">Positions</a></li>
851	+ </ul>
852	+
853	+ <div id="aZhS_hotspots-3">
854	+ <div class="legend">Positions overview (beta)</div>
855	+ <div class="azMsg clearfix">
856	+ In this overview you can roughly set the position of the hotspots in each frame
857	+ and then set it precisely in the player. Click anywhere on the image to toggle
858	+ the hotspot in the particular frame. Click on the frame number to spin to this
859	+ frame in the player.
860	+ </div>
861	+ <div id="hs_positions_overview"></div>
862	+ </div>
863	+
864	+ <div id="aZhS_hotspots-1">
865	+ <div id="newHotspotParent">
866	+ <div id="newHotspotMain">
867	+ <div class="legend">Create new hotspot</div>
868	+
869	+ <div class="azMsg clearfix">
870	+ Below are only couple settings you can set right away.
871	+ For 360/3D after you have created a new hotspot it is recommended
872	+ to switch to the "Positions" tab to the right and roughly
873	+ set the positions of your newly created hotspot in each frame.
874	+ </div>
875	+
876	+ <div class="hs_5-0-10-0">
877	+ <label>New hotspot name:</label>
878	+ <input type="text" style="width: 300px" value="" id="fieldNewHotSpotName" autocomplete="off">
879	+ <input type="checkbox" id="hs_newHotspotCopy" value="1" autocomplete="off"> -
880	+ duplicate current hotspot
881	+ </div>
882	+
883	+ <div class="hs_5-0-10-0" style="display: none;" id="hs_newHotspotCopy_offset">
884	+ <label>With positions offset:</label>
885	+ Left: <input type="text" style="width: 50px" value="10" autocomplete="off" id="hs_newHotspotCopy_offsetX" class="txtUnit">%
886	+ Top: <input type="text" style="width: 50px" value="10" autocomplete="off" id="hs_newHotspotCopy_offsetY" class="txtUnit">
887	+ </div>
888	+
889	+ <div id="hs_newHotspot_settings">
890	+ <div class="hs_5-0-10-0">
891	+ <label>Hotspot type (<a href="javascript: void(0)" class="optDescr">shape</a>):</label>
892	+ <input id="hs_hotspotShape_point" name="hotspotShape" type="radio" value="point" autocomplete="off" checked>
893	+ - point
894	+ <input id="hs_hotspotShape_rect" name="hotspotShape" type="radio" value="rect" autocomplete="off">
895	+ - rectangle
896	+ </div>
897	+
898	+ <div class="hs_5-0-10-0">
899	+ <label>Place on all frames:</label>
900	+ <input type="checkbox" id="newHotspotAllFrames" value="1" autocomplete="off" checked>
901	+ - makes most sense for 360 / 3D
902	+ </div>
903	+
904	+ <div class="hs_5-0-10-0">
905	+ <label>Auto alt title:</label>
906	+ <input type="checkbox" id="newHotspotAltTitle" value="1" autocomplete="off" checked> - set
907	+ <a href="javascript: void(0)" class="optDescr">altTitle</a>
908	+ same as hotspot name
909	+ </div>
910	+
911	+ <div class="hs_5-0-10-0">
912	+ <label>Size:</label>
913	+ Left: <input type="text" style="width: 50px" value="" autocomplete="off" id="fieldRectLeft">
914	+ Top: <input type="text" style="width: 50px" value="" autocomplete="off" id="fieldRectTop">
915	+ <span id="rectDimFields" style="display: none;">
916	+   Width: <input type="text" style="width: 50px" autocomplete="off" value="" id="fieldRectWidth">
917	+ Height: <input type="text" style="width: 50px" value="" autocomplete="off" id="fieldRectHeight">
918	+ </span>
919	+ </div>
920	+
921	+ <div class='labelOffset hs_5-0-10-0'>
922	+ <div class="azMsg clearfix">
923	+ The 'left', 'top', 'width' and 'height' values can be pixel values related to original size of the image
924	+ (e.g. left: 1600, top: 900 or left: '1600px', top: '900px')
925	+ or they can be percentage values (e.g. left: '45.75%', top: '37.3%').
926	+ <span id="rectAddMessage" style="display: none">
927	+ For rectangles, if you want to put a full covering overlay, set left: 0, top: 0, width: '100%' and height: '100%'
928	+ </span>
929	+ </div>
930	+ </div>
931	+
932	+ <div id="rectSettings" style="display: none">
933	+ <div class="hs_5-0-10-0">
934	+ <label>Text width, height 100% (<a href="javascript: void(0)" class="optDescr">hotspotTextFill</a>):</label>
935	+ <input type="checkbox" value="1" id="fieldHotspotTextFill" autocomplete="off"> - for more settings see
936	+ <a href="javascript: void(0)" class="linkShowTab"
937	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-2'); jQuery('#aZhS_tooltip').tabs('select','#aZhS_tooltip-2');">
938	+ Tooltips / Text -> For rectangles</a>
939	+ </div>
940	+ <div class="hs_5-0-10-0">
941	+ <label>CSS Class (<a href="javascript: void(0)" class="optDescr">hotspotTextClass</a>):</label>
942	+ <input type="text" value="" style="width: 200px" id="fieldHotspotTextClass" autocomplete="off">
943	+ e.g. <code>axZmHotspotTextCustom</code> (try it)
944	+ </div>
945	+ <div class="hs_5-0-10-0">
946	+ <label>Inline CSS (<a href="javascript: void(0)" class="optDescr">hotspotTextCss</a>):</label>
947	+ e.g. <code>{"color":"black","height":"100%","width":"100%"}</code>
948	+ <input type="text" value="" style="width: 100%" autocomplete="off" id="fieldHotspotTextCss">
949	+ </div>
950	+ </div>
951	+ </div>
952	+
953	+ <div class="hs_5-0-10-0">
954	+ <label> </label>
955	+ <input type="button" id="hs_add_new_hotspot" autocomplete="off" class="btnBig" value="ADD NEW HOTSPOT">
956	+ </div>
957	+
958	+ <div class="hs_5-0-10-0">
959	+ <label> </label>
960	+ <!-- Todo: form for all possible options ?-->
961	+ </div>
962	+ </div>
963	+ </div>
964	+ </div>
965	+
966	+ <div id="aZhS_hotspots-2">
967	+ <div id="aZhS_appearance" class="hs_subtab">
968	+ <ul>
969	+ <li><a href="#aZhS_appearance-1">Icons / CSS Classes</a></li>
970	+ <li><a href="#aZhS_appearance-2">Advanced</a></li>
971	+ <li><a href="#aZhS_appearance-3">Perspective</a></li>
972	+ </ul>
973	+
974	+ <div id="aZhS_appearance-1">
975	+ <div class="legend clearfix" style="position: relative;">
976	+ Icon
977	+ <div id="hotspotImgPreview"></div>
978	+ </div>
979	+
980	+ <div class="hs_5-0-10-0">
981	+ <label>Icon dimensions:</label>
982	+ <a href="javascript: void(0)" class="optDescr">width</a>:
983	+ <input type="number" step="1" min="0" value="32" style="width: 50px;"
984	+ id="hotspot_width" class="txtUnit" autocomplete="off">px
985	+ <a href="javascript: void(0)" class="optDescr">height</a>:
986	+ <input type="number" step="1" min="0" value="32" style="width: 50px;"
987	+ id="hotspot_height" class="txtUnit" autocomplete="off">px
988	+ <input type="checkbox" id="hs_width_height_same" value="1"
989	+ autocomplete="off" checked="checked"> - same width / height
990	+ </div>
991	+
992	+ <div class="hs_5-0-10-0">
993	+ <label>Icon image (<a href="javascript: void(0)" class="optDescr">hotspotImage</a>):</label>
994	+ <input type="search" value="hotspot64_green.png" style="width: 450px;" id="hotspot_hotspotImage"
995	+ list="hotspot_hotspotImage_list" autocomplete="off">
996	+ </div>
997	+
998	+ <div class="hs_5-0-10-0">
999	+ <div id="hs_hotspot_images" class="clearfix"></div>
1000	+ </div>
1001	+
1002	+ <div class="hs_5-0-10-0">
1003	+ <label>Icon over (<a href="javascript: void(0)" class="optDescr">hotspotImageOnHover</a>):</label>
1004	+ <input type="text" value="" style="width: 450px;"
1005	+ id="hotspot_hotspotImageOnHover" list="hotspot_hotspotImage_list" autocomplete="off">
1006	+ </div>
1007	+
1008	+ <div class="azMsg azMsgWarning labelMargin clearfix">
1009	+ Please note, that when a specific hotspot is selected in the editor,
1010	+ the default "hotspotImage" (the red round with plus sign on it) is applied to highlight the selection.
1011	+ This happens only in this hotspot configurator and does not affect your final code.
1012	+ Also the hotspots are only draggable in this configurator.
1013	+ This behaviour in configurator can be enabled and disabled right below the hotspot selector
1014	+ at top of this page.
1015	+ </div>
1016	+
1017	+ <div class="hs_20-0-10-0">
1018	+ <label> </label>
1019	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1020	+ </div>
1021	+
1022	+ <div class="legend">CSS classes</div>
1023	+
1024	+ <div class="azMsg clearfix" style="margin-top: 20px">
1025	+ Instead of using png icons for hotspots you could also use CSS class,
1026	+ e.g. "<span class="hs_copyText"
1027	+ onclick="jQuery('#hotspot_hotspotClass').val('axZm_cssHotspot')">axZm_cssHotspot</span>"
1028	+ as an example. You could also use two or more CSS classes,
1029	+ e.g. "<span class="hs_copyText"
1030	+ onclick="jQuery('#hotspot_hotspotClass').val('axZm_cssHotspot axZm_pulse')">axZm_cssHotspot axZm_pulse</span>"
1031	+ will result in a pulsing css hotspot.
1032	+ You can add your own css file to this editor by adding the link to $css_file_src array which can be found
1033	+ at very top inside this php / tpl file... Also you can add the classes to the list $hotspot_classes
1034	+ so they visually appear under the form field below.
1035	+ </div>
1036	+
1037	+ <div class="hs_5-0-10-0">
1038	+ <label>Class name (<a href="javascript: void(0)" class="optDescr">hotspotClass</a>):</label>
1039	+ <input type="text" value="" style="width: 300px;" id="hotspot_hotspotClass" autocomplete="off">
1040	+ e.g. <span class="hs_copyText"
1041	+ onclick="jQuery('#hotspot_hotspotClass').val(jQuery('#hotspot_hotspotClass').val() + ' axZm_rotate')">
1042	+ axZm_rotate</span> or
1043	+ <span class="hs_copyText"
1044	+ onclick="jQuery('#hotspot_hotspotClass').val(jQuery('#hotspot_hotspotClass').val() + ' axZm_pulse')">
1045	+ axZm_pulse</span>
1046	+ </div>
1047	+
1048	+ <div class="hs_5-0-10-0">
1049	+ <div id="hs_hotspot_classes" class="clearfix"></div>
1050	+ </div>
1051	+
1052	+ <div class="hs_5-0-10-0">
1053	+ <label>Class name on hover (<a href="javascript: void(0)" class="optDescr">hotspotClassOnHover</a>):</label>
1054	+ <input type="text" value="" style="width: 300px;" id="hotspot_hotspotClassOnHover" autocomplete="off">
1055	+ e.g. <span class="hs_copyText"
1056	+ onclick="jQuery('#hotspot_hotspotClassOnHover').val(jQuery('#hotspot_hotspotClassOnHover').val() + ' axZm_rotate_stop')">
1057	+ axZm_rotate_stop</span>
1058	+ </div>
1059	+
1060	+ <div class="hs_20-0-10-0">
1061	+ <label> </label>
1062	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1063	+ <input type="checkbox" class="btnBig" value="1" id="hotspotApplyAll" autocomplete="off"> - apply for all hotspots
1064	+ </div>
1065	+ </div>
1066	+
1067	+ <div id="aZhS_appearance-2">
1068	+
1069	+ <div class="legend">Advanced settings</div>
1070	+
1071	+ <div class="hs_5-0-10-0">
1072	+ <label>Hotspot enabled (<a href="javascript: void(0)" class="optDescr">enabled</a>):</label>
1073	+ <input type="checkbox" name="hotspot_enabled" id="hotspot_enabled" value="1" autocomplete="off" checked>
1074	+ </div>
1075	+
1076	+ <div class="hs_5-0-10-0">
1077	+ <label>Visibility range:</label>
1078	+ <a href="javascript: void(0)" class="optDescr">zoomRangeMin</a>:
1079	+ <input type="number" step="any" min="0" max="100" value="0" style="width: 50px;"
1080	+ id="hotspot_zoomRangeMin" class="txtUnit" autocomplete="off">%
1081	+ <a href="javascript: void(0)" class="optDescr">zoomRangeMax</a>:
1082	+ <input type="number" step="any" min="0" max="100" value="100" style="width: 50px;"
1083	+ id="hotspot_zoomRangeMax" class="txtUnit" autocomplete="off">%
1084	+ </div>
1085	+
1086	+ <div class="hs_5-0-10-0">
1087	+ <label>Gravity (<a href="javascript: void(0)" class="optDescr">gravity</a>):</label>
1088	+ <select id="hotspot_gravity" autocomplete="off">
1089	+ <option value="center" selected>center</option>
1090	+ <option value="topLeft">topLeft</option>
1091	+ <option value="top">top</option>
1092	+ <option value="topRight">topRight</option>
1093	+ <option value="right">right</option>
1094	+ <option value="bottomRight">bottomRight</option>
1095	+ <option value="bottom">bottom</option>
1096	+ <option value="bottomLeft">bottomLeft</option>
1097	+ <option value="left">left</option>
1098	+ </select> - for landmarks set to "top"
1099	+ </div>
1100	+
1101	+ <div class="hs_5-0-10-0">
1102	+ <label>Offset:</label>
1103	+ <a href="javascript: void(0)" class="optDescr">offsetX</a>:
1104	+ <input type="number" step="any" min="-999" value="0" style="width: 50px;"
1105	+ id="hotspot_offsetX" class="txtUnit" autocomplete="off">px
1106	+ <a href="javascript: void(0)" class="optDescr">offsetY</a>:
1107	+ <input type="number" step="any" min="-999" value="0" style="width: 50px;"
1108	+ id="hotspot_offsetY" class="txtUnit" autocomplete="off">px
1109	+ </div>
1110	+
1111	+ <div class="hs_5-0-10-0">
1112	+ <label>Opacity:</label>
1113	+ <a href="javascript: void(0)" class="optDescr">opacity</a>:
1114	+ <input type="number" min="0" max="1" step="0.01" value="1" style="width: 50px;"
1115	+ id="hotspot_opacity" autocomplete="off">
1116	+ <a href="javascript: void(0)" class="optDescr">opacityOnHover</a>:
1117	+ <input type="number" min="0" max="1" step="0.01" value="1" style="width: 50px;"
1118	+ id="hotspot_opacityOnHover" autocomplete="off">
1119	+ </div>
1120	+
1121	+ <div class="hs_5-0-10-0">
1122	+ <label>Padding (<a href="javascript: void(0)" class="optDescr">padding</a>):</label>
1123	+ <input type="number" step="any" value="0" style="width: 50px;"
1124	+ id="hotspot_padding" class="txtUnit" autocomplete="off">px
1125	+ </div>
1126	+
1127	+ <div class="hs_5-0-10-0">
1128	+ <label>Layer level (<a href="javascript: void(0)" class="optDescr">zIndex</a>):</label>
1129	+ <input type="number" step="1" value="1" style="width: 50px;" id="hotspot_zIndex" autocomplete="off">
1130	+ </div>
1131	+
1132	+ <div class="hs_5-0-10-0">
1133	+ <label>Background color (<a href="javascript: void(0)" class="optDescr">backColor</a>):</label>
1134	+ <input type="text" value="none" style="width: 150px;" id="hotspot_backColor" autocomplete="off">
1135	+ </div>
1136	+
1137	+ <div class="hs_5-0-10-0">
1138	+ <label>Border:</label>
1139	+ <a href="javascript: void(0)" class="optDescr">borderWidth</a>:
1140	+ <input type="number" step="any" min="0" value="0" style="width: 50px;"
1141	+ id="hotspot_borderWidth" class="txtUnit" autocomplete="off">px
1142	+ <a href="javascript: void(0)" class="optDescr">borderColor</a>:
1143	+ <input type="text" value="red" style="width: 100px;" id="hotspot_borderColor" autocomplete="off">
1144	+ <a href="javascript: void(0)" class="optDescr">borderStyle</a>:
1145	+ <input type="text" value="solid" style="width: 70px;" id="hotspot_borderStyle" autocomplete="off">
1146	+ </div>
1147	+
1148	+ <div class="hs_5-0-10-0">
1149	+ <label>borderRadius (<a href="javascript: void(0)" class="optDescr">borderRadius</a>):</label>
1150	+ <input type="text" value="none" style="width: 150px;" id="hotspot_borderRadius" autocomplete="off">
1151	+ </div>
1152	+
1153	+ <div class="hs_5-0-10-0">
1154	+ <label>Cursor (<a href="javascript: void(0)" class="optDescr">cursor</a>):</label>
1155	+ <input type="text" value="pointer" style="width: 450px;" id="hotspot_cursor" autocomplete="off">
1156	+ </div>
1157	+
1158	+ <div class="hs_20-0-10-0">
1159	+ <label> </label>
1160	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1161	+ </div>
1162	+ </div>
1163	+
1164	+ <div id="aZhS_appearance-3">
1165	+
1166	+ <div class="legend">
1167	+ Perspective (experimental)
1168	+ </div>
1169	+
1170	+ <div class="azMsg clearfix">
1171	+ The experimental "perspective" feature is only available for 360 (not 3D) and hotspots of type "pointer".
1172	+ </div>
1173	+
1174	+ <div class="hs_5-0-10-0">
1175	+ <label>Key frame (<a href="javascript: void(0)" class="optDescr">keyFrame</a>):</label>
1176	+ <input type="text" value="" style="width: 150px;" id="hotspot_perspective_keyFrame" autocomplete="off">
1177	+ <input type="button" value="Set current" autocomplete="off"
1178	+ onclick="jQuery('#hotspot_perspective_keyFrame').val(jQuery.axZm.zoomID)" />
1179	+ <input type="button" value="Disable" autocomplete="off"
1180	+ onclick="jQuery('#hotspot_perspective_keyFrame').val('')" />
1181	+ </div>
1182	+
1183	+ <div class="hs_5-0-10-0">
1184	+ <label>Perspective (<a href="javascript: void(0)" class="optDescr">perspective</a>):</label>
1185	+ <input type="number" step="any" type="text" value="32" style="width: 50px;"
1186	+ id="hotspot_perspective_perspective" class="txtUnit" autocomplete="off">px
1187	+ </div>
1188	+
1189	+ <div class="hs_5-0-10-0">
1190	+ <label>Tilt (<a href="javascript: void(0)" class="optDescr">tilt</a>):</label>
1191	+ <input type="number" step="any" value="0" style="width: 50px;"
1192	+ id="hotspot_perspective_tilt" class="txtUnit" autocomplete="off">deg
1193	+ </div>
1194	+
1195	+ <div class="hs_5-0-10-0">
1196	+ <label>Reverse (<a href="javascript: void(0)" class="optDescr">reverse</a>):</label>
1197	+ <input type="checkbox" class="btnBig" value="1" id="hotspot_perspective_reverse" autocomplete="off">
1198	+ </div>
1199	+
1200	+ <div class="hs_20-0-10-0">
1201	+ <label> </label>
1202	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1203	+ </div>
1204	+ </div>
1205	+ </div>
1206	+ </div>
1207	+ </div>
1208	+ </div>
1209	+
1210	+ <div id="aZhS_tabs-2">
1211	+ <div class="ui-widget-header ui-corner-all hotspotselectparent">
1212	+ <div class="hs_5-0-10-0">
1213	+ <label>Select hotspot to edit:</label>
1214	+ <input type="button" id="hotspotSelectorFocus2" style="margin-right: 5px" autocomplete="off" value="Focus+"
1215	+ title="Zoom & focus to this hotspot in current frame if possible">
1216	+ <select id="hotspotSelector2" autocomplete="off"></select>
1217	+ <input type="checkbox" id="hotspotSelectorShow2" value="1" autocomplete="off" checked> - focus
1218	+ <div id="hs_mainLang_select2_div" style="float: right; max-width: 100px;"></div>
1219	+ </div>
1220	+
1221	+ <div class="hs_5-0-10-0">
1222	+ <label>Editor options:</label>
1223	+ <input type="checkbox" id="hotspotSelectorHL2" value="1" autocomplete="off" checked> - highlight selected
1224	+ <input type="checkbox" id="hotspotSelectorDrag2" value="1" style="margin-left: 10px;" autocomplete="off" checked> - draggable
1225	+ <input type="checkbox" id="hotspotSelectorHI2" value="1" autocomplete="off" style="margin-left: 10px;"> - hide inactive
1226	+ </div>
1227	+ </div>
1228	+
1229	+ <div id="aZhS_tooltip" class="hs_subtab">
1230	+ <ul>
1231	+ <li><a href="#aZhS_tooltip-1">Tooltips</a></li>
1232	+ <li><a href="#aZhS_tooltip-4">Popup Boxes</a></li>
1233	+ <li><a href="#aZhS_tooltip-2">For Rectangles</a></li>
1234	+ <li><a href="#aZhS_tooltip-3">Link / Events</a></li>
1235	+ </ul>
1236	+
1237	+ <div id="aZhS_tooltip-4">
1238	+ <div id="aZhS_popup" class="hs_subtab">
1239	+ <ul>
1240	+ <li><a href="#aZhS_tooltips-3">Default "Popup"</a></li>
1241	+ <li><a href="#aZhS_tooltips-4">Expandable</a></li>
1242	+ </ul>
1243	+ <!-- Default popup contents -->
1244	+ <div id="aZhS_tooltips-3">
1245	+ <div id="aZhS_default_popup" class="hs_subtab">
1246	+ <ul>
1247	+ <li><a href="#aZhS_default_popup-1">Contents</a></li>
1248	+ <li><a href="#aZhS_default_popup-2">Size & Look</a></li>
1249	+ <li><a href="#aZhS_default_popup-3">Close Icon & Overlay</a></li>
1250	+ </ul>
1251	+ <div id="aZhS_default_popup-1">
1252	+ <div class="legend">Default popup - contents</div>
1253	+ <div class="azMsg clearfix">
1254	+ <div class="editor_screenshot_default_popup"></div>
1255	+ If you want to show some sort of a virtual window with contents in it
1256	+ you could use and configure something similar to "Fancybox" here.
1257	+ If you do not like the appearance you can always modify its CSS
1258	+ (.axZmToolTipInner, .axZmToolTipOuter, .axZmToolTipTitle) or
1259	+ just set a different class (toolTipTitleCustomClass and toolTipCustomClass options).
1260	+ An alternative can be found in the next tab -> "Expandable".
1261	+ If you do not like these both built in ways, you could always
1262	+ use your own method by defining your custom click event under Link / Event tab above!
1263	+ </div>
1264	+
1265	+ <div class="hs_5-0-10-0">
1266	+ <label>Title (<a href="javascript: void(0)" class="optDescr">toolTipTitle</a>):</label>
1267	+ <input type="text" value="" id="hotspot_toolTipTitle" class="inputWithLang" autocomplete="off">
1268	+ <div id="hotspot_toolTipTitle_divLang" class="divLang"></div>
1269	+ </div>
1270	+
1271	+ <div style="clear: both; margin: 5px 0px 20px 0px;">
1272	+ <label>Description (<a href="javascript: void(0)" class="optDescr">toolTipHtml</a>):</label>
1273	+ <div id="hotspot_toolTipHtml_parent">
1274	+ <textarea id="hotspot_toolTipHtml" style="height: 250px; width: 100%;" autocomplete="off"></textarea>
1275	+ </div>
1276	+ <div style="text-align: right">
1277	+ <input type="button" value="WYSIWYG" style="margin-right: 10px;"
1278	+ onclick="jQuery.aZhSpotEd.toggleWYSIWYG('toolTipHtml')" autocomplete="off">
1279	+ <div id="hotspot_toolTipHtml_divLang" class="divLang"></div>
1280	+ </div>
1281	+ </div>
1282	+
1283	+ <div class="hs_5-0-10-0">
1284	+ <label>Dynamic content (<a href="javascript: void(0)" class="optDescr">toolTipAjaxUrl</a>):</label>
1285	+ <input type="text" value="" id="hotspot_toolTipAjaxUrl" class="inputWithLang" autocomplete="off">
1286	+ <div id="hotspot_toolTipAjaxUrl_divLang" class="divLang"></div>
1287	+ </div>
1288	+
1289	+ <div class="hs_5-0-10-0">
1290	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1291	+ </div>
1292	+ </div>
1293	+
1294	+ <div id="aZhS_default_popup-2">
1295	+ <div class="legend">Default popup - size and look</div>
1296	+ <div class="hs_5-0-10-0">
1297	+ <label>Dimensions:</label>
1298	+ Width (<a href="javascript: void(0)" class="optDescr">toolTipWidth</a>):
1299	+ <input type="number" step="any" value="250" style="width: 50px;"
1300	+ id="hotspot_toolTipWidth" class="txtUnit" autocomplete="off">px
1301	+ Height (<a href="javascript: void(0)" class="optDescr">toolTipHeight</a>):
1302	+ <input type="number" step="any" value="120" style="width: 50px;"
1303	+ id="hotspot_toolTipHeight" class="txtUnit" autocomplete="off">px
1304	+ </div>
1305	+
1306	+ <div class="hs_5-0-10-0">
1307	+ <label>Gravity (<a href="javascript: void(0)" class="optDescr">toolTipGravity</a>):</label>
1308	+ <select id="hotspot_toolTipGravity" autocomplete="off">
1309	+ <option value="hover" selected>hover</option>
1310	+ <option value="fullsize">fullsize</option>
1311	+ <option value="fullscreen">fullscreen</option>
1312	+ <option value="topLeft">topLeft</option>
1313	+ <option value="top">top</option>
1314	+ <option value="topRight">topRight</option>
1315	+ <option value="right">right</option>
1316	+ <option value="bottomRight">bottomRight</option>
1317	+ <option value="bottom">bottom</option>
1318	+ <option value="bottomLeft">bottomLeft</option>
1319	+ <option value="left">left</option>
1320	+ </select>
1321	+  <input type="checkbox" value="1" id="hotspot_toolTipGravFixed" autocomplete="off"> fixed position
1322	+ (<a href="javascript: void(0)" class="optDescr">toolTipGravFixed</a>)
1323	+  <input type="checkbox" value="1" id="hotspot_toolTipAutoFlip" autocomplete="off"> autoflip
1324	+ (<a href="javascript: void(0)" class="optDescr">toolTipAutoFlip</a>)
1325	+ </div>
1326	+
1327	+ <div class="hs_5-0-10-0">
1328	+ <label>Tooltip hotspot offset:</label>
1329	+ Left (<a href="javascript: void(0)" class="optDescr">toolTipAdjustX</a>):
1330	+ <input type="number" step="any" value="10" style="width: 50px;"
1331	+ id="hotspot_toolTipAdjustX" class="txtUnit" autocomplete="off">px
1332	+ Top (<a href="javascript: void(0)" class="optDescr">toolTipAdjustY</a>):
1333	+ <input type="number" step="any" value="10" style="width: 50px;"
1334	+ id="hotspot_toolTipAdjustY" class="txtUnit" autocomplete="off">px
1335	+ </div>
1336	+
1337	+ <div class="hs_5-0-10-0">
1338	+ <label>Tooltip edge offset (<a href="javascript: void(0)" class="optDescr">toolTipFullSizeOffset</a>):</label>
1339	+ <input type="number" step="any" value="40" style="width: 50px;"
1340	+ id="hotspot_toolTipFullSizeOffset" class="txtUnit" autocomplete="off">px - from all edges
1341	+ </div>
1342	+
1343	+ <div class="hs_5-0-10-0">
1344	+ <label>Event (<a href="javascript: void(0)" class="optDescr">toolTipEvent</a>):</label>
1345	+ <input name="hotspot_toolTipEvent" id="hotspot_toolTipEvent"
1346	+ type="radio" value="click" autocomplete="off" checked> - click
1347	+ <input name="hotspot_toolTipEvent" id="hotspot_toolTipEvent"
1348	+ type="radio" value="mouseover" autocomplete="off"> - mouseover
1349	+ <input type="text" value="1000" style="width: 50px;"
1350	+ id="hotspot_toolTipHideTimout" autocomplete="off"> - hide time if mouseover
1351	+ (<a href="javascript: void(0)" class="optDescr">toolTipHideTimout</a>)
1352	+ </div>
1353	+
1354	+ <div class="hs_5-0-10-0">
1355	+ <label>Title Class (<a href="javascript: void(0)" class="optDescr">toolTipTitleCustomClass</a>):</label>
1356	+ <input type="text" value="" style="width: 200px" id="hotspot_toolTipTitleCustomClass" autocomplete="off">
1357	+ e.g. <code>axZmToolTipTitleCustom</code> (try it)
1358	+ </div>
1359	+
1360	+ <div class="hs_5-0-10-0">
1361	+ <label>Inner Class (<a href="javascript: void(0)" class="optDescr">toolTipCustomClass</a>):</label>
1362	+ <input type="text" value="" style="width: 200px" id="hotspot_toolTipCustomClass" autocomplete="off">
1363	+ e.g. <code>axZmToolTipInnerCustom</code> (try it)
1364	+ </div>
1365	+
1366	+ <div class="hs_5-0-10-0">
1367	+ <label>Opacity (<a href="javascript: void(0)" class="optDescr">toolTipOpacity</a>):</label>
1368	+ <input type="text" value="1.0" style="width:50px" id="hotspot_toolTipOpacity" autocomplete="off">
1369	+ (use transparent PNG in toolTipCustomClass for only backgound opacity)
1370	+ </div>
1371	+
1372	+ <div class="hs_5-0-10-0">
1373	+ <label>Draggable (<a href="javascript: void(0)" class="optDescr">toolTipDraggable</a>):</label>
1374	+ <input type="checkbox" value="1" id="hotspot_toolTipDraggable" name="hotspot_toolTipDraggable" autocomplete="off">
1375	+ - title needs to be defined too (title div is handle)
1376	+ </div>
1377	+
1378	+ <div class="hs_20-0-10-0">
1379	+ <label> </label>
1380	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1381	+ </div>
1382	+ </div>
1383	+
1384	+ <div id="aZhS_default_popup-3">
1385	+ <div class="legend">Default popup - close icon and overlay</div>
1386	+ <div class="hs_5-0-10-0">
1387	+ <label>Close icon image (<a href="javascript: void(0)" class="optDescr">toolTipCloseIcon</a>):</label>
1388	+ <input type="text" value="fancy_closebox.png"
1389	+ style="width: 450px" id="hotspot_toolTipCloseIcon" name="hotspot_toolTipCloseIcon" autocomplete="off">
1390	+ </div>
1391	+
1392	+ <div class="hs_5-0-10-0">
1393	+ <label>Close icon position (<a href="javascript: void(0)" class="optDescr">toolTipCloseIconPosition</a>):</label>
1394	+ <select id="hotspot_toolTipCloseIconPosition" autocomplete="off">
1395	+ <option value="topRight" selected>topRight</option>
1396	+ <option value="topLeft">topLeft</option>
1397	+ <option value="bottomRight">bottomRight</option>
1398	+ <option value="bottomLeft">bottomLeft</option>
1399	+ </select>
1400	+ offset (<a href="javascript: void(0)" class="optDescr">toolTipCloseIconOffset</a>):
1401	+ <input type="text" value="" style="width: 160px" id="hotspot_toolTipCloseIconOffset" autocomplete="off">
1402	+ </div>
1403	+
1404	+ <div class="hs_5-0-10-0">
1405	+ <label>Overlay</label>
1406	+ Show: (<a href="javascript: void(0)" class="optDescr">toolTipOverlayShow</a>):
1407	+ <input type="checkbox" value="1" id="hotspot_toolTipOverlayShow"
1408	+ name="hotspot_toolTipOverlayShow" autocomplete="off">
1409	+ Close on click (<a href="javascript: void(0)" class="optDescr">toolTipOverlayClickClose</a>):
1410	+ <input type="checkbox" value="1" id="hotspot_toolTipOverlayClickClose"
1411	+ name="hotspot_toolTipOverlayClickClose" autocomplete="off">
1412	+ </div>
1413	+
1414	+ <div class="hs_5-0-10-0">
1415	+ <label>Overlay settings:</label>
1416	+ Opacity (<a href="javascript: void(0)" class="optDescr">toolTipOverlayOpacity</a>):
1417	+ <input type="text" value="" style="width: 50px" id="hotspot_toolTipOverlayOpacity" autocomplete="off">
1418	+ Color (<a href="javascript: void(0)" class="optDescr">toolTipOverlayColor</a>):
1419	+ <input type="text" value="" style="width: 80px" id="hotspot_toolTipOverlayColor" autocomplete="off">
1420	+ </div>
1421	+
1422	+ <div class="hs_20-0-10-0">
1423	+ <label> </label>
1424	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1425	+ </div>
1426	+ </div>
1427	+ </div>
1428	+ </div>
1429	+
1430	+ <!-- Expandable contents -->
1431	+ <div id="aZhS_tooltips-4">
1432	+ <div class="legend">Expandable contents</div>
1433	+
1434	+ <div class="azMsg clearfix">
1435	+ <div class="editor_screenshot_exp" style="margin-bottom: 2px;"></div>
1436	+ Here you can enter title and description to show them in a different way than Default "Popup" does.
1437	+ Besides HTML or your text you could also load external content in iframe!
1438	+ The prefix for the source is "iframe:"<br><br>
1439	+ e.g. to load an external page simply put something like this in the descripion:<br>
1440	+ <span class="hs_copyText">iframe://www.some-domain.com/123.html</span>
1441	+ <br><br>
1442	+ To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>
1443	+ <span class="hs_copyText">iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage</span>
1444	+ <br><br>
1445	+ To load some dynamic content over AJAX use "ajax:" as prefix, e.g.<br>
1446	+ <span class="hs_copyText">ajax:/test/some_content_data.php?req=123</span>
1447	+ </div>
1448	+
1449	+ <div class="hs_5-0-10-0">
1450	+ <label>Title (<a href="javascript: void(0)" class="optDescr">expTitle</a>):</label>
1451	+ <input type="text" value="" id="hotspot_expTitle" class="inputWithLang" autocomplete="off">
1452	+ <div id="hotspot_expTitle_divLang" class="divLang"></div>
1453	+ </div>
1454	+
1455	+ <div class="hs_5-0-5-0">
1456	+ <label>Description (<a href="javascript: void(0)" class="optDescr">expHtml</a>):</label>
1457	+
1458	+ <div id="hotspot_expHtml_parent">
1459	+ <textarea id="hotspot_expHtml" style="height: 250px; width: 100%;" autocomplete="off"></textarea>
1460	+ </div>
1461	+
1462	+ <div style="text-align: right">
1463	+ <input type="button" value="WYSIWYG" style="margin-right: 10px;"
1464	+ onclick="jQuery.aZhSpotEd.toggleWYSIWYG('expHtml')" autocomplete="off">
1465	+
1466	+ <div id="hotspot_expHtml_divLang" class="divLang"></div>
1467	+ </div>
1468	+ </div>
1469	+
1470	+ <div style="clear: both; margin: 5px 0px 20px 0px;">
1471	+ <label>Open fullscreen (window) (<a href="javascript: void(0)" class="optDescr">expFullscreen</a>):</label>
1472	+ <input type="checkbox" value="_blank" id="hotspot_expFullscreen" autocomplete="off">
1473	+ </div>
1474	+
1475	+ <div class="hs_5-0-10-0">
1476	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1477	+ </div>
1478	+ </div>
1479	+ </div>
1480	+ </div>
1481	+
1482	+ <div id="aZhS_tooltip-1">
1483	+ <div id="aZhS_tooltips" class="hs_subtab">
1484	+ <ul>
1485	+ <li><a href="#aZhS_tooltips-1">Alt Title</a></li>
1486	+ <li><a href="#aZhS_tooltips-2">Sticky Label</a></li>
1487	+ <li><a href="#aZhS_tooltips-5">Draft Label</a></li>
1488	+ </ul>
1489	+
1490	+ <!-- Alt title -->
1491	+ <div id="aZhS_tooltips-1">
1492	+ <div class="legend">Alt title</div>
1493	+
1494	+ <div class="azMsg clearfix">
1495	+ <div class="editor_screenshot_alt"></div>
1496	+ This is a virtual "alt" title which appears when the user hovers a hotspot with the mouse pointer.
1497	+ You can style it as according to your needs. Best assign a custom class to it.
1498	+ </div>
1499	+
1500	+ <div class="hs_5-0-10-0">
1501	+ <label>Alt title (<a href="javascript: void(0)" class="optDescr">altTitle</a>):</label>
1502	+ <input type="text" value="" id="hotspot_altTitle" class="inputWithLang" autocomplete="off">
1503	+ <div id="hotspot_altTitle_divLang" class="divLang"></div>
1504	+ </div>
1505	+
1506	+ <div class="hs_5-0-10-0">
1507	+ <label>CSS Class (<a href="javascript: void(0)" class="optDescr">altTitleClass</a>):</label>
1508	+ <input type="text" value="" id="hotspot_altTitleClass" style="width: 350px;" autocomplete="off">
1509	+ </div>
1510	+
1511	+ <div class="hs_5-0-10-0">
1512	+ <label>Alt title hotspot offset:</label>
1513	+ Left (<a href="javascript: void(0)" class="optDescr">altTitleAdjustX</a>):
1514	+ <input type="number" step="any" value="20" style="width: 50px;"
1515	+ id="hotspot_altTitleAdjustX" class="txtUnit" autocomplete="off">px
1516	+ Top (<a href="javascript: void(0)" class="optDescr">altTitleAdjustY</a>):
1517	+ <input type="number" step="any" value="20" style="width: 50px;"
1518	+ id="hotspot_altTitleAdjustY" class="txtUnit" autocomplete="off">px
1519	+ </div>
1520	+
1521	+ <div class="hs_20-0-10-0">
1522	+ <label> </label>
1523	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1524	+ </div>
1525	+ </div>
1526	+
1527	+ <!-- Sticky label -->
1528	+ <div id="aZhS_tooltips-2">
1529	+ <div id="aZhS_sticky_label" class="hs_subtab">
1530	+ <ul>
1531	+ <li><a href="#aZhS_sticky_label-1">Contents</a></li>
1532	+ <li><a href="#aZhS_sticky_label-2">Position & Look</a></li>
1533	+ <li><a href="#aZhS_sticky_label-4">Connecting Line</a></li>
1534	+ <li><a href="#aZhS_sticky_label-3">Individual Positions</a></li>
1535	+ </ul>
1536	+
1537	+ <div id="aZhS_sticky_label-1">
1538	+ <div class="legend">Sticky label - contents and default position</div>
1539	+
1540	+ <div class="azMsg clearfix">
1541	+ <div class="editor_screenshot_label"></div>
1542	+ Sticky label is similar to "Alt title" but it is always present.
1543	+ If you set labelGravity option below to "center" it will cover
1544	+ the hotspot. In this case you could remove the hotspot image in the
1545	+ "Hotspot appearance" tab and use only this sticky label as your hotspot.
1546	+ </div>
1547	+
1548	+ <div class="hs_5-0-10-0">
1549	+ <label>Label title (<a href="javascript: void(0)" class="optDescr">labelTitle</a>):</label>
1550	+ <textarea id="hotspot_labelTitle" style="height: 100px; width: 100%;" autocomplete="off"></textarea>
1551	+ <div id="hotspot_labelTitle_divLang" class="divLang"></div>
1552	+ </div>
1553	+
1554	+ <div class="hs_5-0-10-0">
1555	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1556	+ </div>
1557	+ </div>
1558	+
1559	+ <div id="aZhS_sticky_label-2">
1560	+ <div class="legend">Sticky label - position & look</div>
1561	+
1562	+ <div class="hs_5-0-10-0">
1563	+ <label>Label gravity (<a href="javascript: void(0)" class="optDescr">labelGravity</a>):</label>
1564	+ <select id="hotspot_labelGravity" autocomplete="off">
1565	+ <option value="topLeft">topLeft</option>
1566	+ <option value="topLeftFlag1">topLeftFlag 1</option>
1567	+ <option value="topLeftFlag2">topLeftFlag 2</option>
1568	+ <option value="top">top</option>
1569	+ <option value="topRight">topRight</option>
1570	+ <option value="topRightFlag1">topRightFlag 1</option>
1571	+ <option value="topRightFlag2">topRightFlag 2</option>
1572	+ <option value="right">right</option>
1573	+ <option value="rightTopFlag1">rightTopFlag 1</option>
1574	+ <option value="rightTopFlag2">rightTopFlag 2</option>
1575	+ <option value="rightBottomFlag1">rightBottomFlag 1</option>
1576	+ <option value="rightBottomFlag2">rightBottomFlag 2</option>
1577	+ <option value="bottomRight">bottomRight</option>
1578	+ <option value="bottomRightFlag1">bottomRightFlag 1</option>
1579	+ <option value="bottomRightFlag2">bottomRightFlag 2</option>
1580	+ <option value="bottom">bottom</option>
1581	+ <option value="bottomLeft">bottomLeft</option>
1582	+ <option value="bottomLeftFlag1">bottomLeftFlag 1</option>
1583	+ <option value="bottomLeftFlag2">bottomLeftFlag 2</option>
1584	+ <option value="left">left</option>
1585	+ <option value="leftTopFlag1">leftTopFlag 1</option>
1586	+ <option value="leftTopFlag2">leftTopFlag 2</option>
1587	+ <option value="leftBottomFlag1">leftBottomFlag 1</option>
1588	+ <option value="leftBottomFlag2">leftBottomFlag 2</option>
1589	+ <option value="center">center</option>
1590	+ <option value="direct">direct</option>
1591	+ </select>
1592	+ </div>
1593	+
1594	+ <div class="hs_5-0-10-0">
1595	+ <label>Instant offset (<a href="javascript: void(0)" class="optDescr">labelBaseOffset</a>):</label>
1596	+ <input type="number" step="any" value="5" id="hotspot_labelBaseOffset"
1597	+ style="width: 50px;" class="txtUnit" autocomplete="off">px
1598	+ </div>
1599	+
1600	+ <div class="hs_5-0-10-0">
1601	+ <label>Offsets: </label>
1602	+ Left (<a href="javascript: void(0)" class="optDescr">labelOffsetX</a>):
1603	+ <input type="number" step="any" value="0" id="hotspot_labelOffsetX"
1604	+ style="width: 50px;" class="txtUnit" autocomplete="off">px
1605	+ Top (<a href="javascript: void(0)" class="optDescr">labelOffsetY</a>):
1606	+ <input type="number" step="any" value="0" id="hotspot_labelOffsetY"
1607	+ style="width: 50px;" class="txtUnit" autocomplete="off">px
1608	+ </div>
1609	+
1610	+ <div class="hs_5-0-10-0">
1611	+ <label> </label>
1612	+ <input type="button" value="Drag & Drop label position" id="hs_dragDropLabel"/>
1613	+ </div>
1614	+
1615	+ <div class="hs_5-0-10-0" style="margin-top: -5px">
1616	+ <label> </label>
1617	+ <span id="dragDropLabelMsg"></span>
1618	+ </div>
1619	+
1620	+ <div class="hs_5-0-10-0">
1621	+ <label>CSS class (<a href="javascript: void(0)" class="optDescr">labelClass</a>):</label>
1622	+ <input type="text" value="" id="hotspot_labelClass" style="width: 450px;" autocomplete="off"><br>
1623	+ </div>
1624	+
1625	+ <div style="margin: -9px 0 14px 0">
1626	+ <label> </label>
1627	+ e.g. <code><a href="javascript: void(0)"
1628	+ onclick="jQuery('#hotspot_labelClass').val('axZmHotspotLabelFlat')">axZmHotspotLabelFlat</a></code>,
1629	+ default is <code>axZmHotspotLabel</code>
1630	+ </div>
1631	+
1632	+ <div class="hs_5-0-10-0">
1633	+ <label>Opacity (<a href="javascript: void(0)" class="optDescr">labelOpacity</a>):</label>
1634	+ <input type="number" min="0" max="1" step="0.01" value="1.0"
1635	+ id="hotspot_labelOpacity" style="width: 50px;" autocomplete="off">
1636	+ </div>
1637	+
1638	+ <div class="hs_20-0-10-0">
1639	+ <label> </label>
1640	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply">
1641	+ </div>
1642	+ </div>
1643	+
1644	+ <div id="aZhS_sticky_label-4">
1645	+ <div class="legend">Sticky label - connecting line </div>
1646	+
1647	+ <div class="hs_5-0-10-0">
1648	+ <label>Connecting line (<a href="javascript: void(0)" class="optDescr">labelLine</a>):</label>
1649	+ <input type="number" step="1" min="0" value="0"
1650	+ id="hotspot_labelLine" style="width: 50px;" class="txtUnit" autocomplete="off">px
1651	+ (set at least to 1 to enable)
1652	+ </div>
1653	+
1654	+ <div class="hs_5-0-10-0">
1655	+ <label>Color (<a href="javascript: void(0)" class="optDescr">labelLineColor</a>):</label>
1656	+ <input type="text" value="rgb(255, 0, 0)"
1657	+ id="hotspot_labelLineColor" style="width: 50px;" autocomplete="off">
1658	+ </div>
1659	+
1660	+ <div class="hs_5-0-10-0">
1661	+ <label>Connecting point (<a href="javascript: void(0)" class="optDescr">labelLinePoint</a>):</label>
1662	+ <select id="hotspot_labelLinePoint" autocomplete="off">
1663	+ <option value="1">1. Top - Left</option>
1664	+ <option value="2">2. Top - Center</option>
1665	+ <option value="3">3. Top - Right</option>
1666	+ <option value="4">4. Center - Right</option>
1667	+ <option value="5">5. Bottom - Right</option>
1668	+ <option value="6">6. Bottom - Center</option>
1669	+ <option value="7">7. Bottom - Left</option>
1670	+ <option value="8">8. Center - Left</option>
1671	+ <option value="9">9. Middle</option>
1672	+ <option value="10">10. Auto (1 - 8)</option>
1673	+ <option value="11">11. Auto - center (2, 4, 6, 8)</option>
1674	+ <option value="12">12. Auto - bottom corners (5, 7)</option>
1675	+ <option value="13">13. Auto - top corners (1, 3)</option>
1676	+ </select>
1677	+ </div>
1678	+
1679	+ <div class="hs_5-0-10-0">
1680	+ <label>Length adjust (<a href="javascript: void(0)" class="optDescr">labelLineAdjust</a>):</label>
1681	+ <input type="number" step="any" value="0"
1682	+ id="hotspot_labelLineAdjust" style="width: 50px;" class="txtUnit" autocomplete="off">px
1683	+ </div>
1684	+
1685	+ <div class="hs_20-0-10-0">
1686	+ <label> </label>
1687	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1688	+ </div>
1689	+
1690	+ </div>
1691	+
1692	+ <div id="aZhS_sticky_label-3">
1693	+ <div class="legend">Sticky label - individual positions for 360/3d</div>
1694	+
1695	+ <div class="azMsg clearfix">
1696	+ Since this "sticky" label is always visible you might want to place it differently depending on frame series.
1697	+ If so, select<sup>*</sup> frames in question, define the position and click "Apply" button.
1698	+ For frames where you do not define any custom positions, the default one from left tab will be applied.
1699	+ If you click on the frame number the player will spin to that frame.<br><br>
1700	+ <sup>*</sup> Selecting can be also done as you would do it on desktop with Shift, Strl keys and selection...
1701	+ </div>
1702	+
1703	+ <div class="hs_5-0-10-0">
1704	+ <label>Label gravity (<a href="javascript: void(0)" class="optDescr">labelGravity</a>):</label>
1705	+ <select id="hotspot_labelGravity_individual" autocomplete="off">
1706	+ <option value="topLeft">topLeft</option>
1707	+ <option value="topLeftFlag1">topLeftFlag 1</option>
1708	+ <option value="topLeftFlag2">topLeftFlag 2</option>
1709	+ <option value="top">top</option>
1710	+ <option value="topRight">topRight</option>
1711	+ <option value="topRightFlag1">topRightFlag 1</option>
1712	+ <option value="topRightFlag2">topRightFlag 2</option>
1713	+ <option value="right">right</option>
1714	+ <option value="rightTopFlag1">rightTopFlag 1</option>
1715	+ <option value="rightTopFlag2">rightTopFlag 2</option>
1716	+ <option value="rightBottomFlag1">rightBottomFlag 1</option>
1717	+ <option value="rightBottomFlag2">rightBottomFlag 2</option>
1718	+ <option value="bottomRight">bottomRight</option>
1719	+ <option value="bottomRightFlag1">bottomRightFlag 1</option>
1720	+ <option value="bottomRightFlag2">bottomRightFlag 2</option>
1721	+ <option value="bottom">bottom</option>
1722	+ <option value="bottomLeft">bottomLeft</option>
1723	+ <option value="bottomLeftFlag1">bottomLeftFlag 1</option>
1724	+ <option value="bottomLeftFlag2">bottomLeftFlag 2</option>
1725	+ <option value="left">left</option>
1726	+ <option value="leftTopFlag1">leftTopFlag 1</option>
1727	+ <option value="leftTopFlag2">leftTopFlag 2</option>
1728	+ <option value="leftBottomFlag1">leftBottomFlag 1</option>
1729	+ <option value="leftBottomFlag2">leftBottomFlag 2</option>
1730	+ <option value="center">center</option>
1731	+ <option value="direct">direct</option>
1732	+ </select>
1733	+ <input type="button" value="Set same as default"
1734	+ id="hs_labelIndSelAsDefault" style="margin-left: 10px" class="hs_small_button" autocomplete="off">
1735	+ </div>
1736	+
1737	+ <div class="hs_5-0-10-0">
1738	+ <label>Instant offset (<a href="javascript: void(0)" class="optDescr">labelBaseOffset</a>):</label>
1739	+ <input type="number" step="any" value="5"
1740	+ id="hotspot_labelBaseOffset_individual" style="width: 50px;" class="txtUnit" autocomplete="off">px
1741	+ </div>
1742	+
1743	+ <div class="hs_5-0-10-0">
1744	+ <label>Offsets: </label>
1745	+ Left (<a href="javascript: void(0)" class="optDescr">labelOffsetX</a>):
1746	+ <input type="number" step="any" value="0" id="hotspot_labelOffsetX_individual"
1747	+ style="width: 50px;" class="txtUnit" autocomplete="off">px
1748	+ Top (<a href="javascript: void(0)" class="optDescr">labelOffsetY</a>):
1749	+ <input type="number" step="any" value="0" id="hotspot_labelOffsetY_individual"
1750	+ style="width: 50px;" class="txtUnit" autocomplete="off">px
1751	+ </div>
1752	+
1753	+ <div class="hs_5-0-10-0">
1754	+ <label> </label>
1755	+ <input type="button" value="Drag & Drop label position" id="hs_dragDropLabel_ind"/>
1756	+ </div>
1757	+
1758	+ <div class="hs_5-0-10-0">
1759	+ <label>Connecting point (<a href="javascript: void(0)" class="optDescr">labelLinePoint</a>):</label>
1760	+ <select id="hotspot_labelLinePoint_individual" autocomplete="off">
1761	+ <option value="1">1. Top - Left</option>
1762	+ <option value="2">2. Top - Center</option>
1763	+ <option value="3">3. Top - Right</option>
1764	+ <option value="4">4. Center - Right</option>
1765	+ <option value="5">5. Bottom - Right</option>
1766	+ <option value="6">6. Bottom - Center</option>
1767	+ <option value="7">7. Bottom - Left</option>
1768	+ <option value="8">8. Center - Left</option>
1769	+ <option value="9">9. Middle</option>
1770	+ <option value="10">10. Auto (1 - 8)</option>
1771	+ <option value="11">11. Auto - center (2, 4, 6, 8)</option>
1772	+ <option value="12">12. Auto - bottom corners (5, 7)</option>
1773	+ <option value="13">13. Auto - top corners (1, 3)</option>
1774	+ </select>
1775	+ </div>
1776	+
1777	+ <div class="hs_5-0-10-0">
1778	+ <label>Length adjust (<a href="javascript: void(0)" class="optDescr">labelLineAdjust</a>):</label>
1779	+ <input type="number" step="any" value="0" id="hotspot_labelLineAdjust_individual"
1780	+ style="width: 50px;" class="txtUnit" autocomplete="off">px
1781	+ </div>
1782	+
1783	+ <div class="hs_5-0-10-0">
1784	+ <label>  </label>
1785	+ <input type="button" class="btnBig" id="labelIndividualSave" value="Apply" autocomplete="off">
1786	+ <input type="button" class="btnBig" id="labelIndividualDelete" value="Delete" autocomplete="off">
1787	+  for selected frames below
1788	+ </div>
1789	+
1790	+ <div id="hs_labelFrames"></div>
1791	+ </div>
1792	+
1793	+ </div>
1794	+ </div>
1795	+
1796	+ <!-- Draft label -->
1797	+ <div id="aZhS_tooltips-5">
1798	+ <div id="aZhS_draft_label" class="hs_subtab">
1799	+ <ul>
1800	+ <li><a href="#aZhS_draft_label-1">Contents & Position</a></li>
1801	+ <li><a href="#aZhS_draft_label-4">Connecting Line</a></li>
1802	+ <li><a href="#aZhS_draft_label-2">Label Settings</a></li>
1803	+ <li><a href="#aZhS_draft_label-3">Individual Positions</a></li>
1804	+ </ul>
1805	+
1806	+ <div id="aZhS_draft_label-1">
1807	+ <div class="legend">Draft label - contents and default position</div>
1808	+
1809	+ <div class="azMsg clearfix">
1810	+ <div class="editor_screenshot_draft"></div>
1811	+ Draft label is similar to "Sticky label".
1812	+ It is connected to the hotspot with a line.
1813	+ Unlike "Sticky label", this label is
1814	+ positioned not relative to hotspots position but
1815	+ absolute to entire canvas. Basically it is positioned
1816	+ same way as regular "point" hotspot so it
1817	+ stays on same position where it is placed also
1818	+ in responsive environments. You can choose
1819	+ one position for all frames,
1820	+ set a position for a series of frames
1821	+ or edit each position in each frame individually.
1822	+ The connection line instantly connects the hotpot with the label.
1823	+ Once everything is set up you could remove the icon and css
1824	+ for the actual hotspot as the connection line will point to it.
1825	+ Connection line is compatible with IE < 9.
1826	+ <!--
1827	+ Todo: Make an option to have it always visible also on zoom (in viewport).
1828	+ -->
1829	+ </div>
1830	+
1831	+ <div class="hs_5-0-10-0">
1832	+ <label>Draft label title (<a href="javascript: void(0)" class="optDescr">draftTitle</a>):</label>
1833	+ <textarea id="hotspot_draftTitle" style="height: 100px; width: 100%;" autocomplete="off"></textarea>
1834	+ <div id="hotspot_draftTitle_divLang" class="divLang"></div>
1835	+ </div>
1836	+
1837	+ <div class="hs_5-0-10-0">
1838	+ <label>Default position: </label>
1839	+ Left (<a href="javascript: void(0)" class="optDescr">draftPosLeft</a>):
1840	+ <input type="text" id="hotspot_draftPosLeft"
1841	+ style="width: 100px;" class="txtUnit" autocomplete="off">%
1842	+ Top (<a href="javascript: void(0)" class="optDescr">draftPosTop</a>):
1843	+ <input type="text" id="hotspot_draftPosTop"
1844	+ style="width: 100px;" class="txtUnit" autocomplete="off">%
1845	+ </div>
1846	+
1847	+ <div class="hs_5-0-10-0">
1848	+ <label> </label>
1849	+ <input type="button" value="Drag & Drop Draft label position"
1850	+ id="hs_dragDropDraftLabel" autocomplete="off">
1851	+ </div>
1852	+
1853	+ <div class="hs_5-0-10-0" style="margin-top: -5px">
1854	+ <label> </label>
1855	+ <span id="dragDropDraftLabelMsg"></span>
1856	+ </div>
1857	+
1858	+ <div class="hs_20-0-10-0">
1859	+ <label> </label>
1860	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1861	+ </div>
1862	+ </div>
1863	+
1864	+ <div id="aZhS_draft_label-4">
1865	+ <div class="legend">Connecting line settings</div>
1866	+
1867	+ <div class="hs_5-0-10-0">
1868	+ <label>Line type (<a href="javascript: void(0)" class="optDescr">draftLineType</a>):</label>
1869	+ <input name="hotspot_draftLineType" id="hotspot_draftLineType"
1870	+ type="radio" value="1" autocomplete="off"
1871	+ onclick="jQuery('#hs_draftLineT2_div').css('display', 'none')" checked> - straight
1872	+ <input name="hotspot_draftLineType" id="hotspot_draftLineType"
1873	+ type="radio" value="2" autocomplete="off"
1874	+ onclick="jQuery('#hs_draftLineT2_div').css('display', 'block')"> - corner
1875	+ </div>
1876	+
1877	+ <div style="display: none;" id="hs_draftLineT2_div">
1878	+ <div class="hs_5-0-10-0">
1879	+ <label>Connection type (<a href="javascript: void(0)" class="optDescr">draftLineT2c</a>):</label>
1880	+ <select id="hotspot_draftLineT2c" autocomplete="off">
1881	+ <option value="1">1. Longest first</option>
1882	+ <option value="2">2. Shortest first</option>
1883	+ <option value="3">3. Horizontal first</option>
1884	+ <option value="4">4. Vertical first</option>
1885	+ </select>
1886	+ </div>
1887	+
1888	+ <div class="hs_5-0-10-0">
1889	+ <label>Line style (<a href="javascript: void(0)" class="optDescr">draftLineT2s</a>):</label>
1890	+ <select id="hotspot_draftLineT2s" autocomplete="off">
1891	+ <option value="solid">Solid</option>
1892	+ <option value="dashed">Dashed</option>
1893	+ <option value="dotted">Dotted</option>
1894	+ </select>
1895	+ </div>
1896	+
1897	+ <div class="hs_5-0-10-0">
1898	+ <label>Line skew (<a href="javascript: void(0)" class="optDescr">draftLineT2skew</a>):</label>
1899	+ <input type="number" step="1" min="0" value="0"
1900	+ id="hotspot_draftLineT2skew" style="width: 50px;" class="txtUnit" autocomplete="off">deg
1901	+ </div>
1902	+ </div>
1903	+
1904	+ <div class="hs_5-0-10-0">
1905	+ <label> </label>
1906	+ Width (<a href="javascript: void(0)" class="optDescr">draftLine</a>):
1907	+ <input type="number" step="1" min="1" value="1"
1908	+ id="hotspot_draftLine" style="width: 50px;" class="txtUnit" autocomplete="off">px
1909	+ Color (<a href="javascript: void(0)" class="optDescr">draftLineColor</a>):
1910	+ <input type="text" value="rgb(255, 0, 0)"
1911	+ id="hotspot_draftLineColor" style="width: 50px;" autocomplete="off">
1912	+ </div>
1913	+
1914	+ <div class="hs_5-0-10-0">
1915	+ <label>Connecting line additional CSS class (<a href="javascript: void(0)" class="optDescr">draftLineClass</a>):</label>
1916	+ <input type="text" value="" id="hotspot_draftLineClass" style="width: 450px;" autocomplete="off"><br>
1917	+ </div>
1918	+
1919	+ <div class="hs_20-0-10-0">
1920	+ <label> </label>
1921	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1922	+ </div>
1923	+ </div>
1924	+
1925	+ <div id="aZhS_draft_label-2">
1926	+ <div class="legend">Draft label settings</div>
1927	+
1928	+ <div class="hs_5-0-10-0">
1929	+ <label>Draft label gravity (<a href="javascript: void(0)" class="optDescr">draftGravity</a>):</label>
1930	+ <select id="hotspot_draftGravity" autocomplete="off">
1931	+ <option value="center" selected>center</option>
1932	+ <option value="topLeft">topLeft</option>
1933	+ <option value="top">top</option>
1934	+ <option value="topRight">topRight</option>
1935	+ <option value="right">right</option>
1936	+ <option value="bottomRight">bottomRight</option>
1937	+ <option value="bottom">bottom</option>
1938	+ <option value="bottomLeft">bottomLeft</option>
1939	+ <option value="left">left</option>
1940	+ </select>
1941	+ </div>
1942	+
1943	+ <div class="hs_5-0-10-0">
1944	+ <label>Offset:</label>
1945	+ <a href="javascript: void(0)" class="optDescr">draftOffsetX</a>:
1946	+ <input type="number" step="any" min="-999" value="0" style="width: 50px;"
1947	+ id="hotspot_draftOffsetX" class="txtUnit" autocomplete="off">px
1948	+ <a href="javascript: void(0)" class="optDescr">draftOffsetY</a>:
1949	+ <input type="number" step="any" min="-999" value="0" style="width: 50px;"
1950	+ id="hotspot_draftOffsetY" class="txtUnit" autocomplete="off">px
1951	+ </div>
1952	+
1953	+ <div class="hs_5-0-10-0">
1954	+ <label>Color:</label>
1955	+ <a href="javascript: void(0)" class="optDescr">draftBorderColor</a>:
1956	+ <input type="text" value="" id="hotspot_draftBorderColor" style="width: 50px;" autocomplete="off">
1957	+ <a href="javascript: void(0)" class="optDescr">draftBackColor</a>:
1958	+ <input type="text" value="" id="hotspot_draftBackColor" style="width: 50px;" autocomplete="off">
1959	+ <a href="javascript: void(0)" class="optDescr">draftFontColor</a>:
1960	+ <input type="text" value="" id="hotspot_draftFontColor" style="width: 50px;" autocomplete="off">
1961	+ </div>
1962	+
1963	+ <div class="hs_5-0-10-0">
1964	+ <label>CSS class (<a href="javascript: void(0)" class="optDescr">draftClass</a>):</label>
1965	+ <input type="text" value="" id="hotspot_draftClass" style="width: 450px;" autocomplete="off"><br>
1966	+ </div>
1967	+
1968	+ <div style="margin: -9px 0 14px 0">
1969	+ <label> </label>
1970	+ default is <code>axZmHotspotLabelR</code>
1971	+ </div>
1972	+
1973	+ <div class="hs_5-0-10-0">
1974	+ <label>Trigger click event of the hotspot (<a href="javascript: void(0)" class="optDescr">draftTriggerClick</a>):</label>
1975	+ <input type="checkbox" value="" id="hotspot_draftTriggerClick" autocomplete="off">
1976	+ </div>
1977	+
1978	+ <div class="hs_5-0-10-0">
1979	+ <label>Click event (<a href="javascript: void(0)" class="optDescr">draftClick</a>):</label>
1980	+ <textarea id="hotspot_draftClick" value="" style="width: 100%; height: 150px" autocomplete="off"></textarea>
1981	+ </div>
1982	+
1983	+ <div class="hs_20-0-10-0">
1984	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
1985	+ </div>
1986	+ </div>
1987	+
1988	+ <div id="aZhS_draft_label-3">
1989	+ <div class="legend">Draft label - individual positions for 360/3d</div>
1990	+
1991	+ <div class="azMsg clearfix">
1992	+ "Draft label" behaves similar to a hotspot of type point.
1993	+ The default position can be set in the most left tab.
1994	+ If you want to vary the position across different frames, you can do it here.
1995	+ Select<sup>*</sup> frames in question - thumbs below, define the position and press "Apply" button.
1996	+ If you want to have label position relative to hotspot position,
1997	+ then use the "batch positioning" functionality below. Note, that you have to
1998	+ select frames in question too. This relative position will not adjust instantly
1999	+ if you move the actual hotspot somewhere else, so make sure that
2000	+ the hotspot positions are final or repeat batch positioning after you move the hotspot.<br><br>
2001	+ <sup>*</sup> Selecting can be also done as you would do it on desktop with
2002	+ Shift, Strl keys and selection...
2003	+ </div>
2004	+
2005	+ <div class="hs_5-0-10-0">
2006	+ <label>Position: <br />
2007	+ <input type="button" value="Set same as default"
2008	+ id="hs_labelDraftIndSelAsDefault" class="hs_small_button" autocomplete="off">
2009	+ </label>
2010	+ Left (<a href="javascript: void(0)" class="optDescr">draftPosLeft</a>):
2011	+ <input type="text" value="20" id="hotspot_draftPosLeft_individual"
2012	+ style="width: 100px;" class="txtUnit" autocomplete="off">%
2013	+ Top (<a href="javascript: void(0)" class="optDescr">draftPosTop</a>):
2014	+ <input type="text" value="10" id="hotspot_draftPosTop_individual"
2015	+ style="width: 100px;" class="txtUnit" autocomplete="off">%
2016	+ </div>
2017	+
2018	+ <div class="hs_5-0-10-0">
2019	+ <label> </label>
2020	+ <input type="button" value="Drag & Drop 'Draft label' position"
2021	+ id="hs_dragDropDraftLabel_ind" autocomplete="off">
2022	+ </div>
2023	+
2024	+ <div class="hs_5-0-10-0">
2025	+ <label>  </label>
2026	+ <input type="button" class="btnBig" id="labelDraftIndividualSave" value="Apply" autocomplete="off">
2027	+ <input type="button" class="btnBig" id="labelDraftIndividualDelete" value="Delete" autocomplete="off">
2028	+  for selected frames below
2029	+ </div>
2030	+
2031	+ <div class="hs_5-0-10-0 labelOffset">
2032	+ <div class="legend">Batch positioning</div>
2033	+ <div class="hs_5-0-10-0">
2034	+ <div class="azMsg clearfix">
2035	+ Set positions of the below selected frames relative to hotspot positions.
2036	+ Negative values accepted. Also no value for either Left or Top is accepted too!
2037	+ This way you can set the positions relative only to e.g. Top and leave Left
2038	+ as it was defined previously here or by default value
2039	+ (e.g. if you set the default position to somewhere at right and define
2040	+ only Top offset, then the label will "slide" only vertically because
2041	+ Left offset does not change).
2042	+ Please note that the hotspot positions have to
2043	+ be already set precisely!
2044	+ </div>
2045	+ <label class="labelSmall">Offset:</label>
2046	+ Left:
2047	+ <input type="text" value="5" id="hs_label_relative_position_left"
2048	+ style="width: 80px;" class="txtUnit" autocomplete="off">%
2049	+ Top:
2050	+ <input type="text" value="5" id="hs_label_relative_position_top"
2051	+ style="width: 80px;" class="txtUnit" autocomplete="off">%
2052	+ <div class="hs_5-0-10-0">
2053	+ <label class="labelSmall"> </label>
2054	+ <input type="button" id="labelDraftSubmitOffset" value="Batch position">
2055	+ </div>
2056	+ </div>
2057	+ </div>
2058	+
2059	+ <div id="hs_labelDraftFrames"></div>
2060	+ </div>
2061	+ </div>
2062	+ </div>
2063	+ </div>
2064	+ </div>
2065	+
2066	+ <!-- Mainly for rectangles -->
2067	+ <div id="aZhS_tooltip-2">
2068	+ <div class="legend">Mainly for rectangles</div>
2069	+
2070	+ <div class="hs_5-0-10-0">
2071	+ <label>Text inside hotspot area (<a href="javascript: void(0)" class="optDescr">hotspotText</a>):</label>
2072	+ Do not use " (double quotation marks) in html tags. Use ' instead! <a href="javascript: void(0)"
2073	+ onclick="jQuery.aZhSpotEd.setLorem('hotspot_hotspotText')">set Lorem</a>
2074	+ <textarea id="hotspot_hotspotText" style="height: 250px; width: 100%;" autocomplete="off"></textarea>
2075	+ <div id="hotspot_hotspotText_divLang" class="divLang"></div>
2076	+ </div>
2077	+
2078	+ <div class="hs_5-0-10-0">
2079	+ <label>Text width, height 100% (<a href="javascript: void(0)" class="optDescr">hotspotTextFill</a>):</label>
2080	+ <input type="checkbox" value="1" id="hotspot_hotspotTextFill" autocomplete="off">
2081	+ </div>
2082	+
2083	+ <div class="hs_5-0-10-0">
2084	+ <label>CSS Class (<a href="javascript: void(0)" class="optDescr">hotspotTextClass</a>):</label>
2085	+ <input type="text" value="" style="width: 200px" id="hotspot_hotspotTextClass" autocomplete="off">
2086	+ e.g. <code>axZmHotspotTextCustom</code> (try it)
2087	+ </div>
2088	+
2089	+ <div class="hs_5-0-10-0">
2090	+ <label>Inline CSS (<a href="javascript: void(0)" class="optDescr">hotspotTextCss</a>):</label>
2091	+ e.g. <code>{"color":"black","height":"100%","width":"100%"}</code>
2092	+ <input type="text" value="" style="width: 100%" id="hotspot_hotspotTextCss" autocomplete="off">
2093	+ </div>
2094	+
2095	+ <div class="hs_5-0-10-0">
2096	+ <input type="button" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
2097	+ </div>
2098	+ </div>
2099	+
2100	+ <!-- Link and other events -->
2101	+ <div id="aZhS_tooltip-3">
2102	+ <div class="legend">Link and other events (JavaScript)</div>
2103	+
2104	+ <div class="azMsg azMsgWarning clearfix">
2105	+ For click, mouseover etc. events - if you are using jQuery functions, do not write
2106	+ e.g. <span style="color: red;">$</span>.fancybox(...);
2107	+ write <span style="color: red;">jQuery</span>.fancybox(...); instead!!!
2108	+ </div>
2109	+
2110	+ <div id="aZhS_events" class="hs_subtab">
2111	+ <ul>
2112	+ <li><a href="#aZhS_events-1" class="hs_subtab_a">Link</a></li>
2113	+ <li><a href="#aZhS_events-2" class="hs_subtab_a">Click</a></li>
2114	+ <li><a href="#aZhS_events-3" class="hs_subtab_a">Mouseover</a></li>
2115	+ <li><a href="#aZhS_events-4" class="hs_subtab_a">Mouseout</a></li>
2116	+ <li><a href="#aZhS_events-5" class="hs_subtab_a">Mouseenter</a></li>
2117	+ <li><a href="#aZhS_events-6" class="hs_subtab_a">Mouseleave</a></li>
2118	+ <li><a href="#aZhS_events-7" class="hs_subtab_a">Mousedown</a></li>
2119	+ <li><a href="#aZhS_events-8" class="hs_subtab_a">Mouseup</a></li>
2120	+ <li><a href="#aZhS_events-9" class="hs_subtab_a">onRender</a></li>
2121	+ </ul>
2122	+
2123	+ <div id="aZhS_events-9" style="min-height: 300px;">
2124	+ <div class="hs_5-0-10-0">
2125	+ <label>onRender (<a href="javascript: void(0)" class="optDescr">onRender</a>):</label>
2126	+ <textarea id="hotspot_onRender" class="hs_events_txt" autocomplete="off"></textarea>
2127	+ </div>
2128	+ </div>
2129	+
2130	+ <div id="aZhS_events-1" style="min-height: 300px;">
2131	+ <div class="hs_5-0-10-0">
2132	+ <label>Link (<a href="javascript: void(0)" class="optDescr">href</a>):</label>
2133	+ <input type="text" value="" class="inputWithLang" id="hotspot_href" autocomplete="off">
2134	+ <div id="hotspot_href_divLang" class="divLang"></div>
2135	+ </div>
2136	+ <div class="hs_5-0-10-0">
2137	+ <label>Link in new window (<a href="javascript: void(0)" class="optDescr">hrefTarget</a>):</label>
2138	+ <input type="checkbox" value="_blank" id="hotspot_hrefTarget" autocomplete="off">
2139	+ </div>
2140	+ </div>
2141	+
2142	+ <div id="aZhS_events-2" style="min-height: 300px;">
2143	+ <div class="hs_5-0-10-0">
2144	+ <label>Click event (<a href="javascript: void(0)" class="optDescr">click</a>):</label>
2145	+ <div class="azMsg clearfix">
2146	+ e.g.
2147	+ <pre style="tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4;">
2148	+ jQuery.fancybox(
2149	+ [{
2150	+ 'href': '/path/some/image1.jpg',
2151	+ 'title': 'Description 1 image'
2152	+ },{
2153	+ 'href': '/path/other/image2.jpg',
2154	+ 'title': 'Description 2 image'
2155	+ }], {
2156	+ 'padding': 0,
2157	+ 'transitionIn': 'none',
2158	+ 'transitionOut': 'none',
2159	+ 'type': 'image',
2160	+ 'titlePosition': 'over',
2161	+ 'changeFade': 0
2162	+ });
2163	+ </pre>
2164	+ </div>
2165	+ <textarea id="hotspot_click" class="hs_events_txt" autocomplete="off"></textarea>
2166	+ </div>
2167	+ </div>
2168	+
2169	+ <div id="aZhS_events-3" style="min-height: 300px;">
2170	+ <div class="hs_5-0-10-0">
2171	+ <label>Mouseover event (<a href="javascript: void(0)" class="optDescr">mouseover</a>):</label>
2172	+ <textarea id="hotspot_mouseover" class="hs_events_txt" autocomplete="off"></textarea>
2173	+ </div>
2174	+ </div>
2175	+
2176	+ <div id="aZhS_events-4" style="min-height: 300px;">
2177	+ <div class="hs_5-0-10-0">
2178	+ <label>Mouseout event (<a href="javascript: void(0)" class="optDescr">mouseout</a>):</label>
2179	+ <textarea id="hotspot_mouseout" class="hs_events_txt" autocomplete="off"></textarea>
2180	+ </div>
2181	+ </div>
2182	+
2183	+ <div id="aZhS_events-5" style="min-height: 300px;">
2184	+ <div class="hs_5-0-10-0">
2185	+ <label>Mouseenter event (<a href="javascript: void(0)" class="optDescr">mouseenter</a>):</label>
2186	+ <textarea id="hotspot_mouseenter" class="hs_events_txt" autocomplete="off"></textarea>
2187	+ </div>
2188	+ </div>
2189	+
2190	+ <div id="aZhS_events-6" style="min-height: 300px;">
2191	+ <div class="hs_5-0-10-0">
2192	+ <label>Mouseleave event (<a href="javascript: void(0)" class="optDescr">mouseleave</a>):</label>
2193	+ <textarea id="hotspot_mouseleave" class="hs_events_txt" autocomplete="off"></textarea>
2194	+ </div>
2195	+ </div>
2196	+
2197	+ <div id="aZhS_events-7" style="min-height: 300px;">
2198	+ <div class="hs_5-0-10-0">
2199	+ <label>Mousedown event (<a href="javascript: void(0)" class="optDescr">mousedown</a>):</label>
2200	+ <textarea id="hotspot_mousedown" class="hs_events_txt" autocomplete="off"></textarea>
2201	+ </div>
2202	+ </div>
2203	+
2204	+ <div id="aZhS_events-8" style="min-height: 300px;">
2205	+ <div class="hs_5-0-10-0">
2206	+ <label>Mouseup event (<a href="javascript: void(0)" class="optDescr">mouseup</a>):</label>
2207	+ <textarea id="hotspot_mouseup" class="hs_events_txt" autocomplete="off"></textarea>
2208	+ </div>
2209	+ </div>
2210	+
2211	+ <div class="hs_5-0-10-0">
2212	+ <input type="button" style="margin-left: 5px" class="btnBig hs_saveHotspotTooltip" value="Apply" autocomplete="off">
2213	+ </div>
2214	+ </div>
2215	+ </div>
2216	+ </div>
2217	+ </div>
2218	+
2219	+ <?php
2220	+ if (!$axzm_cms_mode)
2221	+ {
2222	+ ?>
2223	+ <div id="aZhS_tabs-6">
2224	+ <div class="legend">Load a different 2D / 360 or 3D content</div>
2225	+
2226	+ <div class="azMsg azMsgWarning clearfix">You do not need to edit html / source code of this file
2227	+ in order to load a different 2D / 360 or 3D content into the editor.
2228	+ Just enter a local path into one of the fields below and press "LOAD" button.
2229	+ Press "GET" button to see what is currently loaded.
2230	+ </div>
2231	+
2232	+ <div class="hs_5-0-10-0">
2233	+ <label>1. Path for 2D:</label>
2234	+ <input type="text" value="" id="pathToLoad2D" autocomplete="off"> or
2235	+ </div>
2236	+
2237	+ <div class="hs_5-0-10-0">
2238	+ <label>2. Path for 360 or 3D:</label>
2239	+ <input type="text" value="" id="pathToLoad360" autocomplete="off">
2240	+ </div>
2241	+
2242	+ <div style="clear: both; margin: 15px 0px 5px 0px;">
2243	+ <label>3. Hotspot file path:</label>
2244	+ <input type="text" value="" id="hotspotFileToLoad" autocomplete="off"> (optional)
2245	+ </div>
2246	+
2247	+ <div class="hs_5-0-10-0">
2248	+ <label> </label>
2249	+ <input type="button" value="LOAD"
2250	+ onclick="jQuery.aZhSpotEd.changeAxZmContentPHP();" autocomplete="off">
2251	+ <input type="button" value="GET"
2252	+ onclick="jQuery.aZhSpotEd.getLoadedParameters();" autocomplete="off">
2253	+ </div>
2254	+
2255	+ <div id="pathToParameter"></div>
2256	+
2257	+ <div class="legend">How does it work:</div>
2258	+ <div class="hs_5-0-10-0">
2259	+ <ol>
2260	+ <li><strong>For 2D</strong> (single image or gallery with more images)
2261	+ please enter local path(s) to the image(s), e.g. <br>
2262	+ "<code>/pic/zoom/animals/test_animals1.png</code>"<br>
2263	+ or image set with image paths separated with vertical dash e.g.<br>
2264	+ "<code>/pic/zoom/animals/test_animals1.png\|/pic/zoom/animals/test_animals2.png</code>"<br>
2265	+ If you want to load all images from a folder please just enter the path to this folder e.g. <br>
2266	+ "<code>/pic/zoom/animals</code>"
2267	+ </li>
2268	+
2269	+ <li style="margin-top: 10px;">
2270	+ <ul>
2271	+ <li style="margin-top: 5px;"><strong>For 360</strong>
2272	+ (single row 360 object) please enter only the path to the folder
2273	+ where your 360 images are located e.g. <br>
2274	+ "<code>/pic/zoom3d/Uvex_Occhiali</code>";
2275	+ </li>
2276	+ <li style="margin-top: 5px;"><strong>For 3D</strong>
2277	+ (multi row turnable object) please enter the path to the folder
2278	+ where subfolders with each row of 3D are located.<br>
2279	+ On <a href="http://www.ajax-zoom.com/examples/example33.php"
2280	+ target="_blank">http://www.ajax-zoom.com/examples/example33.php</a>
2281	+ this could be <br>
2282	+ "<code>/pic/zoomVR/nike</code>" <br>
2283	+ (not provided with the download package)
2284	+ </li>
2285	+ </ul>
2286	+ </li>
2287	+ <li style="margin-top: 10px;">
2288	+ <strong>Hotspot file path</strong>
2289	+ is the path to the file with hotspot configurations and positions, e.g.<br>
2290	+ "<code>/pic/hotspotJS/eos_1100D.js</code>"<br>
2291	+ You can create such a file in the previous tab "Save / Edit JSON"
2292	+ </li>
2293	+ </ol>
2294	+ </div>
2295	+
2296	+ <div class="legend">Notes:</div>
2297	+ <div class="hs_5-0-10-0">
2298	+ <p>When you hit the "LOAD" button the parameters entered are passed to the function
2299	+ "changeAxZmContentPHP" located in "/axZm/extensions/jquery.axZm.hotspotEditor.js", which basically just
2300	+ reloads the player same way it is loaded when the page is opened.
2301	+ </p>
2302	+ <p>There are also different ways of loading and saving hotspot
2303	+ configuration parameters besides loading a static JavaScript file.
2304	+ For example you could point to /some/dyn_language/file.do?hotspotID=123 which would return the JSON object
2305	+ stored in a database. If you use the API function
2306	+ <a href="http://www.ajax-zoom.com/index.php?cid=docs#api_loadHotspotsFromJsFile">jQuery.fn.axZm.loadHotspotsFromJsFile</a>
2307	+ then you have to reference jQuery.axZm.hotspots variable to the returned JSON object from your /some/dyn_language/file.do
2308	+ (the return of this file is expected to be JavaScript - without script tags).
2309	+ </p>
2310	+ <p>Alternatively define jQuery.axZm.hotspots wherever after AJAX-ZOOM is initialized, e.g.
2311	+ <a href="http://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart" target="_blank">onBeforeStart</a>
2312	+ callback (or later at any time) and "manually" init the hotspots with
2313	+ <a href="http://www.ajax-zoom.com/index.php?cid=docs#api_initHotspots" target="_blank">jQuery.fn.initHotspots()</a>
2314	+ </p>
2315	+ <p>Taking the above one step farther you can also build applications
2316	+ which will set hotspots dynamically depending e.g. on users choice or action.
2317	+ <a href="http://www.ajax-zoom.com/examples/example34.php">example34</a> shows such an application, where hotspots are
2318	+ created dynamically and highlight choosen words in the text (saved as image).
2319	+ </p>
2320	+ </div>
2321	+ </div>
2322	+ <?php
2323	+ }
2324	+ ?>
2325	+
2326	+ <div id="aZhS_tabs-5">
2327	+ <?php
2328	+ if (!$axzm_cms_mode)
2329	+ {
2330	+ ?>
2331	+ <div id="aZhS_save" class="hs_subtab">
2332	+ <?php
2333	+ }
2334	+ ?>
2335	+ <?php
2336	+ if (!$axzm_cms_mode)
2337	+ {
2338	+ ?>
2339	+ <ul>
2340	+ <li><a href="#aZhS_save-1">Import / Edit</a></li>
2341	+ <li><a href="#aZhS_save-2">Save JSON to JavaScript File</a></li>
2342	+ <!--<li><a href="#aZhS_save-3">Positions only</a></li>-->
2343	+ </ul>
2344	+ <?php
2345	+ }
2346	+ ?>
2347	+
2348	+ <?php
2349	+ if (!$axzm_cms_mode)
2350	+ {
2351	+ ?>
2352	+ <div id="aZhS_save-1">
2353	+ <?php
2354	+ }
2355	+ ?>
2356	+
2357	+ <?php
2358	+ if ($axzm_cms_mode)
2359	+ {
2360	+ ?>
2361	+ <div class="legend">Edit, apply, save</div>
2362	+ <?php
2363	+ }
2364	+ else
2365	+ {
2366	+ ?>
2367	+ <div class="legend">Import, edit, apply entire JSON for all hotspots manually</div>
2368	+ <?php
2369	+ }
2370	+ ?>
2371	+
2372	+ <div class="azMsg">
2373	+ The code in the textarea below is what has been produced by this hotspot editor. <br>
2374	+ Here you can adjust it manually if needed. Do not forget to press "Apply" button after your changes! <br>
2375	+ <input type="button" id="hs_display_docu_button" style="margin-top: 5px;"
2376	+ value="DISPLAY HOTSPOTS JSON DOCUMENTATION"
2377	+ onclick="jQuery.aZhSpotEd.displayDocu('left')" autocomplete="off">
2378	+ </div>
2379	+
2380	+ <div class="hs_5-0-10-0">
2381	+ <label>Import current loaded object:</label> <input type="button" value="Import"
2382	+ id="hs_jsonImportBtn" autocomplete="off">
2383	+ <input type="checkbox" id="allHotspotsCodeDefaults" value="1"
2384	+ autocomplete="off" <?php echo $axzm_cms_mode ? '' : 'checked'; ?>>
2385	+ - with defaults
2386	+ <input type="checkbox" id="allHotspotsCodeImgNames" value="1" autocomplete="off" checked>
2387	+ - positions as image names
2388	+ <input type="checkbox" id="allHotspotsCodeFormat" value="1" autocomplete="off">
2389	+ - do not format <br />
2390	+ </div>
2391	+
2392	+ <div class="hs_5-0-10-0">
2393	+ <label>Search for a word:</label>
2394	+ <input type="text" id="jsonSearchField" value="" style="width: 300px" autocomplete="off">
2395	+ <input type="button" id="jsonSearchFieldSubmit" value="Search" autocomplete="off">
2396	+ </div>
2397	+
2398	+ <div class="hs_5-0-10-0">
2399	+ <label>  </label><span id="jsonSearchResults"></span>
2400	+ </div>
2401	+
2402	+ <div class="hs_5-0-10-0">
2403	+ <div id="scrollToHotspotJSON"></div>
2404	+ </div>
2405	+
2406	+ <div class="hs_5-0-10-0">
2407	+ <!-- Adjust the path of saveHotspotJS.php if needed -->
2408	+ <form action="<?php echo $axzm_path;?>saveHotspotJS.php" id="saveHotspotJS">
2409	+ <div style="height: auto;">
2410	+ <textarea id="allHotspotsCode"
2411	+ style="width: 100%; font-size:12px; line-height: 14px; height: 400px;" autocomplete="off"></textarea>
2412	+ </div>
2413	+ </form>
2414	+
2415	+ <div style="margin-top: 5px;"><label>Apply above (changes):</label><br>
2416	+ <div class="buttonWrap" id="applyJSON">
2417	+ <input style="width: 100px;" type="button" value="Apply"
2418	+ onclick="jQuery.aZhSpotEd.applyJSON();" autocomplete="off">
2419	+ <?php
2420	+ if ($axzm_cms_mode)
2421	+ {
2422	+ ?>
2423	+ <input type="button" value="Save into database" id="btnSaveJSON" autocomplete="off">
2424	+
2425	+ <div id="dialog-saveJSON" title="" style="display: none;"></div>
2426	+
2427	+ <script type="text/javascript">
2428	+ jQuery('#btnSaveJSON')
2429	+ .click(function(e){
2430	+ e.preventDefault();
2431	+ jQuery('#saveWarningImg').remove();
2432	+ jQuery.ajax({
2433	+ method: 'POST',
2434	+ type: 'POST',
2435	+ url: '<?php echo $save_hotspot_json; ?>',
2436	+ data: {json: jQuery('#allHotspotsCode').val()},
2437	+ dataType: 'json',
2438	+ success: function( ret ) {
2439	+ if ( jQuery.isPlainObject(ret) && ret.status == 1 ) {
2440	+ jQuery( '#dialog-saveJSON' )
2441	+ .attr( 'title', 'JSON saved' )
2442	+ .html( '<p>Hotspots have been saved and should be visible in Front-End now!</p>' )
2443	+ .dialog( {
2444	+ modal: true,
2445	+ buttons: {
2446	+ Ok: function() {
2447	+ jQuery( this ).dialog( "close" );
2448	+ }
2449	+ }
2450	+ });
2451	+ }
2452	+ },
2453	+ error: function(jqXHR, textStatus, errorThrown){
2454	+ var Msg = '<p>The request to <br><?php echo $save_hotspot_json; ?><br><br>';
2455	+ Msg += 'returned <b>error '+jqXHR.status+'</b><br>('+jqXHR.statusText+')<br><br>';
2456	+ Msg += 'If you are not sure why, please contact AJAX-ZOOM support.</p>';
2457	+ jQuery('#dialog-saveJSON')
2458	+ .attr('title', '<span style="color: red">Error saving hotspots</span>')
2459	+ .html(Msg)
2460	+ .dialog( {
2461	+ modal: true,
2462	+ buttons: {
2463	+ Ok: function() {
2464	+ jQuery( this ).dialog( "close" );
2465	+ }
2466	+ }
2467	+ });
2468	+ }
2469	+ });
2470	+ });
2471	+ </script>
2472	+ <?php
2473	+ }
2474	+ ?>
2475	+ </div>
2476	+ <div class="buttonWrapNext">
2477	+ <input type="checkbox" value="1" id="keepDraggable" autocomplete="off"> - keep draggable (will not affect final JSON)
2478	+ </div>
2479	+ </div>
2480	+ <div style="height: 30px;"></div>
2481	+ </div>
2482	+ <?php
2483	+ if (!$axzm_cms_mode)
2484	+ {
2485	+ ?>
2486	+ </div>
2487	+ <?php
2488	+ }
2489	+ ?>
2490	+ <?php
2491	+ if (!$axzm_cms_mode)
2492	+ {
2493	+ ?>
2494	+ <div id="aZhS_save-2">
2495	+ <div class="legend">Save to JS file</div>
2496	+
2497	+ <div style="margin-top: 10px">
2498	+ <label>Password for saving:</label>
2499	+ <input type="password" id="jsFilePass" value="" autocomplete="off">
2500	+ (can be set inside '/axZm/saveHotspotJS.php')
2501	+ </div>
2502	+
2503	+ <div style="margin-top: 10px">
2504	+ <label>Keep formated:</label>
2505	+ <input type="checkbox" id="jsKeepFormated" value="1" autocomplete="off">
2506	+ - keep linebreaks, tab stops etc.
2507	+ </div>
2508	+
2509	+ <div style="margin-top: 10px">
2510	+ <label>Create backup:</label>
2511	+ <input type="checkbox" id="jsBackUp" value="1" autocomplete="off" checked>
2512	+ - creates backup of the current js file if present with a timestamp in file name (recommended)
2513	+ </div>
2514	+
2515	+ <div style="margin-top: 10px">
2516	+ <label>Import settings:</label>
2517	+ <input type="checkbox" id="jsAutoImport" autocomplete="off" value="1" checked>
2518	+ - instantly update / import JSON settings before saving
2519	+ </div>
2520	+
2521	+ <div style="margin-top: 10px">
2522	+ <label>Save hotspot settings to:</label>
2523	+ <input type="text" value="" id="jsFileName" style="width: 400px;" autocomplete="off">.js
2524	+ </div>
2525	+
2526	+ <div style="margin-top: 10px">
2527	+ <label> </label>
2528	+ <input style="width: 100px;" type="button" value="Save"
2529	+ onclick="jQuery.aZhSpotEd.saveJSONtoFile();" autocomplete="off">
2530	+ </div>
2531	+
2532	+ <div style="margin: 10px 0px;">
2533	+ <div id="hotspotSaveToJSresults"></div>
2534	+ </div>
2535	+
2536	+ <div class="azMsg clearfix">
2537	+ On default all files will be saved into "/pic/hotspotJS" folder.
2538	+ This saving path is adjustable directly in "/axZm/saveHotspotJS.php" file.
2539	+ Saving JSON data to a JavaScript file is one of the possibilities
2540	+ to initialize created hotspots with any other implementation / example
2541	+ over AJAX-ZOOM "onLoad" callback. See also under
2542	+ <a href="javascript: void(0)" class="linkShowTab"
2543	+ onclick="jQuery('#aZhS_tabs').tabs('select','#aZhS_tabs-8'); jQuery('#aZhS_about').tabs('select','#aZhS_about-2');">
2544	+ About -> Code example</a> tab.
2545	+ </div>
2546	+ </div>
2547	+ <?php
2548	+ }
2549	+ ?>
2550	+ <?php
2551	+ if (!$axzm_cms_mode)
2552	+ {
2553	+ ?>
2554	+ </div>
2555	+ <?php
2556	+ }
2557	+ ?>
2558	+ </div>
2559	+
2560	+ </div>
2561	+
2562	+ <div style="clear:both; margin: 5px 0px 5px 0px;"></div>
2563	+
2564	+ </div>
2565	+
2566	+ <!-- Init AJAX-ZOOM player -->
2567	+ <script type="text/javascript">
2568	+ // Create empty jQuery object
2569	+ window.ajaxZoom = {};
2570	+
2571	+ // The ID of the element where ajax-zoom has to be inserted into
2572	+ ajaxZoom.divID = "abc";
2573	+
2574	+ // Define the path to the axZm folder, adjust the path if needed!
2575	+ ajaxZoom.path = "<?php echo $axzm_path;?>";
2576	+
2577	+ // Define callbacks, for complete list check the docs
2578	+ // These callbacks are for this editor, see e.g. axample33_clean.php for code without hotspot editor code
2579	+ ajaxZoom.opt = {
2580	+ onLoad: function(){
2581	+ jQuery.axZm.spinReverse = false;
2582	+ // Load hotspots over this function... or just define jQuery.axZm.hotspots here and trigger jQuery.fn.axZm.initHotspots(); after this.
2583	+ jQuery.fn.axZm.loadHotspotsFromJsFile('<?php echo $first_load_hotspot_json; ?>', false, function(){
2584	+ // This is just for hotspot editor
2585	+ if (typeof jQuery.aZhSpotEd !== 'undefined' ){
2586	+ setTimeout(jQuery.aZhSpotEd.updateHotspotSelector, 200);
2587	+ var HotspotJsFile = jQuery.fn.axZm.getHotspotJsFile();
2588	+
2589	+ if (HotspotJsFile){
2590	+ HotspotJsFile = jQuery.aZhSpotEd.getf('.', jQuery.aZhSpotEd.getl('/', HotspotJsFile));
2591	+ jQuery('#jsFileName').val(HotspotJsFile);
2592	+ }
2593	+ }
2594	+ });
2595	+ }
2596	+ };
2597	+
2598	+ // Other callbacks for the editor
2599	+ jQuery.extend(true, ajaxZoom.opt, jQuery.aZhSpotEd.ajaxZoomHotspotEditorCallbacks);
2600	+
2601	+ // Define your custom parameter query string
2602	+ // example=hotSpotEdit has many presets for 360 images
2603	+ // 3dDir - best of all absolute path to the folder with 360/3D images
2604	+ // By defining the images to load with relative paths (zoomDir=, zoomData= or 3dDir=) may lead to not showing them under certain conditions.
2605	+ // A simple workaround is to always use absolute paths. Please avoid using relative paths on productive environments.
2606	+ ajaxZoom.parameter = "example=hotSpotEdit&<?php echo $first_load_par; ?>";
2607	+ ajaxZoom.parameter += "&cmsMode=<?php echo $axzm_cms_mode; ?>";
2608	+
2609	+ // this is only for responsive editor layout
2610	+ window.thisLayoutAdjusted = false;
2611	+
2612	+ var adjustThisLayout = function(){
2613	+ var winW = jQuery(window).innerWidth();
2614	+ var winH = jQuery(window).innerHeight();
2615	+
2616	+ if (jQuery.aZhSpotEd.playerResponsive){
2617	+ if (jQuery('#'+ajaxZoom.divID).height() + 150 > winH){
2618	+ jQuery('#playerInnerWrap').css('minHeight', winH - 150);
2619	+ jQuery('#'+ajaxZoom.divID).css('height', winH - 150)
2620	+ } else if (jQuery('#'+ajaxZoom.divID).height() < 720 && winH < 720 + 150){
2621	+ jQuery('#playerInnerWrap').css('minHeight', winH - 150);
2622	+ jQuery('#'+ajaxZoom.divID).height(winH - 150)
2623	+ } else if (720 + 150 <= winH){
2624	+ jQuery('#playerInnerWrap').css('minHeight', 720);
2625	+ jQuery('#'+ajaxZoom.divID).css('height', 720)
2626	+ }
2627	+ }
2628	+
2629	+ if (winW >= 1490){
2630	+ jQuery('#playerWrap').css({'float': 'left'});
2631	+ jQuery('#aZhS_tabs').css({'float': 'right', marginTop: 35, width: winW - 722 - 50});
2632	+ jQuery('#outerWrap').css({margin: '', width: '', paddingLeft: 10, paddingRight: 10});
2633	+ jQuery('#marginAfter').css({display: 'block'});
2634	+ window.thisLayoutAdjusted = true;
2635	+ }else{
2636	+ if (window.thisLayoutAdjusted){
2637	+ jQuery('#outerWrap').css({margin: '0 auto', width: 722, paddingLeft: '', paddingRight: ''});
2638	+ jQuery('#aZhS_tabs').css({'float': '', width: '', marginTop: 20});
2639	+ jQuery('#playerWrap').css({'float': ''});
2640	+ jQuery('#marginAfter').css({display: 'none'});
2641	+ //jQuery('#aZcomments').css({'float': 'left', width: 722})
2642	+ window.thisLayoutAdjusted = false;
2643	+ }
2644	+ }
2645	+ };
2646	+
2647	+ if (jQuery.aZhSpotEd.playerResponsive){
2648	+ window.fullScreenStartSplash = {'enable': false, 'className': false, 'opacity': 0.75};
2649	+ jQuery.fn.axZm.openFullScreen(ajaxZoom.path, ajaxZoom.parameter, ajaxZoom.opt, ajaxZoom.divID, false, true);
2650	+ } else {
2651	+ // Fire AJAX-ZOOM
2652	+ jQuery.fn.axZm.load({
2653	+ opt: ajaxZoom.opt,
2654	+ path: ajaxZoom.path,
2655	+ postMode: false,
2656	+ apiFullscreen: false,
2657	+ parameter: ajaxZoom.parameter,
2658	+ divID: ajaxZoom.divID
2659	+ });
2660	+ }
2661	+
2662	+ // Adjust layout
2663	+ adjustThisLayout();
2664	+
2665	+ jQuery(document).ready(function(){
2666	+ adjustThisLayout();
2667	+ setTimeout(adjustThisLayout, 1); // repeat once
2668	+ jQuery(window).bind('resize', adjustThisLayout);
2669	+ // Tabs can change document height
2670	+ jQuery('a[href^="#aZhS_"]').bind('click', adjustThisLayout);
2671	+ });
2672	+
2673	+ </script>
2674	+
2675	+ <!-- Hotspots - documentation -->
2676	+ <table id="docuTable" class="optionsTable" width="100%" style="display: none;">
2677	+ <tbody>
2678	+ <tr><th width="150" class='opth3'>Value</th>
2679	+ <th class='opth3'>Default</th>
2680	+ <th class='opth3'>Description</th>
2681	+ </tr>
2682	+
2683	+ <tr><td class='optdl' id='hsOpt_shape'>shape</td>
2684	+ <td class='optdm'>'point'</td>
2685	+ <td class='optdr'>
2686	+ Shape of the hotspot.
2687	+ Possible values "point" or "rect".
2688	+ Type: bool
2689	+ </td></tr>
2690	+
2691	+ <tr><td class='optdl' id='hsOpt_enabled'>enabled</td>
2692	+ <td class='optdm'>true</td>
2693	+ <td class='optdr'>
2694	+ State of defined hotspot.
2695	+ Possible values true and false.
2696	+ Type: bool
2697	+ </td></tr>
2698	+
2699	+ <tr><td class='optdl' id='hsOpt_width'>width</td>
2700	+ <td class='optdm'>32</td>
2701	+ <td class='optdr'>
2702	+ Width of the hotspot image, only applied if shape value is "point".
2703	+ Type: integer
2704	+ </td></tr>
2705	+
2706	+ <tr><td class='optdl' id='hsOpt_height'>height</td>
2707	+ <td class='optdm'>32</td>
2708	+ <td class='optdr'>
2709	+ Height of the hotspot image, only applied if shape value is "point".
2710	+ Type: integer
2711	+ </td></tr>
2712	+
2713	+ <tr><td class='optdl' id='hsOpt_gravity'>gravity</td>
2714	+ <td class='optdm'>'center'</td>
2715	+ <td class='optdr'>
2716	+ Hotspot gravity relative to its position.
2717	+ Possible values: 'center', 'topLeft', 'top', 'topRight', 'right',
2718	+ 'bottomRight', 'bottom', 'bottomLeft', 'left'.
2719	+ Only applied if shape value is "point". For landmarks set to "top"!
2720	+ Type: string
2721	+ </td></tr>
2722	+
2723	+ <tr><td class='optdl' id='hsOpt_offsetX'>offsetX</td>
2724	+ <td class='optdm'>0</td>
2725	+ <td class='optdr'>
2726	+ Adjustment of hotspots horizontal visual position.
2727	+ Only applied if shape value is "point".
2728	+ Type: integer
2729	+ </td></tr>
2730	+
2731	+ <tr><td class='optdl' id='hsOpt_offsetY'>offsetY</td>
2732	+ <td class='optdm'>0</td><td class='optdr'>
2733	+ Adjustment of hotspots vertical visual position.
2734	+ Only applied if shape value is "point".
2735	+ Type: integer
2736	+ </td></tr>
2737	+
2738	+ <tr><td class='optdl' id='hsOpt_padding'>padding</td>
2739	+ <td class='optdm'>0</td><td class='optdr'>
2740	+ Padding of the box with hotspot image and/or text.
2741	+ Type: integer
2742	+ </td></tr>
2743	+
2744	+ <tr><td class='optdl' id='hsOpt_opacity'>opacity</td>
2745	+ <td class='optdm'>1</td>
2746	+ <td class='optdr'>
2747	+ Default opacity, disabled in IE < 9;
2748	+ Type: float <= 1.0
2749	+ </td></tr>
2750	+
2751	+ <tr><td class='optdl' id='hsOpt_opacityOnHover'>opacityOnHover</td>
2752	+ <td class='optdm'>1</td>
2753	+ <td class='optdr'>
2754	+ Opacity on mouse hover, disabled in IE < 9;
2755	+ Type: float <= 1.0
2756	+ </td></tr>
2757	+
2758	+ <tr><td class='optdl' id='hsOpt_backColor'>backColor</td>
2759	+ <td class='optdm'>'none'</td>
2760	+ <td class='optdr'>
2761	+ Background color.
2762	+ Type: string
2763	+ </td></tr>
2764	+
2765	+ <tr><td class='optdl' id='hsOpt_zIndex'>zIndex</td>
2766	+ <td class='optdm'>1</td>
2767	+ <td class='optdr'>
2768	+ zIndex of the hotspot.
2769	+ Type: integer
2770	+ </td></tr>
2771	+
2772	+ <tr><td class='optdl' id='hsOpt_borderWidth'>borderWidth</td>
2773	+ <td class='optdm'>0</td>
2774	+ <td class='optdr'>
2775	+ CSS border width.
2776	+ Type: integer
2777	+ </td></tr>
2778	+
2779	+ <tr><td class='optdl' id='hsOpt_borderColor'>borderColor</td>
2780	+ <td class='optdm'>'red'</td>
2781	+ <td class='optdr'>
2782	+ CSS border color. Type: string
2783	+ </td></tr>
2784	+
2785	+ <tr><td class='optdl' id='hsOpt_borderStyle'>borderStyle</td>
2786	+ <td class='optdm'>'solid'</td>
2787	+ <td class='optdr'>
2788	+ CSS border style, e.g. 'none', 'hidden', 'dotted', 'dashed', 'solid',
2789	+ 'double', 'groove', 'ridge', 'inset', 'outset' or combinations of them.
2790	+ Type: string
2791	+ </td></tr>
2792	+
2793	+ <tr><td class='optdl' id='hsOpt_borderRadius'>borderRadius</td>
2794	+ <td class='optdm'>0</td>
2795	+ <td class='optdr'>
2796	+ CSS border radius
2797	+ Type: string
2798	+ </td></tr>
2799	+
2800	+ <tr><td class='optdl' id='hsOpt_cursor'>cursor</td>
2801	+ <td class='optdm'>'pointer'</td>
2802	+ <td class='optdr'>
2803	+ Mouse cursor.
2804	+ Type: string
2805	+ </td></tr>
2806	+
2807	+ <tr><td class='optdl' id='hsOpt_zoomRangeMin'>zoomRangeMin</td>
2808	+ <td class='optdm'>0</td>
2809	+ <td class='optdr'>
2810	+ Min zoom level for hotspot to be shown.
2811	+ Type: 0 <= integer <= 100
2812	+ </td></tr>
2813	+
2814	+ <tr><td class='optdl' id='hsOpt_zoomRangeMax'>zoomRangeMax</td>
2815	+ <td class='optdm'>100</td>
2816	+ <td class='optdr'>
2817	+ Max zoom level for hotspot to be shown.
2818	+ Type: 0 <= integer <= 100
2819	+ </td></tr>
2820	+
2821	+ <tr><td class='optdl' id='hsOpt_hotspotImage'>hotspotImage</td>
2822	+ <td class='optdm'>'hotspot64_green.png'</td>
2823	+ <td class='optdr'>
2824	+ PNG image for the hotspot located in /axZm/icons directory,
2825	+ only applied if shape value is "point".
2826	+ Image can be any absolute path with and without http.
2827	+ Type: string
2828	+ </td></tr>
2829	+
2830	+ <tr><td class='optdl' id='hsOpt_hotspotImageOnHover'>hotspotImageOnHover</td>
2831	+ <td class='optdm'>false</td>
2832	+ <td class='optdr'>
2833	+ PNG image for the hotspot on mouse hover, only applied if shape value is "point".
2834	+ Image can be any absolute path with and without http.
2835	+ Type: string
2836	+ </td></tr>
2837	+
2838	+ <tr><td class='optdl' id='hsOpt_hotspotClass'>hotspotClass</td>
2839	+ <td class='optdm'>false</td>
2840	+ <td class='optdr'>
2841	+ Instead of using png icons for hotspots you could also use CSS class,
2842	+ e.g. "<code>axZm_cssHotspot</code>" as an example. You could also use two CSS classes,
2843	+ e.g. "<code>axZm_cssHotspot axZm_pulse</code>" will result in a pulsing css hotspot.
2844	+ Type: string
2845	+ </td></tr>
2846	+
2847	+ <tr><td class='optdl' id='hsOpt_hotspotClassOnHover'>hotspotClassOnHover</td>
2848	+ <td class='optdm'>false</td>
2849	+ <td class='optdr'>
2850	+ Additional CSS class(es) added onmouseover.
2851	+ Type: string
2852	+ </td></tr>
2853	+
2854	+ <tr><td class='optdl' id='hsOpt_hotspotText'>hotspotText</td>
2855	+ <td class='optdm'>false</td>
2856	+ <td class='optdr'>
2857	+ Text puten direct over the hotspot image,
2858	+ can be for example a number if shape value is point;
2859	+ can be also HTML.
2860	+ Type: false or string
2861	+ </td></tr>
2862	+
2863	+ <tr><td class='optdl' id='hsOpt_hotspotTextFill'>hotspotTextFill</td>
2864	+ <td class='optdm'>false</td>
2865	+ <td class='optdr'>
2866	+ If shape value is "rect" the rectange does not capture mouse events like click.
2867	+ Setting this value to true will set the inner box to 100% height
2868	+ capturing all events except mousescroll for zooming.
2869	+ Any CSS can be overriden with hotspotTextCss option, see below.
2870	+ Type: bool
2871	+ </td></tr>
2872	+
2873	+ <tr><td class='optdl' id='hsOpt_hotspotTextClass'>hotspotTextClass</td>
2874	+ <td class='optdm'>false</td>
2875	+ <td class='optdr'>
2876	+ Additionally to CSS class ".axZmHotspotText" add on ther CSS class to hotspotText layer.
2877	+ Type: false or string
2878	+ </td></tr>
2879	+
2880	+ <tr><td class='optdl' id='hsOpt_hotspotTextCss'>hotspotTextCss</td>
2881	+ <td class='optdm'>{}</td>
2882	+ <td class='optdr'>
2883	+ Additionally to CSS class ".axZmHotspotText" CSS which is added to hotspotText layer.
2884	+ Type: object
2885	+ </td></tr>
2886	+
2887	+ <tr><td class='optdl' id='hsOpt_hotspotObjects'>hotspotObjects</td>
2888	+ <td class='optdm'>{}</td>
2889	+ <td class='optdr'>
2890	+ Any number of absolutely positioned layers directly inside the hotspot if shape value is "rect".
2891	+ Type: object
2892	+ </td></tr>
2893	+
2894	+ <tr><td class='optdl' id='hsOpt_altTitle'>altTitle</td>
2895	+ <td class='optdm'>false</td>
2896	+ <td class='optdr'>
2897	+ Show system like tootip by mousehover if main tooltip is triggered on click (toolTipEvent);
2898	+ CSS class: axZmHoverTooltip;
2899	+ Type: false or string
2900	+ </td></tr>
2901	+
2902	+ <tr><td class='optdl' id='hsOpt_altTitleClass'>altTitleClass</td>
2903	+ <td class='optdm'>false</td>
2904	+ <td class='optdr'>
2905	+ CSS class for altTitle instead of axZmHoverTooltip class.
2906	+ Type: false or string
2907	+ </td></tr>
2908	+
2909	+ <tr><td class='optdl' id='hsOpt_altTitleAdjustX'>altTitleAdjustX</td>
2910	+ <td class='optdm'>20</td>
2911	+ <td class='optdr'>
2912	+ Horizontal offset of the altTitle.
2913	+ Type: integer
2914	+ </td></tr>
2915	+
2916	+ <tr><td class='optdl' id='hsOpt_altTitleAdjustY'>altTitleAdjustY</td>
2917	+ <td class='optdm'>20</td>
2918	+ <td class='optdr'>
2919	+ Vertical offset of the altTitle.
2920	+ Type: integer
2921	+ </td></tr>
2922	+
2923	+ <tr><td class='optdl' id='hsOpt_labelTitle'>labelTitle</td>
2924	+ <td class='optdm'>false</td>
2925	+ <td class='optdr'>
2926	+ Sticky label (or tooltip) at any position near a hotspot, accepts HTML.
2927	+ Type: string
2928	+ </td></tr>
2929	+
2930	+ <tr><td class='optdl' id='hsOpt_labelGravity'>labelGravity</td>
2931	+ <td class='optdm'>'left'</td>
2932	+ <td class='optdr'>
2933	+ Label gravity, possible values:
2934	+ 'topLeft', 'topLeftFlag1', 'topLeftFlag2', 'top', 'topRight', 'topRightFlag1',
2935	+ 'topRightFlag2', 'right', 'rightTopFlag1', 'rightTopFlag2', 'rightBottomFlag1',
2936	+ 'rightBottomFlag2', 'bottomRight', 'bottomRightFlag1', 'bottomRightFlag2', 'bottom',
2937	+ 'bottomLeft', 'bottomLeftFlag1', 'bottomLeftFlag2', 'left', 'leftTopFlag1',
2938	+ 'leftTopFlag2', 'leftBottomFlag1', 'leftBottomFlag2', 'center'.
2939	+ Type: string
2940	+ </td></tr>
2941	+
2942	+ <tr><td class='optdl' id='hsOpt_labelBaseOffset'>labelBaseOffset</td>
2943	+ <td class='optdm'>5</td>
2944	+ <td class='optdr'>
2945	+ Auto offset in all directions.
2946	+ Type: integer
2947	+ </td></tr>
2948	+
2949	+ <tr><td class='optdl' id='hsOpt_labelOffsetX'>labelOffsetX</td>
2950	+ <td class='optdm'>0</td>
2951	+ <td class='optdr'>
2952	+ Horizontal offset.
2953	+ Type: integer
2954	+ </td></tr>
2955	+
2956	+ <tr><td class='optdl' id='hsOpt_labelOffsetY'>labelOffsetY</td>
2957	+ <td class='optdm'>0</td>
2958	+ <td class='optdr'>
2959	+ Vertical offset.
2960	+ Type: integer
2961	+ </td></tr>
2962	+
2963	+ <tr><td class='optdl' id='hsOpt_labelClass'>labelClass</td>
2964	+ <td class='optdm'>false</td>
2965	+ <td class='optdr'>
2966	+ CSS class instead of axZmHotspotLabel.
2967	+ Type: false or integer
2968	+ </td></tr>
2969	+
2970	+ <tr><td class='optdl' id='hsOpt_labelOpacity'>labelOpacity</td>
2971	+ <td class='optdm'>1</td>
2972	+ <td class='optdr'>
2973	+ Opacity level.
2974	+ Type: float <= 1.0
2975	+ </td></tr>
2976	+
2977	+ <tr><td class='optdl' id='hsOpt_labelIndPar'>labelIndPar</td>
2978	+ <td class='optdm'>{}</td>
2979	+ <td class='optdr'>
2980	+ Optinal parameters for label depending on frame number.
2981	+ Type: object
2982	+ </td></tr>
2983	+
2984	+ <tr><td class='optdl' id='hsOpt_labelLine'>labelLine</td>
2985	+ <td class='optdm'>1</td>
2986	+ <td class='optdr'>
2987	+ Thickness of the connecting line between the hotspot and sticky label.
2988	+ 0 disables the line.
2989	+ Type: integer
2990	+ </td></tr>
2991	+
2992	+ <tr><td class='optdl' id='hsOpt_labelLineColor'>labelLineColor</td>
2993	+ <td class='optdm'>'rgb(255, 0, 0)'</td>
2994	+ <td class='optdr'>
2995	+ Connecting line color.
2996	+ Type: string
2997	+ </td></tr>
2998	+
2999	+ <tr><td class='optdl' id='hsOpt_labelLinePoint'>labelLinePoint</td>
3000	+ <td class='optdm'>11</td>
3001	+ <td class='optdr'>
3002	+ Connecting point at the label.
3003	+ Possible values: 1 - 12;<br>
3004	+ 1-8: starting from top - left clockwise. <br>
3005	+ 9: middle. <br>
3006	+ 10: auto (1 - 8)<br>
3007	+ 11: auto - center (2, 4, 6, 8)<br>
3008	+ 12: auto - bottom corners (5, 7)<br>
3009	+ 13: auto - top corners (1, 3)<br>
3010	+ Type: string
3011	+ </td></tr>
3012	+
3013	+ <tr><td class='optdl' id='hsOpt_labelLineAdjust'>labelLineAdjust</td>
3014	+ <td class='optdm'>0</td>
3015	+ <td class='optdr'>
3016	+ Adjust length of connecting line manually. Negative values accepted.
3017	+ Type: float
3018	+ </td></tr>
3019	+
3020	+ <tr><td class='optdl' id='hsOpt_draftTitle'>draftTitle</td>
3021	+ <td class='optdm'>false</td>
3022	+ <td class='optdr'>
3023	+ "Draft label" content.
3024	+ Type: string, object
3025	+ </td></tr>
3026	+
3027	+ <tr><td class='optdl' id='hsOpt_draftPosLeft'>draftPosLeft</td>
3028	+ <td class='optdm'>20</td>
3029	+ <td class='optdr'>
3030	+ Left position of the "draft label" as % value.
3031	+ Type: float
3032	+ </td></tr>
3033	+
3034	+ <tr><td class='optdl' id='hsOpt_draftPosTop'>draftPosTop</td>
3035	+ <td class='optdm'>10</td>
3036	+ <td class='optdr'>
3037	+ Top position of the "draft label" as % value.
3038	+ Type: float
3039	+ </td></tr>
3040	+
3041	+ <tr><td class='optdl' id='hsOpt_draftGravity'>draftGravity</td>
3042	+ <td class='optdm'>'center'</td>
3043	+ <td class='optdr'>
3044	+ Label gravity, possible values:
3045	+ 'topLeft', 'topLeftFlag1', 'topLeftFlag2', 'top', 'topRight', 'topRightFlag1',
3046	+ 'topRightFlag2', 'right', 'rightTopFlag1', 'rightTopFlag2', 'rightBottomFlag1',
3047	+ 'rightBottomFlag2', 'bottomRight', 'bottomRightFlag1', 'bottomRightFlag2', 'bottom',
3048	+ 'bottomLeft', 'bottomLeftFlag1', 'bottomLeftFlag2', 'left', 'leftTopFlag1',
3049	+ 'leftTopFlag2', 'leftBottomFlag1', 'leftBottomFlag2', 'center'.
3050	+ Type: string
3051	+ </td></tr>
3052	+
3053	+ <tr><td class='optdl' id='hsOpt_draftOffsetX'>draftOffsetX</td>
3054	+ <td class='optdm'>0</td>
3055	+ <td class='optdr'>
3056	+ Horizontal label offset.
3057	+ Type: integer
3058	+ </td></tr>
3059	+
3060	+ <tr><td class='optdl' id='hsOpt_draftOffsetY'>draftOffsetY</td>
3061	+ <td class='optdm'>0</td>
3062	+ <td class='optdr'>
3063	+ Vertical label offset.
3064	+ Type: integer
3065	+ </td></tr>
3066	+
3067	+ <tr><td class='optdl' id='hsOpt_draftBorderColor'>draftBorderColor</td>
3068	+ <td class='optdm'>false</td>
3069	+ <td class='optdr'>
3070	+ Border color of the label. Overwrites css class color if defined.
3071	+ Type: string
3072	+ </td></tr>
3073	+
3074	+ <tr><td class='optdl' id='hsOpt_draftBackColor'>draftBackColor</td>
3075	+ <td class='optdm'>false</td>
3076	+ <td class='optdr'>
3077	+ Background color of the label. Overwrites css class color if defined.
3078	+ Type: string
3079	+ </td></tr>
3080	+
3081	+ <tr><td class='optdl' id='hsOpt_draftFontColor'>draftFontColor</td>
3082	+ <td class='optdm'>false</td>
3083	+ <td class='optdr'>
3084	+ Font color of the label. Overwrites css class color if defined.
3085	+ Type: string
3086	+ </td></tr>
3087	+
3088	+ <tr><td class='optdl' id='hsOpt_draftClass'>draftClass</td>
3089	+ <td class='optdm'>false</td>
3090	+ <td class='optdr'>
3091	+ Alternative CSS class for "draft label".
3092	+ Type: string
3093	+ </td></tr>
3094	+
3095	+ <tr><td class='optdl' id='hsOpt_draftTriggerClick'>draftTriggerClick</td>
3096	+ <td class='optdm'>false</td>
3097	+ <td class='optdr'>
3098	+ Trigger click event defined for the actual hotspot.
3099	+ Type: bool
3100	+ </td></tr>
3101	+
3102	+ <tr><td class='optdl' id='hsOpt_draftClick'>draftClick</td>
3103	+ <td class='optdm'>null</td>
3104	+ <td class='optdr'>
3105	+ Custom function for click event.
3106	+ Type: function
3107	+ </td></tr>
3108	+
3109	+ <tr><td class='optdl' id='hsOpt_draftIndPos'>draftIndPos</td>
3110	+ <td class='optdm'>{}</td>
3111	+ <td class='optdr'>
3112	+ Individual positions of the "draft label".
3113	+ Calculated and set by the editor but can be adapted for API if needed.
3114	+ Type: object
3115	+ </td></tr>
3116	+
3117	+ <tr><td class='optdl' id='hsOpt_draftLine'>draftLine</td>
3118	+ <td class='optdm'>1</td>
3119	+ <td class='optdr'>
3120	+ Width of the connection line between hotspot and the "draft label".
3121	+ Type: integer
3122	+ </td></tr>
3123	+
3124	+ <tr><td class='optdl' id='hsOpt_draftLineType'>draftLineType</td>
3125	+ <td class='optdm'>1</td>
3126	+ <td class='optdr'>
3127	+ Draft line type. Possible values: <br>
3128	+ 1. direct connection<br>
3129	+ 2. cornered connection out of two lines
3130	+ Type: integer
3131	+ </td></tr>
3132	+
3133	+ <tr><td class='optdl' id='hsOpt_draftLineT2c'>draftLineT2c</td>
3134	+ <td class='optdm'>1</td>
3135	+ <td class='optdr'>
3136	+ Connection type for the line if "draftLineType" is 2 (cornered connection).
3137	+ Possible values: <br>
3138	+ 1. Longest first <br>
3139	+ 2. Shortest first <br>
3140	+ 3. Horizontal first <br>
3141	+ 4. Vertical first <br>
3142	+ Type: integer
3143	+ </td></tr>
3144	+
3145	+ <tr><td class='optdl' id='hsOpt_draftLineT2s'>draftLineT2s</td>
3146	+ <td class='optdm'>'solid'</td>
3147	+ <td class='optdr'>
3148	+ Line style if "draftLineType" is 2 (cornered connection). Possible values: <br>
3149	+ 'solid', 'dashed' or 'dotted' <br>
3150	+ Type: string
3151	+ </td></tr>
3152	+
3153	+ <tr><td class='optdl' id='hsOpt_draftLineT2skew'>draftLineT2skew</td>
3154	+ <td class='optdm'>0</td>
3155	+ <td class='optdr'>
3156	+ Experimental. Line skew as degree value.
3157	+ Type: integer
3158	+ </td></tr>
3159	+
3160	+ <tr><td class='optdl' id='hsOpt_draftLineColor'>draftLineColor</td>
3161	+ <td class='optdm'>'rgb(255, 0, 0)'</td>
3162	+ <td class='optdr'>
3163	+ Color of the "draft line".
3164	+ Type: string
3165	+ </td></tr>
3166	+
3167	+ <tr><td class='optdl' id='hsOpt_draftLineClass'>draftLineClass</td>
3168	+ <td class='optdm'>false</td>
3169	+ <td class='optdr'>
3170	+ Connecting line additional CSS class.
3171	+ Type: string
3172	+ </td></tr>
3173	+
3174	+ <tr><td class='optdl' id='hsOpt_toolTipTitle'>toolTipTitle</td>
3175	+ <td class='optdm'>false</td>
3176	+ <td class='optdr'>
3177	+ Title shown in the tooltip; value can be also a function which returns a string or HTML;
3178	+ in case the value is a function the first parameter passed to it
3179	+ is an object with all configs of this hotspot including name.
3180	+ Type: false, string or function
3181	+ </td></tr>
3182	+
3183	+ <tr><td class='optdl' id='hsOpt_toolTipHtml'>toolTipHtml</td>
3184	+ <td class='optdm'>false</td>
3185	+ <td class='optdr'>
3186	+ Text or html inside tooltip, as idea it can be also iframe,
3187	+ e.g. <code><iframe src="http://www.ebay.de" scrolling="no" width="100%"
3188	+ height="100%" frameborder="0"></iframe></code>
3189	+ value can be also a function which returns a string or HTML;
3190	+ in case the value is a function the first parameter passed to it is an object
3191	+ with all configs of this hotspot including name.
3192	+ Type: false, string or function
3193	+ </td></tr>
3194	+
3195	+ <tr><td class='optdl' id='hsOpt_toolTipAjaxUrl'>toolTipAjaxUrl</td>
3196	+ <td class='optdm'>false</td>
3197	+ <td class='optdr'>
3198	+ Url for toolTipHtml get from AJAX request (not cross site,
3199	+ for cross site use an iframe inside toolTipHtml);
3200	+ Type: false or string
3201	+ </td></tr>
3202	+
3203	+ <tr><td class='optdl' id='hsOpt_toolTipWidth'>toolTipWidth</td>
3204	+ <td class='optdm'>250</td>
3205	+ <td class='optdr'>
3206	+ Width of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen!
3207	+ Type: integer
3208	+ </td></tr>
3209	+
3210	+ <tr><td class='optdl' id='hsOpt_toolTipHeight'>toolTipHeight</td>
3211	+ <td class='optdm'>120</td>
3212	+ <td class='optdr'>
3213	+ Min height of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen!
3214	+ Type: integer
3215	+ </td></tr>
3216	+
3217	+ <tr><td class='optdl' id='hsOpt_toolTipGravity'>toolTipGravity</td>
3218	+ <td class='optdm'>'hover'</td>
3219	+ <td class='optdr'>
3220	+ Tooltip gravity, possible values:
3221	+ 'hover', 'fullsize', 'fullscreen', 'topLeft', 'top', 'topRight', 'right',
3222	+ 'bottomRight', 'bottom', 'bottomLeft', 'left'.
3223	+ The difference between 'fullsize' and 'fullscreen' is that 'fullsize'
3224	+ refers to players dimensions, whereas 'fullscreen' to window size.
3225	+ Type: string
3226	+ </td></tr>
3227	+
3228	+ <tr><td class='optdl' id='hsOpt_toolTipGravFixed'>toolTipGravFixed</td>
3229	+ <td class='optdm'>false</td>
3230	+ <td class='optdr'>
3231	+ Applies fixed position to toolTipGravity except 'fullsize', 'hover' turns into centered position.
3232	+ Type: bool
3233	+ </td></tr>
3234	+
3235	+ <tr><td class='optdl' id='hsOpt_toolTipFullSizeOffset'>toolTipFullSizeOffset</td>
3236	+ <td class='optdm'>40</td>
3237	+ <td class='optdr'>
3238	+ toolTipGravity fullsize uses maximal available player / window width and height.
3239	+ This is the margin to the edges if e.g. toolTipGravity is 'fullscreen', 'fullsize'
3240	+ or toolTipGravFixed option is set to true, so the fixed position is relative to the player size.
3241	+ Type: integer
3242	+ </td></tr>
3243	+
3244	+ <tr><td class='optdl' id='hsOpt_toolTipTitleCustomClass'>toolTipTitleCustomClass</td>
3245	+ <td class='optdm'>false</td>
3246	+ <td class='optdr'>
3247	+ Use specific classname instead of axZmToolTipTitle.
3248	+ Type: false or string
3249	+ </td></tr>
3250	+
3251	+ <tr><td class='optdl' id='hsOpt_toolTipCustomClass'>toolTipCustomClass</td>
3252	+ <td class='optdm'>false</td>
3253	+ <td class='optdr'>
3254	+ Use specific classname instead of axZmToolTipInner.
3255	+ Type: false or string
3256	+ </td></tr>
3257	+
3258	+ <tr><td class='optdl' id='hsOpt_toolTipAdjustX'>toolTipAdjustX</td>
3259	+ <td class='optdm'>10</td>
3260	+ <td class='optdr'>
3261	+ Horizontal offset.
3262	+ Type: integer
3263	+ </td></tr>
3264	+
3265	+ <tr><td class='optdl' id='hsOpt_toolTipAdjustY'>toolTipAdjustY</td>
3266	+ <td class='optdm'>10</td>
3267	+ <td class='optdr'>
3268	+ Vertical offset;
3269	+ Type: integer
3270	+ </td></tr>
3271	+
3272	+ <tr><td class='optdl' id='hsOpt_toolTipAutoFlip'>toolTipAutoFlip</td>
3273	+ <td class='optdm'>true</td>
3274	+ <td class='optdr'>
3275	+ Flip tooltip horizontaly / vertically depending on best fit.
3276	+ Type: bool
3277	+ </td></tr>
3278	+
3279	+ <tr><td class='optdl' id='hsOpt_toolTipOpacity'>toolTipOpacity</td>
3280	+ <td class='optdm'>1.0</td>
3281	+ <td class='optdr'>
3282	+ Opacity of the tooltip.
3283	+ Type: float <= 1.0
3284	+ </td></tr>
3285	+
3286	+ <tr><td class='optdl' id='hsOpt_toolTipFade'>toolTipFade</td>
3287	+ <td class='optdm'>false</td>
3288	+ <td class='optdr'>
3289	+ Fade tooltip time in ms.
3290	+ Type: false or integer
3291	+ </td></tr>
3292	+
3293	+ <tr><td class='optdl' id='hsOpt_toolTipEvent'>toolTipEvent</td>
3294	+ <td class='optdm'>'click'</td>
3295	+ <td class='optdr'>
3296	+ 'mouseover' or 'click', defaults to 'click' on touch devices.
3297	+ Type: string
3298	+ </td></tr>
3299	+
3300	+ <tr><td class='optdl' id='hsOpt_toolTipEvent'>toolTipClickClose</td>
3301	+ <td class='optdm'>true</td>
3302	+ <td class='optdr'>
3303	+ When clicked on the hotspot with already opened toolTip from the same hotspot, the toolTip will be closed.
3304	+ Type: bool
3305	+ </td></tr>
3306	+
3307	+ <tr><td class='optdl' id='hsOpt_toolTipHideTimout'>toolTipHideTimout</td>
3308	+ <td class='optdm'>1000</td>
3309	+ <td class='optdr'>
3310	+ If toolTipEvent is 'mouseover' this setting allows to move the cursor to the tooltip within this time.
3311	+ Type: integer
3312	+ </td></tr>
3313	+
3314	+ <tr><td class='optdl' id='hsOpt_toolTipDraggable'>toolTipDraggable</td>
3315	+ <td class='optdm'>true</td>
3316	+ <td class='optdr'>
3317	+ Set tooltip to be draggable.
3318	+ toolTipTitle has to be defined because this is the handle, can be an empty div.
3319	+ Type: bool
3320	+ </td></tr>
3321	+
3322	+ <tr><td class='optdl' id='hsOpt_toolTipCloseIcon'>toolTipCloseIcon</td>
3323	+ <td class='optdm'>'fancy_closebox.png'</td>
3324	+ <td class='optdr'>
3325	+ PNG image for close button located in /axZm/icons directory.
3326	+ Shown if toolTipEvent is 'click' and touch devices. Can be absolute image path, also with http;
3327	+ Type: string
3328	+ </td></tr>
3329	+
3330	+ <tr><td class='optdl' id='hsOpt_toolTipCloseIconPosition'>toolTipCloseIconPosition</td>
3331	+ <td class='optdm'>'topRight'</td>
3332	+ <td class='optdr'>
3333	+ Position of the close icon, possible values are: 'topLeft', 'topRight', 'bottomRight' and 'bottomLeft'.
3334	+ Type: string
3335	+ </td></tr>
3336	+
3337	+ <tr><td class='optdl' id='hsOpt_toolTipCloseIconOffset'>toolTipCloseIconOffset</td>
3338	+ <td class='optdm'>false</td>
3339	+ <td class='optdr'>
3340	+ Offset / position of the close button icon.
3341	+ If false the offset is set instantly.
3342	+ An integer sets depending on toolTipCloseIconPosition - top, bottom or left, right position to this number.
3343	+ If object, e.g. <code>{"right": 20, "top": 0}</code> toolTipCloseIconPosition is ignored.
3344	+ Type: false, integer or object
3345	+ </td></tr>
3346	+
3347	+ <tr><td class='optdl' id='hsOpt_toolTipCloseIconMouseOver'>toolTipCloseIconMouseOver</td>
3348	+ <td class='optdm'>false</td>
3349	+ <td class='optdr'>
3350	+ Show close button also if toolTipEvent is 'mouseover'.
3351	+ Type: bool
3352	+ </td></tr>
3353	+
3354	+ <tr><td class='optdl' id='hsOpt_toolTipOverlayShow'>toolTipOverlayShow</td>
3355	+ <td class='optdm'>false</td>
3356	+ <td class='optdr'>
3357	+ Show overlay when tooltip window pops up.
3358	+ Type: bool
3359	+ </td></tr>
3360	+
3361	+ <tr><td class='optdl' id='hsOpt_toolTipOverlayOpacity'>toolTipOverlayOpacity</td>
3362	+ <td class='optdm'>0.75</td>
3363	+ <td class='optdr'>
3364	+ Overlay opacity.
3365	+ Type: float <= 1.0
3366	+ </td></tr>
3367	+
3368	+ <tr><td class='optdl' id='hsOpt_toolTipOverlayColor'>toolTipOverlayColor</td>
3369	+ <td class='optdm'>'#000000'</td>
3370	+ <td class='optdr'>
3371	+ Overlay color.
3372	+ Type: string
3373	+ </td></tr>
3374	+
3375	+ <tr><td class='optdl' id='hsOpt_toolTipOverlayClickClose'>toolTipOverlayClickClose</td>
3376	+ <td class='optdm'>false</td>
3377	+ <td class='optdr'>
3378	+ Close tooltip by clicking on the overlay.
3379	+ Type: bool
3380	+ </td></tr>
3381	+
3382	+ <tr><td class='optdl' id='hsOpt_expTitle'>expTitle</td>
3383	+ <td class='optdm'>false</td>
3384	+ <td class='optdr'>
3385	+ Title for the expandable overlay.
3386	+ Type: string
3387	+ </td></tr>
3388	+
3389	+ <tr><td class='optdl' id='hsOpt_expHtml'>expHtml</td>
3390	+ <td class='optdm'>false</td>
3391	+ <td class='optdr'>
3392	+ Besides HTML or your text you could also load external content in iframe!
3393	+ The prefix for the source is "iframe:"
3394	+ e.g. to load an external page simply put something like this in the descripion:
3395	+ "iframe://www.some-domain.com/123.html"
3396	+ To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code):
3397	+ "iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage"
3398	+ To load some dynamic content over AJAX use "ajax:" as prefix, e.g.
3399	+ "<code>ajax:/test/some_content_data.php?req=123</code>".
3400	+ Type: string
3401	+ </td></tr>
3402	+
3403	+ <tr><td class='optdl' id='hsOpt_expFullscreen'>expFullscreen</td>
3404	+ <td class='optdm'>false</td>
3405	+ <td class='optdr'>
3406	+ If true, the overlay will open at fullscreen (window).
3407	+ Type: bool
3408	+ </td></tr>
3409	+
3410	+ <tr><td class='optdl' id='hsOpt_href'>href</td>
3411	+ <td class='optdm'>false</td>
3412	+ <td class='optdr'>
3413	+ Simple link for the hotspot.
3414	+ Type: string
3415	+ </td></tr>
3416	+
3417	+ <tr><td class='optdl' id='hsOpt_hrefTarget'>hrefTarget</td>
3418	+ <td class='optdm'>'_blank'</td>
3419	+ <td class='optdr'>
3420	+ Target for href (simple link), possible values:
3421	+ _blank (new window), anything else is same window.
3422	+ Type: string
3423	+ </td></tr>
3424	+
3425	+ <tr><td class='optdl' id='hsOpt_click'>click</td>
3426	+ <td class='optdm'>null</td>
3427	+ <td class='optdr'>
3428	+ Your custom click event function, e.g. simple fancybox gallery:
3429	+
3430	+ <pre style="tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4;">
3431	+ jQuery.fancybox(
3432	+ [{
3433	+ 'href': '/path/some/image1.jpg',
3434	+ 'title': 'Description 1 image'
3435	+ },{
3436	+ 'href': '/path/other/image2.jpg',
3437	+ 'title': 'Description 2 image'
3438	+ }], {
3439	+ 'padding': 0,
3440	+ 'transitionIn': 'none',
3441	+ 'transitionOut': 'none',
3442	+ 'type': 'image',
3443	+ 'titlePosition': 'over',
3444	+ 'changeFade': 0
3445	+ });
3446	+ </pre>
3447	+ AJAX-ZOOM does not require fancybox,
3448	+ so fancybox JavaScripts and CSS files need to be included in the document.
3449	+ The above code is just an example of a lightbox usage;
3450	+ it can be any other lightbox where you could define images to be displayed in a similar way.
3451	+ Please note that toolTip* options e.g.
3452	+ toolTipHtml would produce a popup which looks similar to fancybox,
3453	+ but they do not require fancybox JavaScript and CSS files.
3454	+ Type: function
3455	+ </td></tr>
3456	+
3457	+ <tr><td class='optdl' id='hsOpt_onRender'>onRender</td>
3458	+ <td class='optdm'>null</td>
3459	+ <td class='optdr'>
3460	+ Your custom function when a particlar hotspot is added to the DOM;
3461	+ receives name of the hotspot as argument.
3462	+ Type: function
3463	+ </td></tr>
3464	+
3465	+ <tr><td class='optdl' id='hsOpt_mouseover'>mouseover</td>
3466	+ <td class='optdm'>null</td>
3467	+ <td class='optdr'>
3468	+ Your custom mouseover event function.
3469	+ Type: function
3470	+ </td></tr>
3471	+
3472	+ <tr><td class='optdl' id='hsOpt_mouseout'>mouseout</td>
3473	+ <td class='optdm'>null</td>
3474	+ <td class='optdr'>
3475	+ Your custom mouseout event function.
3476	+ Type: function
3477	+ </td></tr>
3478	+
3479	+ <tr><td class='optdl' id='hsOpt_mouseenter'>mouseenter</td>
3480	+ <td class='optdm'>null</td>
3481	+ <td class='optdr'>
3482	+ Your custom mouseenter event function.
3483	+ Type: function
3484	+ </td></tr>
3485	+
3486	+ <tr><td class='optdl' id='hsOpt_mouseleave'>mouseleave</td>
3487	+ <td class='optdm'>null</td>
3488	+ <td class='optdr'>
3489	+ Your custom mouseleave event function.
3490	+ Type: function
3491	+ </td></tr>
3492	+
3493	+ <tr><td class='optdl' id='hsOpt_mousedown'>mousedown</td>
3494	+ <td class='optdm'>null</td>
3495	+ <td class='optdr'>
3496	+ Your custom mousedown event function.
3497	+ Type: function
3498	+ </td></tr>
3499	+
3500	+ <tr><td class='optdl' id='hsOpt_mouseup'>mouseup</td>
3501	+ <td class='optdm'>null</td>
3502	+ <td class='optdr'>
3503	+ Your custom mouseup event function.
3504	+ Type: function
3505	+ </td></tr>
3506	+
3507	+ <tr><td class='optdl' id='hsOpt_onRender'>onRender</td>
3508	+ <td class='optdm'>null</td>
3509	+ <td class='optdr'>
3510	+ Function executed when hotspot is rendered to the screen.
3511	+ Type: function
3512	+ </td></tr>
3513	+
3514	+ <tr><td class='optdl' id='hsOpt_position'>position</td>
3515	+ <td class='optdm'>{}</td>
3516	+ <td class='optdr'>
3517	+ position is a JS object with the positions of a particular hotspot, e.g.<br>
3518	+ <pre style="tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4;">
3519	+ position: {
3520	+ 1: {left: 1500,
3521	+ top: 720
3522	+ },
3523	+ 3: {left: 660,
3524	+ top: 710
3525	+ },
3526	+ 4: {left: 760,
3527	+ top: 510
3528	+ }
3529	+ }
3530	+ </pre>
3531	+ The keys (1,2,3 ...) can be numbers (starting from 1, not 0) or filenames of particular frames.
3532	+ In case a key is omited the hotspot will not be shown in that particular frame.
3533	+ <br><br>
3534	+ If shape value is 'rect' each value of position object needs to have 'width' and 'height', e.g.
3535	+ <pre style="tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4;">
3536	+ position: {
3537	+ 1: {left: 300,
3538	+ top: 720,
3539	+ width: 300,
3540	+ height: 300
3541	+ },
3542	+ 3: {left: 660,
3543	+ top: 710,
3544	+ width: 200,
3545	+ height: 350
3546	+ },
3547	+ 4: {left: 760,
3548	+ top: 510,
3549	+ width: 700,
3550	+ height: 220
3551	+ }
3552	+ }
3553	+ </pre>
3554	+ The 'left', 'top', 'width' and 'height' values can be pixel values
3555	+ <b>related to original size of the image</b>
3556	+ or percentage values
3557	+ (e.g. left: '45.75%', top: '37.3%').
3558	+ </td></tr>
3559	+
3560	+ </tbody>
3561	+ </table>
3562	+
3563	+ <script type="text/javascript" id="hs_docu_js">
3564	+ if (window.jQuery){
3565	+ jQuery('.optionsTable:not(.methods) td:nth-child(2)')
3566	+ .each(function(){
3567	+ var txt = jQuery.trim(jQuery(this).html());
3568	+ if (txt == 'false' \|\| txt == 'true'){
3569	+ jQuery(this).html('<span style="color: green">'+txt+'</span>');
3570	+ } else if (txt == 'null') {
3571	+ jQuery(this).html('<span style="color: blue">'+txt+'</span>');
3572	+ }
3573	+ else if (txt == 'function'){
3574	+ jQuery(this).html('<span style="color: #003c00">'+txt+'</span>');
3575	+ }
3576	+ else if (txt.charAt(0) != '\'' && txt.charAt(0) != '{' && txt.charAt(0) != '['){
3577	+ jQuery(this).html('<span style="color: red">'+txt+'</span>');
3578	+ }
3579	+ });
3580	+
3581	+ jQuery('.optionsTable:not(.sub) td:nth-child(1)').each(function(){
3582	+ var txt = jQuery.trim(jQuery(this).html());
3583	+ if (txt){jQuery(this).parent().attr('id', 'pOpt_'+txt);}
3584	+ });
3585	+
3586	+ if (window.optionsHeader){
3587	+ jQuery('<div class="optionsHeader">'+window.optionsHeader+'</div>')
3588	+ .insertBefore('.optionsTable:eq(0)');
3589	+ }
3590	+ if (window.optionsText){
3591	+ jQuery('<p class="optionsText">'+window.optionsText+'</p>')
3592	+ .insertBefore('.optionsTable:eq(0)');
3593	+ }
3594	+ }
3595	+ </script>
3596	+ <?php
3597	+ if (!$axzm_tpl_mode)
3598	+ {
3599	+ ?>
3600	+ </body>
3601	+ </html>
3602	+ <?php
3603	+ }
3604	+ ?>

js/axzoom/preview/preview.php CHANGED Viewed

	@@ -64,7 +64,7 @@ if (strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")){
64	p {text-align: justify; text-justify: newspaper;}
65	</style>
66
67	- <script src="~~http://ajax.googleapis.com~~/~~ajax~~/~~libs/~~jquery/1.8.3~~/jquery~~.min.js"></script>
68	<link rel="stylesheet" type="text/css" href="../axZm/axZm.css" media="all" />
69	<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
70	</head>


64	p {text-align: justify; text-justify: newspaper;}
65	</style>
66
67	+ <script src="../axZm/plugins/jquery-1.8.3.min.js"></script>
68	<link rel="stylesheet" type="text/css" href="../axZm/axZm.css" media="all" />
69	<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
70	</head>

package.xml CHANGED Viewed

	@@ -1,18 +1,18 @@
1	<?xml version="1.0"?>
2	<package>
3	<name>AJAX_ZOOM</name>
4	- <version>1.2.2</version>
5	<stability>stable</stability>
6	<license uri="http://www.ajax-zoom.com/index.php?cid=download">Commercial, demoware</license>
7	<channel>community</channel>
8	<extends/>
9	<summary>Responsive product detail view mousehover zoom extension with optional 360° spins or multilevel 3D</summary>
10	<description>Responsive, jQuery based mouse over zoom for viewing high resolution product images and optionally 360° spins or multilevel 3D. Image pyramid / tiles view in responsive Fancybox or full screen on click. Upload or import 360° images over admin interface. Optional responsive thumbnails slider integration. Instant (on-the-fly) generation of all thumbnails. Works great on touch-enabled devices. Free to download, install and test.</description>
11	- <notes>~~Fixed~~ ~~table~~ ~~prefix~~ ~~issue~~</notes>
12	<authors><author><name>AJAX-ZOOM</name><user>vadus</user><email>support@ajax-zoom.com</email></author></authors>
13	- <date>2016-08-03</date>
14	- <time>13:19:03</time>
15	- <contents><target name="magelocal"><dir><dir name="Ax"><dir><dir name="Zoom"><dir name="Block"><dir name="Adminhtml"><dir name="System"><dir name="Config"><dir name="Fieldset"><file name="License.php" hash="66127902dffd0fd9a530057907733d46"/></dir></dir></dir><dir name="Tabs"><file name="Tabid.php" hash="e1c649d4992cc73a6601c129677df806"/></dir><file name="Tabs.php" hash="0239c3a73cdeb05fab451a3219bea07f"/></dir></dir><dir name="Helper"><file name="Data.php" hash="0f05da01383c450e5abb331f06bd3304"/><file name="Head.php" hash="8803a48e89902a3deec90a2145523830"/></dir><dir name="Model"><file name="Ax360.php" hash="~~72963127156dd97c4be7db4fabf74d43~~"/><file name="Ax360set.php" hash="57c4e9979d8ae6ee709921718060d151"/><file name="Axproducts.php" hash="9e6449b0229d6c83497094bed536f5f9"/><file name="Galleryposition.php" hash="9d8812051417db9e39c4c5a1412deb81"/><file name="Observer.php" hash="bfcd571e1e0fd7f80176d733e0fa2075"/><file name="Position.php" hash="4df583defefa6a8a4302b3b06846a38c"/><file name="Position4.php" hash="d5b23c5a5cc98abd4b1ed45e0b829298"/><dir name="Resource"><dir name="Ax360"><file name="Collection.php" hash="95ab28070ce834f8176c5457b2f920e8"/></dir><file name="Ax360.php" hash="ca8ac71cf2b5dc3e5660946122c22e12"/><dir name="Ax360set"><file name="Collection.php" hash="448603fb57c42f09bd5e044214ff6bee"/></dir><file name="Ax360set.php" hash="52cd74b4bd994d6812db71f8ece455a1"/><dir name="Axproducts"><file name="Collection.php" hash="89e23ff705c2c4c8de3a2b5eb617deda"/></dir><file name="Axproducts.php" hash="7ec4b5dc2f19cc440a7dd3e440eaa8d1"/></dir><file name="Words.php" hash="a246e42282ccd636a38873ea3ca70237"/><file name="Yesno.php" hash="71b1887dcb4161688c7d9f64e245ec1c"/></dir><dir name="controllers"><file name="AxzoomController.php" hash="~~f89af7b227fa26d89ab1d3b5f65e0f60~~"/></dir><dir name="etc"><file name="config.xml" hash="~~537ff8dce622ede95e6e1df899fc5dab~~"/><file name="system.xml" hash="~~07d3b73adb21420d24dd48f8b4bcf3a5~~"/></dir><dir name="sql"><dir name="axzoom_setup"><file name="install-0.0.1.php" hash="4a33be2f925ed44bef6cbe5674c959a6"/></dir></dir></dir></dir></dir></dir></target><target name="magedesign"><dir><dir name="adminhtml"><dir name="default"><dir name="default"><dir name="layout"><file name="axzoom.xml" hash="9987ad3d3421b896101314e336b3fe7f"/></dir><dir name="template"><dir name="axzoom"><file name="tab.phtml" hash="5dab2ed3a1d1358f5d8acf2385bdc134"/><file name="tab360-sets.phtml" hash="~~cdb3f6e72730d27b2cbfe1c35ded6641~~"/><file name="tab360-settings.phtml" hash="4149220ce003f75f19938ac0dcc5d52e"/><file name="tab360.phtml" hash="9fd8e285234c5698d3000b6271cf5e5f"/><file name="uploader.phtml" hash="ee293453776e3d9862bd3c5cf03be13e"/></dir></dir></dir></dir></dir><dir name="frontend"><dir name="base"><dir name="default"><dir name="layout"><file name="axzoom.xml" hash="46f90ee9227387c6e0df207d9e75aed7"/></dir><dir name="template"><dir name="ax_zoom"><dir><dir name="catalog"><dir name="product"><dir name="view"><file name="media.phtml" hash="~~cdbf8049e503797b779eab7bcee61443~~"/></dir></dir></dir></dir></dir></dir></dir></dir></dir></dir></target><target name="mageetc"><dir><dir name="modules"><file name="Ax_Zoom.xml" hash="b3ca0f170cfea52154fac0d92fc8390e"/></dir></dir></target><target name="magelocale"><dir><dir name="ru_RU"><file name="Ax_Zoom.csv" hash="ad9b1e1ad87a1187dbd076b43af97429"/></dir></dir></target><target name="mageweb"><dir><dir name="js"><dir name="axzoom"><file name="check_fallback.js" hash="23a0cf74d487426d7124209136608d69"/><file name="check_jquery.js" hash="e6a9ffca4d09e86a4b795c63b8732fc3"/><file name="check_jquery_admin.js" hash="6b9d9517795bb2cf8e63bad60cea7a48"/><file name="image_path.gif" hash="bf922e182e18a02613f26ca5eaa4c560"/><file name="jquery-1.11.3.min.js" hash="1c1e3d814cc7278f801463874463e504"/><file name="jquery-migrate-1.2.1.min.js" hash="eb05d8d73b5b13d8d84308a4751ece96"/><file name="jquery.fileupload-process.js" hash="0da6f8ef76956f6ce7842dcf8941d1fa"/><file name="jquery.fileupload-validate.js" hash="561d450d59e39724999629cae64cd80e"/><file name="jquery.fileupload.js" hash="d4b3a5c4f6e69185727cfe98f17f0239"/><file name="jquery.livequery.htc" hash="6fddf8d185aa26ca790c9f435fee8bad"/><file name="jquery.livequery.min.js" hash="295403b41c10cc54df7c580e269088ca"/><file name="jquery.ui.widget.min.js" hash="2425a542e6dde093dd85ac0b5adc0141"/><file name="lic.php" hash="284821bf8557dfaa6a3c07d85ddfc13d"/><file name="no_image-100x100.jpg" hash="ebbaa789d1a5e5b1bb6fdb9ccd683aa2"/><dir><dir name="pic"><file name="readme.txt" hash="763fdb72282a84d27d9a6c93e014775a"/></dir><dir name="preview"><file name="cropeditor.php" hash="~~41c8c7469a6be545fc43af154f4ceb9c~~"/><file name="index.php" hash="c304cfb13785e145e95d5f21cc95bd12"/><file name="preview.php" hash="~~c3e25a397b2fa733945611a9afc17d3d~~"/></dir><dir name="tmp"><file name="readme.txt" hash="b17a61b9642c5d472107ab7023c5c880"/></dir><dir name="zip"><file name="readme.txt" hash="2134ad018dd3da577df745a04d22899f"/><file name=".htaccess" hash="209634bb0238704c4874c35d615ae59e"/></dir></dir><file name="zoomConfigCustomAZ.inc.php" hash="b120374793d953ae1bfb49accc3e4733"/></dir></dir></dir></target></contents>
16	<compatible/>
17	<dependencies><required><php><min>5.2.1</min><max>5.7.99</max></php><extension><name>ionCube Loader</name><min/><max/></extension><extension><name>zip</name><min/><max/></extension></required></dependencies>
18	</package>


1	<?xml version="1.0"?>
2	<package>
3	<name>AJAX_ZOOM</name>
4	+ <version>1.2.3</version>
5	<stability>stable</stability>
6	<license uri="http://www.ajax-zoom.com/index.php?cid=download">Commercial, demoware</license>
7	<channel>community</channel>
8	<extends/>
9	<summary>Responsive product detail view mousehover zoom extension with optional 360° spins or multilevel 3D</summary>
10	<description>Responsive, jQuery based mouse over zoom for viewing high resolution product images and optionally 360° spins or multilevel 3D. Image pyramid / tiles view in responsive Fancybox or full screen on click. Upload or import 360° images over admin interface. Optional responsive thumbnails slider integration. Instant (on-the-fly) generation of all thumbnails. Works great on touch-enabled devices. Free to download, install and test.</description>
11	+ <notes>Added visual hotspot editor, few other changes</notes>
12	<authors><author><name>AJAX-ZOOM</name><user>vadus</user><email>support@ajax-zoom.com</email></author></authors>
13	+ <date>2016-08-12</date>
14	+ <time>21:25:51</time>
15	+ <contents><target name="magelocal"><dir><dir name="Ax"><dir><dir name="Zoom"><dir name="Block"><dir name="Adminhtml"><dir name="System"><dir name="Config"><dir name="Fieldset"><file name="License.php" hash="66127902dffd0fd9a530057907733d46"/></dir></dir></dir><dir name="Tabs"><file name="Tabid.php" hash="e1c649d4992cc73a6601c129677df806"/></dir><file name="Tabs.php" hash="0239c3a73cdeb05fab451a3219bea07f"/></dir></dir><dir name="Helper"><file name="Data.php" hash="0f05da01383c450e5abb331f06bd3304"/><file name="Head.php" hash="8803a48e89902a3deec90a2145523830"/></dir><dir name="Model"><file name="Ax360.php" hash="063ea3e436c3ea1fd8b74e102e99b78f"/><file name="Ax360set.php" hash="57c4e9979d8ae6ee709921718060d151"/><file name="Axproducts.php" hash="9e6449b0229d6c83497094bed536f5f9"/><file name="Galleryposition.php" hash="9d8812051417db9e39c4c5a1412deb81"/><file name="Observer.php" hash="bfcd571e1e0fd7f80176d733e0fa2075"/><file name="Position.php" hash="4df583defefa6a8a4302b3b06846a38c"/><file name="Position4.php" hash="d5b23c5a5cc98abd4b1ed45e0b829298"/><dir name="Resource"><dir name="Ax360"><file name="Collection.php" hash="95ab28070ce834f8176c5457b2f920e8"/></dir><file name="Ax360.php" hash="ca8ac71cf2b5dc3e5660946122c22e12"/><dir name="Ax360set"><file name="Collection.php" hash="448603fb57c42f09bd5e044214ff6bee"/></dir><file name="Ax360set.php" hash="52cd74b4bd994d6812db71f8ece455a1"/><dir name="Axproducts"><file name="Collection.php" hash="89e23ff705c2c4c8de3a2b5eb617deda"/></dir><file name="Axproducts.php" hash="7ec4b5dc2f19cc440a7dd3e440eaa8d1"/></dir><file name="Words.php" hash="a246e42282ccd636a38873ea3ca70237"/><file name="Yesno.php" hash="71b1887dcb4161688c7d9f64e245ec1c"/></dir><dir name="controllers"><file name="AxzoomController.php" hash="b0666884226f35599f4b14fbc492d663"/></dir><dir name="etc"><file name="config.xml" hash="08385bad7498830ae5f3fb547016e504"/><file name="system.xml" hash="97dcf137c1095efac8603e8a3ec87134"/></dir><dir name="sql"><dir name="axzoom_setup"><file name="install-0.0.1.php" hash="4a33be2f925ed44bef6cbe5674c959a6"/></dir></dir></dir></dir></dir></dir></target><target name="magedesign"><dir><dir name="adminhtml"><dir name="default"><dir name="default"><dir name="layout"><file name="axzoom.xml" hash="9987ad3d3421b896101314e336b3fe7f"/></dir><dir name="template"><dir name="axzoom"><file name="tab.phtml" hash="5dab2ed3a1d1358f5d8acf2385bdc134"/><file name="tab360-sets.phtml" hash="11faa9c92c9d1b5537c2509ba85f3c8a"/><file name="tab360-settings.phtml" hash="4149220ce003f75f19938ac0dcc5d52e"/><file name="tab360.phtml" hash="9fd8e285234c5698d3000b6271cf5e5f"/><file name="uploader.phtml" hash="ee293453776e3d9862bd3c5cf03be13e"/></dir></dir></dir></dir></dir><dir name="frontend"><dir name="base"><dir name="default"><dir name="layout"><file name="axzoom.xml" hash="46f90ee9227387c6e0df207d9e75aed7"/></dir><dir name="template"><dir name="ax_zoom"><dir><dir name="catalog"><dir name="product"><dir name="view"><file name="media.phtml" hash="d50cd9b25535eef332a39fabf0667d31"/></dir></dir></dir></dir></dir></dir></dir></dir></dir></dir></target><target name="mageetc"><dir><dir name="modules"><file name="Ax_Zoom.xml" hash="b3ca0f170cfea52154fac0d92fc8390e"/></dir></dir></target><target name="magelocale"><dir><dir name="ru_RU"><file name="Ax_Zoom.csv" hash="ad9b1e1ad87a1187dbd076b43af97429"/></dir></dir></target><target name="mageweb"><dir><dir name="js"><dir name="axzoom"><file name="check_fallback.js" hash="23a0cf74d487426d7124209136608d69"/><file name="check_jquery.js" hash="e6a9ffca4d09e86a4b795c63b8732fc3"/><file name="check_jquery_admin.js" hash="6b9d9517795bb2cf8e63bad60cea7a48"/><file name="image_path.gif" hash="bf922e182e18a02613f26ca5eaa4c560"/><file name="jquery-1.11.3.min.js" hash="1c1e3d814cc7278f801463874463e504"/><file name="jquery-migrate-1.2.1.min.js" hash="eb05d8d73b5b13d8d84308a4751ece96"/><file name="jquery.fileupload-process.js" hash="0da6f8ef76956f6ce7842dcf8941d1fa"/><file name="jquery.fileupload-validate.js" hash="561d450d59e39724999629cae64cd80e"/><file name="jquery.fileupload.js" hash="d4b3a5c4f6e69185727cfe98f17f0239"/><file name="jquery.livequery.htc" hash="6fddf8d185aa26ca790c9f435fee8bad"/><file name="jquery.livequery.min.js" hash="295403b41c10cc54df7c580e269088ca"/><file name="jquery.ui.widget.min.js" hash="2425a542e6dde093dd85ac0b5adc0141"/><file name="lic.php" hash="284821bf8557dfaa6a3c07d85ddfc13d"/><file name="no_image-100x100.jpg" hash="ebbaa789d1a5e5b1bb6fdb9ccd683aa2"/><dir><dir name="pic"><file name="readme.txt" hash="763fdb72282a84d27d9a6c93e014775a"/></dir><dir name="preview"><file name="cropeditor.php" hash="fc64265d94359e584df95d8712fc4a32"/><file name="hotspoteditor.php" hash="46ac918fb11dfc4f42d7f12aa6855d76"/><file name="index.php" hash="c304cfb13785e145e95d5f21cc95bd12"/><file name="preview.php" hash="ab5fe432a8e2e2aa95e600a8726a6e07"/></dir><dir name="tmp"><file name="readme.txt" hash="b17a61b9642c5d472107ab7023c5c880"/></dir><dir name="zip"><file name="readme.txt" hash="2134ad018dd3da577df745a04d22899f"/><file name=".htaccess" hash="209634bb0238704c4874c35d615ae59e"/></dir></dir><file name="zoomConfigCustomAZ.inc.php" hash="b120374793d953ae1bfb49accc3e4733"/></dir></dir></dir></target></contents>
16	<compatible/>
17	<dependencies><required><php><min>5.2.1</min><max>5.7.99</max></php><extension><name>ionCube Loader</name><min/><max/></extension><extension><name>zip</name><min/><max/></extension></required></dependencies>
18	</package>