MGS_Html5TagCloud - Version 1.0.0

Version Notes

version 1.0

Release Info

Developer	Mage Solution
Extension	MGS_Html5TagCloud
Version	1.0.0
Comparing to
See all releases

Version 1.0.0

Files changed (15) hide show

app/code/local/MGS/CloudTag/Block/Popular.php +96 -0
app/code/local/MGS/CloudTag/Helper/Data.php +6 -0
app/code/local/MGS/CloudTag/etc/config.xml +65 -0
app/code/local/MGS/CloudTag/etc/system.xml +67 -0
app/code/local/MGS/Mgscore/Block/System/Config/About.php +75 -0
app/code/local/MGS/Mgscore/Helper/Data.php +6 -0
app/code/local/MGS/Mgscore/etc/config.xml +75 -0
app/code/local/MGS/Mgscore/etc/system.xml +29 -0
app/design/frontend/default/default/layout/mgs_cloudtag.xml +9 -0
app/design/frontend/default/default/template/mgs/cloudtag/popular.phtml +58 -0
app/etc/modules/MGS_CloudTag.xml +9 -0
app/etc/modules/MGS_Mgscore.xml +9 -0
js/mgs_tagcloud/excanvas.js +1421 -0
js/mgs_tagcloud/tagcanvas.js +637 -0
package.xml +25 -0

app/code/local/MGS/CloudTag/Block/Popular.php ADDED Viewed

	@@ -0,0 +1,96 @@


1	+ <?php
2	+ class MGS_CloudTag_Block_Popular extends Mage_Core_Block_Template
3	+ {
4	+ protected $_tags;
5	+ protected $_minPopularity;
6	+ protected $_maxPopularity;
7	+
8	+ protected function _loadTags()
9	+ {
10	+ if (empty($this->_tags)) {
11	+ $this->_tags = array();
12	+
13	+ $tags = Mage::getModel('tag/tag')->getPopularCollection()
14	+ ->joinFields(Mage::app()->getStore()->getId())
15	+ ->limit(20)
16	+ ->load()
17	+ ->getItems();
18	+
19	+ if( count($tags) == 0 ) {
20	+ return $this;
21	+ }
22	+
23	+
24	+ $this->_maxPopularity = reset($tags)->getPopularity();
25	+ $this->_minPopularity = end($tags)->getPopularity();
26	+ $range = $this->_maxPopularity - $this->_minPopularity;
27	+ $range = ($range == 0) ? 1 : $range;
28	+ foreach ($tags as $tag) {
29	+ $tag->setRatio(($tag->getPopularity()-$this->_minPopularity)/$range);
30	+ $this->_tags[$tag->getName()] = $tag;
31	+ }
32	+ ksort($this->_tags);
33	+ }
34	+ return $this;
35	+ }
36	+
37	+ public function getTags()
38	+ {
39	+ $this->_loadTags();
40	+ return $this->_tags;
41	+ }
42	+
43	+ public function getMaxPopularity()
44	+ {
45	+ return $this->_maxPopularity;
46	+ }
47	+
48	+ public function getMinPopularity()
49	+ {
50	+ return $this->_minPopularity;
51	+ }
52	+
53	+ protected function _toHtml()
54	+ {
55	+ if (count($this->getTags()) > 0) {
56	+ if($this->isEnableFlashtag()){
57	+ $this->setTemplate('mgs/cloudtag/popular.phtml');
58	+ }
59	+ return parent::_toHtml();
60	+ }
61	+ return '';
62	+ }
63	+
64	+
65	+ public function TagSize(){
66	+ $tagSize = array();
67	+ $i=0;
68	+ foreach ($this->getTags() as $_tag){
69	+ $i++;
70	+ if($i<=$this->getCount()){
71	+ $tagSize[$_tag->getName()]= $_tag->getRatio();
72	+ }
73	+ }
74	+ return $tagSize;
75	+ }
76	+
77	+ public function isEnableFlashtag(){
78	+ return Mage::getStoreConfig('aht_cloudtag/general/enabled');
79	+ }
80	+
81	+ public function getWidth(){
82	+ return Mage::getStoreConfig('aht_cloudtag/general/width');
83	+ }
84	+
85	+ public function getHeight(){
86	+ return Mage::getStoreConfig('aht_cloudtag/general/height');
87	+ }
88	+
89	+ public function getTextColor(){
90	+ return Mage::getStoreConfig('aht_cloudtag/general/textcolor');
91	+ }
92	+
93	+ public function getOutLineColor(){
94	+ return Mage::getStoreConfig('aht_cloudtag/general/outline');
95	+ }
96	+ }

app/code/local/MGS/CloudTag/Helper/Data.php ADDED Viewed

	@@ -0,0 +1,6 @@


1	+ <?php
2	+
3	+ class MGS_CloudTag_Helper_Data extends MGS_Mgscore_Helper_Data
4	+ {
5	+
6	+ }

app/code/local/MGS/CloudTag/etc/config.xml ADDED Viewed

	@@ -0,0 +1,65 @@


1	+ <?xml version="1.0"?>
2	+ <config>
3	+ <modules>
4	+ <MGS_CloudTag>
5	+ <version>0.1.0</version>
6	+ </MGS_CloudTag>
7	+ </modules>
8	+ <frontend>
9	+ <layout>
10	+ <updates>
11	+ <cloudtag>
12	+ <file>mgs_cloudtag.xml</file>
13	+ </cloudtag>
14	+ </updates>
15	+ </layout>
16	+ </frontend>
17	+ <adminhtml>
18	+ <acl>
19	+ <resources>
20	+ <admin>
21	+ <children>
22	+ <system>
23	+ <children>
24	+ <config>
25	+ <children>
26	+ <aht_cloudtag translate="title" module="cloudtag">
27	+ <title>HTML5 Cloud Tag</title>
28	+ <sort_order>51</sort_order>
29	+ </aht_cloudtag>
30	+ </children>
31	+ </config>
32	+ </children>
33	+ </system>
34	+ </children>
35	+ </admin>
36	+ </resources>
37	+ </acl>
38	+ </adminhtml>
39	+ <global>
40	+ <blocks>
41	+ <tag>
42	+ <rewrite>
43	+ <popular>MGS_CloudTag_Block_Popular</popular>
44	+ </rewrite>
45	+ </tag>
46	+ </blocks>
47	+ <helpers>
48	+ <cloudtag>
49	+ <class>MGS_CloudTag_Helper</class>
50	+ </cloudtag>
51	+ </helpers>
52	+ </global>
53	+ <default>
54	+ <aht_cloudtag>
55	+ <general>
56	+ <enabled>1</enabled>
57	+ <width>210</width>
58	+ <height>210</height>
59	+ <textcolor>#000000</textcolor>
60	+ <outline>#000000</outline>
61	+ </general>
62	+
63	+ </aht_cloudtag>
64	+ </default>
65	+ </config>

app/code/local/MGS/CloudTag/etc/system.xml ADDED Viewed

	@@ -0,0 +1,67 @@


1	+ <?xml version="1.0"?>
2	+ <config>
3	+ <sections>
4	+ <aht_cloudtag translate="label" module="cloudtag">
5	+ <label>HTML5 Cloud Tag</label>
6	+ <tab>mgscore</tab>
7	+ <frontend_type>text</frontend_type>
8	+ <sort_order>8</sort_order>
9	+ <show_in_default>1</show_in_default>
10	+ <show_in_website>1</show_in_website>
11	+ <show_in_store>1</show_in_store>
12	+ <groups>
13	+ <general translate="label">
14	+ <label>Config</label>
15	+ <frontend_type>text</frontend_type>
16	+ <sort_order>1</sort_order>
17	+ <show_in_default>1</show_in_default>
18	+ <show_in_website>1</show_in_website>
19	+ <show_in_store>1</show_in_store>
20	+ <fields>
21	+ <enabled translate="label">
22	+ <label>Is Enable</label>
23	+ <frontend_type>select</frontend_type>
24	+ <source_model>adminhtml/system_config_source_yesno</source_model>
25	+ <sort_order>1</sort_order>
26	+ <show_in_default>1</show_in_default>
27	+ <show_in_website>1</show_in_website>
28	+ <show_in_store>1</show_in_store>
29	+ </enabled>
30	+ <width translate="label">
31	+ <label>Width</label>
32	+ <frontend_type>text</frontend_type>
33	+ <sort_order>2</sort_order>
34	+ <show_in_default>1</show_in_default>
35	+ <show_in_website>1</show_in_website>
36	+ <show_in_store>1</show_in_store>
37	+ </width>
38	+ <height translate="label">
39	+ <label>Height</label>
40	+ <frontend_type>text</frontend_type>
41	+ <sort_order>3</sort_order>
42	+ <show_in_default>1</show_in_default>
43	+ <show_in_website>1</show_in_website>
44	+ <show_in_store>1</show_in_store>
45	+ </height>
46	+ <textcolor translate="label">
47	+ <label>Text color</label>
48	+ <frontend_type>text</frontend_type>
49	+ <sort_order>4</sort_order>
50	+ <show_in_default>1</show_in_default>
51	+ <show_in_website>1</show_in_website>
52	+ <show_in_store>1</show_in_store>
53	+ </textcolor>
54	+ <outline translate="label">
55	+ <label>Out line colour</label>
56	+ <frontend_type>text</frontend_type>
57	+ <sort_order>5</sort_order>
58	+ <show_in_default>1</show_in_default>
59	+ <show_in_website>1</show_in_website>
60	+ <show_in_store>1</show_in_store>
61	+ </outline>
62	+ </fields>
63	+ </general>
64	+ </groups>
65	+ </aht_cloudtag>
66	+ </sections>
67	+ </config>

app/code/local/MGS/Mgscore/Block/System/Config/About.php ADDED Viewed

	@@ -0,0 +1,75 @@


1	+ <?php
2	+
3	+ class MGS_Mgscore_Block_System_Config_About extends Mage_Adminhtml_Block_Abstract implements Varien_Data_Form_Element_Renderer_Interface
4	+ {
5	+ public function render(Varien_Data_Form_Element_Abstract $element)
6	+ {
7	+ try {
8	+
9	+ $feed = curl_init('http://magesolution.com/MGS_Feed.xml');
10	+
11	+ if($feed === false){
12	+ throw new Exception('Error loading module info feed.'); }
13	+
14	+ curl_setopt($feed, CURLOPT_RETURNTRANSFER, true);
15	+ curl_setopt($feed, CURLOPT_HEADER, 0);
16	+ $xml = curl_exec($feed);
17	+ curl_close($feed);
18	+
19	+ if($xml === false){
20	+ throw new Exception('Error loading module info XML.'); }
21	+
22	+ $result = new SimpleXMLElement($xml);
23	+
24	+ if (!$result \|\| !$result->channel->item) {
25	+ throw new Exception('No info in module info XML.'); }
26	+
27	+
28	+ $htmlFeed = curl_init('http://magesolution.com/about/index.html');
29	+
30	+ if($htmlFeed === false){
31	+ throw new Exception('Error loading about section HTML.'); }
32	+
33	+ curl_setopt($htmlFeed, CURLOPT_RETURNTRANSFER, true);
34	+ curl_setopt($htmlFeed, CURLOPT_HEADER, 0);
35	+ $html = curl_exec($htmlFeed);
36	+ curl_close($htmlFeed);
37	+
38	+ if($html === false \|\| $html == ''){
39	+ throw new Exception('Error loading about section HTML or there is no content.'); }
40	+
41	+ if(count($result->channel->item)>0){
42	+ $html.='<div class="grid-extension"><ul>';
43	+ $i=0;
44	+ foreach ($result->channel->item as $item) {
45	+ $i++;
46	+ $html.='<li';
47	+ if($i%5==0){
48	+ $html.=' class="last"';
49	+ }
50	+ $html.='>';
51	+ $html.='<div class="product-img">';
52	+ $html.='<a href="'.$item->link.'" title="'.$item->name.'"><img src="'.$item->img.'" alt="'.$item->name.'"/></a>';
53	+ $html.='</div>';
54	+ $html.='<h4>'.$item->name.'</h4>';
55	+ $html.='<div class="price-container">';
56	+ if(isset($item->old_price)){
57	+ $html.='<span class="old-price">'.$item->old_price.'</span>';
58	+ }
59	+ $html.='<span class="final-price">'.$item->price.'</span>';
60	+ $html.='</div>';
61	+ $html.='</li>';
62	+ }
63	+ $html.='</ul></div>';
64	+ }
65	+
66	+ unset($feed, $xml, $result);
67	+
68	+ return $html;
69	+
70	+ } catch (Exception $e) {
71	+
72	+ return $e->getMessage();
73	+ }
74	+ }
75	+ }

app/code/local/MGS/Mgscore/Helper/Data.php ADDED Viewed

	@@ -0,0 +1,6 @@


1	+ <?php
2	+
3	+ class MGS_Mgscore_Helper_Data extends Mage_Core_Helper_Abstract
4	+ {
5	+
6	+ }

app/code/local/MGS/Mgscore/etc/config.xml ADDED Viewed

	@@ -0,0 +1,75 @@


1	+ <?xml version="1.0"?>
2	+ <config>
3	+ <modules>
4	+ <MGS_Mgscore>
5	+ <version>0.1.0</version>
6	+ </MGS_Mgscore>
7	+ </modules>
8	+
9	+ <adminhtml>
10	+ <menu>
11	+ <mgscore module="mgscore">
12	+ <title>Mage Solutions</title>
13	+ <sort_order>99</sort_order>
14	+ <children>
15	+ <about module="mgscore">
16	+ <title>About Us</title>
17	+ <sort_order>0</sort_order>
18	+ <action>adminhtml/system_config/edit/section/mgscore_about</action>
19	+ </about>
20	+ </children>
21	+ </mgscore>
22	+ </menu>
23	+ <acl>
24	+ <resources>
25	+ <admin>
26	+ <children>
27	+ <mgscore module="mgscore">
28	+ <title>Mage Solutions</title>
29	+ <sort_order>99</sort_order>
30	+ <children>
31	+ <about module="mgscore">
32	+ <title>About Us</title>
33	+ <sort_order>0</sort_order>
34	+ </about>
35	+ </children>
36	+ </mgscore>
37	+ <system>
38	+ <children>
39	+ <config>
40	+ <children>
41	+ <mgscore_about translate="title">
42	+ <title>Mage Solutions</title>
43	+ <sort_order>888</sort_order>
44	+ </mgscore_about>
45	+ </children>
46	+ </config>
47	+ </children>
48	+ </system>
49	+ </children>
50	+ </admin>
51	+ </resources>
52	+ </acl>
53	+ <layout>
54	+ <updates>
55	+ <tabs>
56	+ <file>mgscore.xml</file>
57	+ </tabs>
58	+ </updates>
59	+ </layout>
60	+ </adminhtml>
61	+
62	+ <global>
63	+ <helpers>
64	+ <mgscore>
65	+ <class>MGS_Mgscore_Helper</class>
66	+ </mgscore>
67	+ </helpers>
68	+
69	+ <blocks>
70	+ <mgscore>
71	+ <class>MGS_Mgscore_Block</class>
72	+ </mgscore>
73	+ </blocks>
74	+ </global>
75	+ </config>

app/code/local/MGS/Mgscore/etc/system.xml ADDED Viewed

	@@ -0,0 +1,29 @@


1	+ <?xml version="1.0" encoding="UTF-8"?>
2	+ <config>
3	+ <tabs>
4	+ <mgscore translate="label">
5	+ <label>Mage Solutions</label>
6	+ <sort_order>6</sort_order>
7	+ </mgscore>
8	+ </tabs>
9	+ <sections>
10	+ <mgscore_about translate="label">
11	+ <label>About Us</label>
12	+ <tab>mgscore</tab>
13	+ <frontend_type>text</frontend_type>
14	+ <sort_order>1</sort_order>
15	+ <show_in_default>1</show_in_default>
16	+ <show_in_website>1</show_in_website>
17	+ <show_in_store>1</show_in_store>
18	+ <groups>
19	+ <about translate="label" >
20	+ <frontend_model>mgscore/system_config_about</frontend_model>
21	+ <sort_order>0</sort_order>
22	+ <show_in_default>1</show_in_default>
23	+ <show_in_website>1</show_in_website>
24	+ <show_in_store>1</show_in_store>
25	+ </about>
26	+ </groups>
27	+ </mgscore_about>
28	+ </sections>
29	+ </config>

app/design/frontend/default/default/layout/mgs_cloudtag.xml ADDED Viewed

	@@ -0,0 +1,9 @@


1	+ <?xml version="1.0"?>
2	+ <layout version="0.1.0">
3	+ <default>
4	+ <reference name="head">
5	+ <action method="addJs"><script>mgs_tagcloud/tagcanvas.js</script></action>
6	+ <action method="addItem"><type>js</type><name>mgs_tagcloud/excanvas.js</name><params/><if>lt IE 9</if></action>
7	+ </reference>
8	+ </default>
9	+ </layout>

app/design/frontend/default/default/template/mgs/cloudtag/popular.phtml ADDED Viewed

	@@ -0,0 +1,58 @@


1	+ <?php
2	+ /**
3	+ * Magento
4	+ *
5	+ * NOTICE OF LICENSE
6	+ *
7	+ * This source file is subject to the Academic Free License (AFL 3.0)
8	+ * that is bundled with this package in the file LICENSE_AFL.txt.
9	+ * It is also available through the world-wide-web at this URL:
10	+ * http://opensource.org/licenses/afl-3.0.php
11	+ * If you did not receive a copy of the license and are unable to
12	+ * obtain it through the world-wide-web, please send an email
13	+ * to license@magentocommerce.com so we can send you a copy immediately.
14	+ *
15	+ * DISCLAIMER
16	+ *
17	+ * Do not edit or add to this file if you wish to upgrade Magento to newer
18	+ * versions in the future. If you wish to customize Magento for your
19	+ * needs please refer to http://www.magentocommerce.com for more information.
20	+ *
21	+ * @category design
22	+ * @package base_default
23	+ * @copyright Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
24	+ * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
25	+ */
26	+ ?>
27	+ <div class="block block-tags">
28	+ <div class="block-title">
29	+ <strong><span><?php echo $this->__('Popular Tags'); ?></span></strong>
30	+ </div>
31	+ <div class="block-content">
32	+ <div id="myCanvas-Container">
33	+ <canvas width="<?php echo $this->getWidth() ?>" height="<?php echo $this->getHeight() ?>" id="myCanvas">
34	+
35	+ </canvas>
36	+ <ul id="tagList">
37	+ <?php foreach ($this->getTags() as $_tag): ?>
38	+ <li><a href="<?php echo $_tag->getTaggedProductsUrl() ?>"><?php echo $this->htmlEscape($_tag->getName()) ?></a></li>
39	+ <?php endforeach; ?>
40	+ </ul>
41	+ </div>
42	+
43	+ <div class="actions">
44	+ <a href="<?php echo $this->getUrl('tag/list') ?>"><?php echo $this->__('View All Tags') ?></a>
45	+ </div>
46	+ </div>
47	+ </div>
48	+ <script type="text/javascript">
49	+ window.onload = function() {
50	+ TagCanvas.textColour = '<?php echo $this->getTextColor() ?>';
51	+ TagCanvas.outlineColour = '<?php echo $this->getOutLineColor() ?>';
52	+ try {
53	+ TagCanvas.Start('myCanvas','tagList');
54	+ } catch(e) {
55	+ document.getElementById('myCanvasContainer').style.display = 'none';
56	+ }
57	+ };
58	+ </script>

app/etc/modules/MGS_CloudTag.xml ADDED Viewed

	@@ -0,0 +1,9 @@


1	+ <?xml version="1.0"?>
2	+ <config>
3	+ <modules>
4	+ <MGS_CloudTag>
5	+ <active>true</active>
6	+ <codePool>local</codePool>
7	+ </MGS_CloudTag>
8	+ </modules>
9	+ </config>

app/etc/modules/MGS_Mgscore.xml ADDED Viewed

	@@ -0,0 +1,9 @@


1	+ <?xml version="1.0"?>
2	+ <config>
3	+ <modules>
4	+ <MGS_Mgscore>
5	+ <active>true</active>
6	+ <codePool>local</codePool>
7	+ </MGS_Mgscore>
8	+ </modules>
9	+ </config>

js/mgs_tagcloud/excanvas.js ADDED Viewed

	@@ -0,0 +1,1421 @@


1	+ // Copyright 2006 Google Inc.
2	+ //
3	+ // Licensed under the Apache License, Version 2.0 (the "License");
4	+ // you may not use this file except in compliance with the License.
5	+ // You may obtain a copy of the License at
6	+ //
7	+ // http://www.apache.org/licenses/LICENSE-2.0
8	+ //
9	+ // Unless required by applicable law or agreed to in writing, software
10	+ // distributed under the License is distributed on an "AS IS" BASIS,
11	+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	+ // See the License for the specific language governing permissions and
13	+ // limitations under the License.
14	+
15	+ // Modifications by Graham Breach ( http://www.goat1000.com/ )
16	+ // - apply globalAlpha in drawImage
17	+
18	+ // Known Issues:
19	+ //
20	+ // * Patterns only support repeat.
21	+ // * Radial gradient are not implemented. The VML version of these look very
22	+ // different from the canvas one.
23	+ // * Clipping paths are not implemented.
24	+ // * Coordsize. The width and height attribute have higher priority than the
25	+ // width and height style values which isn't correct.
26	+ // * Painting mode isn't implemented.
27	+ // * Canvas width/height should is using content-box by default. IE in
28	+ // Quirks mode will draw the canvas using border-box. Either change your
29	+ // doctype to HTML5
30	+ // (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
31	+ // or use Box Sizing Behavior from WebFX
32	+ // (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
33	+ // * Non uniform scaling does not correctly scale strokes.
34	+ // * Optimize. There is always room for speed improvements.
35	+
36	+ // Only add this code if we do not already have a canvas implementation
37	+ if (!document.createElement('canvas').getContext) {
38	+
39	+ (function() {
40	+
41	+ // alias some functions to make (compiled) code shorter
42	+ var m = Math;
43	+ var mr = m.round;
44	+ var ms = m.sin;
45	+ var mc = m.cos;
46	+ var abs = m.abs;
47	+ var sqrt = m.sqrt;
48	+
49	+ // this is used for sub pixel precision
50	+ var Z = 10;
51	+ var Z2 = Z / 2;
52	+
53	+ var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
54	+
55	+ /**
56	+ * This funtion is assigned to the <canvas> elements as element.getContext().
57	+ * @this {HTMLElement}
58	+ * @return {CanvasRenderingContext2D_}
59	+ */
60	+ function getContext() {
61	+ return this.context_ \|\|
62	+ (this.context_ = new CanvasRenderingContext2D_(this));
63	+ }
64	+
65	+ var slice = Array.prototype.slice;
66	+
67	+ /**
68	+ * Binds a function to an object. The returned function will always use the
69	+ * passed in {@code obj} as {@code this}.
70	+ *
71	+ * Example:
72	+ *
73	+ * g = bind(f, obj, a, b)
74	+ * g(c, d) // will do f.call(obj, a, b, c, d)
75	+ *
76	+ * @param {Function} f The function to bind the object to
77	+ * @param {Object} obj The object that should act as this when the function
78	+ * is called
79	+ * @param {*} var_args Rest arguments that will be used as the initial
80	+ * arguments when the function is called
81	+ * @return {Function} A new function that has bound this
82	+ */
83	+ function bind(f, obj, var_args) {
84	+ var a = slice.call(arguments, 2);
85	+ return function() {
86	+ return f.apply(obj, a.concat(slice.call(arguments)));
87	+ };
88	+ }
89	+
90	+ function encodeHtmlAttribute(s) {
91	+ return String(s).replace(/&/g, '&').replace(/"/g, '"');
92	+ }
93	+
94	+ function addNamespace(doc, prefix, urn) {
95	+ if (!doc.namespaces[prefix]) {
96	+ doc.namespaces.add(prefix, urn, '#default#VML');
97	+ }
98	+ }
99	+
100	+ function addNamespacesAndStylesheet(doc) {
101	+ addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
102	+ addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
103	+
104	+ // Setup default CSS. Only add one style sheet per document
105	+ if (!doc.styleSheets['ex_canvas_']) {
106	+ var ss = doc.createStyleSheet();
107	+ ss.owningElement.id = 'ex_canvas_';
108	+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
109	+ // default size is 300x150 in Gecko and Opera
110	+ 'text-align:left;width:300px;height:150px}';
111	+ }
112	+ }
113	+
114	+ // Add namespaces and stylesheet at startup.
115	+ addNamespacesAndStylesheet(document);
116	+
117	+ var G_vmlCanvasManager_ = {
118	+ init: function(opt_doc) {
119	+ var doc = opt_doc \|\| document;
120	+ // Create a dummy element so that IE will allow canvas elements to be
121	+ // recognized.
122	+ doc.createElement('canvas');
123	+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
124	+ },
125	+
126	+ init_: function(doc) {
127	+ // find all canvas elements
128	+ var els = doc.getElementsByTagName('canvas');
129	+ for (var i = 0; i < els.length; i++) {
130	+ this.initElement(els[i]);
131	+ }
132	+ },
133	+
134	+ /**
135	+ * Public initializes a canvas element so that it can be used as canvas
136	+ * element from now on. This is called automatically before the page is
137	+ * loaded but if you are creating elements using createElement you need to
138	+ * make sure this is called on the element.
139	+ * @param {HTMLElement} el The canvas element to initialize.
140	+ * @return {HTMLElement} the element that was created.
141	+ */
142	+ initElement: function(el) {
143	+ if (!el.getContext) {
144	+ el.getContext = getContext;
145	+
146	+ // Add namespaces and stylesheet to document of the element.
147	+ addNamespacesAndStylesheet(el.ownerDocument);
148	+
149	+ // Remove fallback content. There is no way to hide text nodes so we
150	+ // just remove all childNodes. We could hide all elements and remove
151	+ // text nodes but who really cares about the fallback content.
152	+ el.innerHTML = '';
153	+
154	+ // do not use inline function because that will leak memory
155	+ el.attachEvent('onpropertychange', onPropertyChange);
156	+ el.attachEvent('onresize', onResize);
157	+
158	+ var attrs = el.attributes;
159	+ if (attrs.width && attrs.width.specified) {
160	+ // TODO: use runtimeStyle and coordsize
161	+ // el.getContext().setWidth_(attrs.width.nodeValue);
162	+ el.style.width = attrs.width.nodeValue + 'px';
163	+ } else {
164	+ el.width = el.clientWidth;
165	+ }
166	+ if (attrs.height && attrs.height.specified) {
167	+ // TODO: use runtimeStyle and coordsize
168	+ // el.getContext().setHeight_(attrs.height.nodeValue);
169	+ el.style.height = attrs.height.nodeValue + 'px';
170	+ } else {
171	+ el.height = el.clientHeight;
172	+ }
173	+ //el.getContext().setCoordsize_()
174	+ }
175	+ return el;
176	+ }
177	+ };
178	+
179	+ function onPropertyChange(e) {
180	+ var el = e.srcElement;
181	+
182	+ switch (e.propertyName) {
183	+ case 'width':
184	+ el.getContext().clearRect();
185	+ el.style.width = el.attributes.width.nodeValue + 'px';
186	+ // In IE8 this does not trigger onresize.
187	+ el.firstChild.style.width = el.clientWidth + 'px';
188	+ break;
189	+ case 'height':
190	+ el.getContext().clearRect();
191	+ el.style.height = el.attributes.height.nodeValue + 'px';
192	+ el.firstChild.style.height = el.clientHeight + 'px';
193	+ break;
194	+ }
195	+ }
196	+
197	+ function onResize(e) {
198	+ var el = e.srcElement;
199	+ if (el.firstChild) {
200	+ el.firstChild.style.width = el.clientWidth + 'px';
201	+ el.firstChild.style.height = el.clientHeight + 'px';
202	+ }
203	+ }
204	+
205	+ G_vmlCanvasManager_.init();
206	+
207	+ // precompute "00" to "FF"
208	+ var decToHex = [];
209	+ for (var i = 0; i < 16; i++) {
210	+ for (var j = 0; j < 16; j++) {
211	+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
212	+ }
213	+ }
214	+
215	+ function createMatrixIdentity() {
216	+ return [
217	+ [1, 0, 0],
218	+ [0, 1, 0],
219	+ [0, 0, 1]
220	+ ];
221	+ }
222	+
223	+ function matrixMultiply(m1, m2) {
224	+ var result = createMatrixIdentity();
225	+
226	+ for (var x = 0; x < 3; x++) {
227	+ for (var y = 0; y < 3; y++) {
228	+ var sum = 0;
229	+
230	+ for (var z = 0; z < 3; z++) {
231	+ sum += m1[x][z] * m2[z][y];
232	+ }
233	+
234	+ result[x][y] = sum;
235	+ }
236	+ }
237	+ return result;
238	+ }
239	+
240	+ function copyState(o1, o2) {
241	+ o2.fillStyle = o1.fillStyle;
242	+ o2.lineCap = o1.lineCap;
243	+ o2.lineJoin = o1.lineJoin;
244	+ o2.lineWidth = o1.lineWidth;
245	+ o2.miterLimit = o1.miterLimit;
246	+ o2.shadowBlur = o1.shadowBlur;
247	+ o2.shadowColor = o1.shadowColor;
248	+ o2.shadowOffsetX = o1.shadowOffsetX;
249	+ o2.shadowOffsetY = o1.shadowOffsetY;
250	+ o2.strokeStyle = o1.strokeStyle;
251	+ o2.globalAlpha = o1.globalAlpha;
252	+ o2.font = o1.font;
253	+ o2.textAlign = o1.textAlign;
254	+ o2.textBaseline = o1.textBaseline;
255	+ o2.arcScaleX_ = o1.arcScaleX_;
256	+ o2.arcScaleY_ = o1.arcScaleY_;
257	+ o2.lineScale_ = o1.lineScale_;
258	+ }
259	+
260	+ var colorData = {
261	+ aliceblue: '#F0F8FF',
262	+ antiquewhite: '#FAEBD7',
263	+ aquamarine: '#7FFFD4',
264	+ azure: '#F0FFFF',
265	+ beige: '#F5F5DC',
266	+ bisque: '#FFE4C4',
267	+ black: '#000000',
268	+ blanchedalmond: '#FFEBCD',
269	+ blueviolet: '#8A2BE2',
270	+ brown: '#A52A2A',
271	+ burlywood: '#DEB887',
272	+ cadetblue: '#5F9EA0',
273	+ chartreuse: '#7FFF00',
274	+ chocolate: '#D2691E',
275	+ coral: '#FF7F50',
276	+ cornflowerblue: '#6495ED',
277	+ cornsilk: '#FFF8DC',
278	+ crimson: '#DC143C',
279	+ cyan: '#00FFFF',
280	+ darkblue: '#00008B',
281	+ darkcyan: '#008B8B',
282	+ darkgoldenrod: '#B8860B',
283	+ darkgray: '#A9A9A9',
284	+ darkgreen: '#006400',
285	+ darkgrey: '#A9A9A9',
286	+ darkkhaki: '#BDB76B',
287	+ darkmagenta: '#8B008B',
288	+ darkolivegreen: '#556B2F',
289	+ darkorange: '#FF8C00',
290	+ darkorchid: '#9932CC',
291	+ darkred: '#8B0000',
292	+ darksalmon: '#E9967A',
293	+ darkseagreen: '#8FBC8F',
294	+ darkslateblue: '#483D8B',
295	+ darkslategray: '#2F4F4F',
296	+ darkslategrey: '#2F4F4F',
297	+ darkturquoise: '#00CED1',
298	+ darkviolet: '#9400D3',
299	+ deeppink: '#FF1493',
300	+ deepskyblue: '#00BFFF',
301	+ dimgray: '#696969',
302	+ dimgrey: '#696969',
303	+ dodgerblue: '#1E90FF',
304	+ firebrick: '#B22222',
305	+ floralwhite: '#FFFAF0',
306	+ forestgreen: '#228B22',
307	+ gainsboro: '#DCDCDC',
308	+ ghostwhite: '#F8F8FF',
309	+ gold: '#FFD700',
310	+ goldenrod: '#DAA520',
311	+ grey: '#808080',
312	+ greenyellow: '#ADFF2F',
313	+ honeydew: '#F0FFF0',
314	+ hotpink: '#FF69B4',
315	+ indianred: '#CD5C5C',
316	+ indigo: '#4B0082',
317	+ ivory: '#FFFFF0',
318	+ khaki: '#F0E68C',
319	+ lavender: '#E6E6FA',
320	+ lavenderblush: '#FFF0F5',
321	+ lawngreen: '#7CFC00',
322	+ lemonchiffon: '#FFFACD',
323	+ lightblue: '#ADD8E6',
324	+ lightcoral: '#F08080',
325	+ lightcyan: '#E0FFFF',
326	+ lightgoldenrodyellow: '#FAFAD2',
327	+ lightgreen: '#90EE90',
328	+ lightgrey: '#D3D3D3',
329	+ lightpink: '#FFB6C1',
330	+ lightsalmon: '#FFA07A',
331	+ lightseagreen: '#20B2AA',
332	+ lightskyblue: '#87CEFA',
333	+ lightslategray: '#778899',
334	+ lightslategrey: '#778899',
335	+ lightsteelblue: '#B0C4DE',
336	+ lightyellow: '#FFFFE0',
337	+ limegreen: '#32CD32',
338	+ linen: '#FAF0E6',
339	+ magenta: '#FF00FF',
340	+ mediumaquamarine: '#66CDAA',
341	+ mediumblue: '#0000CD',
342	+ mediumorchid: '#BA55D3',
343	+ mediumpurple: '#9370DB',
344	+ mediumseagreen: '#3CB371',
345	+ mediumslateblue: '#7B68EE',
346	+ mediumspringgreen: '#00FA9A',
347	+ mediumturquoise: '#48D1CC',
348	+ mediumvioletred: '#C71585',
349	+ midnightblue: '#191970',
350	+ mintcream: '#F5FFFA',
351	+ mistyrose: '#FFE4E1',
352	+ moccasin: '#FFE4B5',
353	+ navajowhite: '#FFDEAD',
354	+ oldlace: '#FDF5E6',
355	+ olivedrab: '#6B8E23',
356	+ orange: '#FFA500',
357	+ orangered: '#FF4500',
358	+ orchid: '#DA70D6',
359	+ palegoldenrod: '#EEE8AA',
360	+ palegreen: '#98FB98',
361	+ paleturquoise: '#AFEEEE',
362	+ palevioletred: '#DB7093',
363	+ papayawhip: '#FFEFD5',
364	+ peachpuff: '#FFDAB9',
365	+ peru: '#CD853F',
366	+ pink: '#FFC0CB',
367	+ plum: '#DDA0DD',
368	+ powderblue: '#B0E0E6',
369	+ rosybrown: '#BC8F8F',
370	+ royalblue: '#4169E1',
371	+ saddlebrown: '#8B4513',
372	+ salmon: '#FA8072',
373	+ sandybrown: '#F4A460',
374	+ seagreen: '#2E8B57',
375	+ seashell: '#FFF5EE',
376	+ sienna: '#A0522D',
377	+ skyblue: '#87CEEB',
378	+ slateblue: '#6A5ACD',
379	+ slategray: '#708090',
380	+ slategrey: '#708090',
381	+ snow: '#FFFAFA',
382	+ springgreen: '#00FF7F',
383	+ steelblue: '#4682B4',
384	+ tan: '#D2B48C',
385	+ thistle: '#D8BFD8',
386	+ tomato: '#FF6347',
387	+ turquoise: '#40E0D0',
388	+ violet: '#EE82EE',
389	+ wheat: '#F5DEB3',
390	+ whitesmoke: '#F5F5F5',
391	+ yellowgreen: '#9ACD32'
392	+ };
393	+
394	+
395	+ function getRgbHslContent(styleString) {
396	+ var start = styleString.indexOf('(', 3);
397	+ var end = styleString.indexOf(')', start + 1);
398	+ var parts = styleString.substring(start + 1, end).split(',');
399	+ // add alpha if needed
400	+ if (parts.length != 4 \|\| styleString.charAt(3) != 'a') {
401	+ parts[3] = 1;
402	+ }
403	+ return parts;
404	+ }
405	+
406	+ function percent(s) {
407	+ return parseFloat(s) / 100;
408	+ }
409	+
410	+ function clamp(v, min, max) {
411	+ return Math.min(max, Math.max(min, v));
412	+ }
413	+
414	+ function hslToRgb(parts){
415	+ var r, g, b, h, s, l;
416	+ h = parseFloat(parts[0]) / 360 % 360;
417	+ if (h < 0)
418	+ h++;
419	+ s = clamp(percent(parts[1]), 0, 1);
420	+ l = clamp(percent(parts[2]), 0, 1);
421	+ if (s == 0) {
422	+ r = g = b = l; // achromatic
423	+ } else {
424	+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
425	+ var p = 2 * l - q;
426	+ r = hueToRgb(p, q, h + 1 / 3);
427	+ g = hueToRgb(p, q, h);
428	+ b = hueToRgb(p, q, h - 1 / 3);
429	+ }
430	+
431	+ return '#' + decToHex[Math.floor(r * 255)] +
432	+ decToHex[Math.floor(g * 255)] +
433	+ decToHex[Math.floor(b * 255)];
434	+ }
435	+
436	+ function hueToRgb(m1, m2, h) {
437	+ if (h < 0)
438	+ h++;
439	+ if (h > 1)
440	+ h--;
441	+
442	+ if (6 * h < 1)
443	+ return m1 + (m2 - m1) * 6 * h;
444	+ else if (2 * h < 1)
445	+ return m2;
446	+ else if (3 * h < 2)
447	+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
448	+ else
449	+ return m1;
450	+ }
451	+
452	+ var processStyleCache = {};
453	+
454	+ function processStyle(styleString) {
455	+ if (styleString in processStyleCache) {
456	+ return processStyleCache[styleString];
457	+ }
458	+
459	+ var str, alpha = 1;
460	+
461	+ styleString = String(styleString);
462	+ if (styleString.charAt(0) == '#') {
463	+ str = styleString;
464	+ } else if (/^rgb/.test(styleString)) {
465	+ var parts = getRgbHslContent(styleString);
466	+ var str = '#', n;
467	+ for (var i = 0; i < 3; i++) {
468	+ if (parts[i].indexOf('%') != -1) {
469	+ n = Math.floor(percent(parts[i]) * 255);
470	+ } else {
471	+ n = +parts[i];
472	+ }
473	+ str += decToHex[clamp(n, 0, 255)];
474	+ }
475	+ alpha = +parts[3];
476	+ } else if (/^hsl/.test(styleString)) {
477	+ var parts = getRgbHslContent(styleString);
478	+ str = hslToRgb(parts);
479	+ alpha = parts[3];
480	+ } else {
481	+ str = colorData[styleString] \|\| styleString;
482	+ }
483	+ return processStyleCache[styleString] = {color: str, alpha: alpha};
484	+ }
485	+
486	+ var DEFAULT_STYLE = {
487	+ style: 'normal',
488	+ variant: 'normal',
489	+ weight: 'normal',
490	+ size: 10,
491	+ family: 'sans-serif'
492	+ };
493	+
494	+ // Internal text style cache
495	+ var fontStyleCache = {};
496	+
497	+ function processFontStyle(styleString) {
498	+ if (fontStyleCache[styleString]) {
499	+ return fontStyleCache[styleString];
500	+ }
501	+
502	+ var el = document.createElement('div');
503	+ var style = el.style;
504	+ try {
505	+ style.font = styleString;
506	+ } catch (ex) {
507	+ // Ignore failures to set to invalid font.
508	+ }
509	+
510	+ return fontStyleCache[styleString] = {
511	+ style: style.fontStyle \|\| DEFAULT_STYLE.style,
512	+ variant: style.fontVariant \|\| DEFAULT_STYLE.variant,
513	+ weight: style.fontWeight \|\| DEFAULT_STYLE.weight,
514	+ size: style.fontSize \|\| DEFAULT_STYLE.size,
515	+ family: style.fontFamily \|\| DEFAULT_STYLE.family
516	+ };
517	+ }
518	+
519	+ function getComputedStyle(style, element) {
520	+ var computedStyle = {};
521	+
522	+ for (var p in style) {
523	+ computedStyle[p] = style[p];
524	+ }
525	+
526	+ // Compute the size
527	+ var canvasFontSize = parseFloat(element.currentStyle.fontSize),
528	+ fontSize = parseFloat(style.size);
529	+
530	+ if (typeof style.size == 'number') {
531	+ computedStyle.size = style.size;
532	+ } else if (style.size.indexOf('px') != -1) {
533	+ computedStyle.size = fontSize;
534	+ } else if (style.size.indexOf('em') != -1) {
535	+ computedStyle.size = canvasFontSize * fontSize;
536	+ } else if(style.size.indexOf('%') != -1) {
537	+ computedStyle.size = (canvasFontSize / 100) * fontSize;
538	+ } else if (style.size.indexOf('pt') != -1) {
539	+ computedStyle.size = fontSize / .75;
540	+ } else {
541	+ computedStyle.size = canvasFontSize;
542	+ }
543	+
544	+ // Different scaling between normal text and VML text. This was found using
545	+ // trial and error to get the same size as non VML text.
546	+ computedStyle.size *= 0.981;
547	+
548	+ return computedStyle;
549	+ }
550	+
551	+ function buildStyle(style) {
552	+ return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
553	+ style.size + 'px ' + style.family;
554	+ }
555	+
556	+ var lineCapMap = {
557	+ 'butt': 'flat',
558	+ 'round': 'round'
559	+ };
560	+
561	+ function processLineCap(lineCap) {
562	+ return lineCapMap[lineCap] \|\| 'square';
563	+ }
564	+
565	+ /**
566	+ * This class implements CanvasRenderingContext2D interface as described by
567	+ * the WHATWG.
568	+ * @param {HTMLElement} canvasElement The element that the 2D context should
569	+ * be associated with
570	+ */
571	+ function CanvasRenderingContext2D_(canvasElement) {
572	+ this.m_ = createMatrixIdentity();
573	+
574	+ this.mStack_ = [];
575	+ this.aStack_ = [];
576	+ this.currentPath_ = [];
577	+
578	+ // Canvas context properties
579	+ this.strokeStyle = '#000';
580	+ this.fillStyle = '#000';
581	+
582	+ this.lineWidth = 1;
583	+ this.lineJoin = 'miter';
584	+ this.lineCap = 'butt';
585	+ this.miterLimit = Z * 1;
586	+ this.globalAlpha = 1;
587	+ this.font = '10px sans-serif';
588	+ this.textAlign = 'left';
589	+ this.textBaseline = 'alphabetic';
590	+ this.canvas = canvasElement;
591	+
592	+ var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
593	+ canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
594	+ var el = canvasElement.ownerDocument.createElement('div');
595	+ el.style.cssText = cssText;
596	+ canvasElement.appendChild(el);
597	+
598	+ var overlayEl = el.cloneNode(false);
599	+ // Use a non transparent background.
600	+ overlayEl.style.backgroundColor = 'red';
601	+ overlayEl.style.filter = 'alpha(opacity=0)';
602	+ canvasElement.appendChild(overlayEl);
603	+
604	+ this.element_ = el;
605	+ this.arcScaleX_ = 1;
606	+ this.arcScaleY_ = 1;
607	+ this.lineScale_ = 1;
608	+ }
609	+
610	+ var contextPrototype = CanvasRenderingContext2D_.prototype;
611	+ contextPrototype.clearRect = function() {
612	+ if (this.textMeasureEl_) {
613	+ this.textMeasureEl_.removeNode(true);
614	+ this.textMeasureEl_ = null;
615	+ }
616	+ this.element_.innerHTML = '';
617	+ };
618	+
619	+ contextPrototype.beginPath = function() {
620	+ // TODO: Branch current matrix so that save/restore has no effect
621	+ // as per safari docs.
622	+ this.currentPath_ = [];
623	+ };
624	+
625	+ contextPrototype.moveTo = function(aX, aY) {
626	+ var p = getCoords(this, aX, aY);
627	+ this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
628	+ this.currentX_ = p.x;
629	+ this.currentY_ = p.y;
630	+ };
631	+
632	+ contextPrototype.lineTo = function(aX, aY) {
633	+ var p = getCoords(this, aX, aY);
634	+ this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
635	+
636	+ this.currentX_ = p.x;
637	+ this.currentY_ = p.y;
638	+ };
639	+
640	+ contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
641	+ aCP2x, aCP2y,
642	+ aX, aY) {
643	+ var p = getCoords(this, aX, aY);
644	+ var cp1 = getCoords(this, aCP1x, aCP1y);
645	+ var cp2 = getCoords(this, aCP2x, aCP2y);
646	+ bezierCurveTo(this, cp1, cp2, p);
647	+ };
648	+
649	+ // Helper function that takes the already fixed cordinates.
650	+ function bezierCurveTo(self, cp1, cp2, p) {
651	+ self.currentPath_.push({
652	+ type: 'bezierCurveTo',
653	+ cp1x: cp1.x,
654	+ cp1y: cp1.y,
655	+ cp2x: cp2.x,
656	+ cp2y: cp2.y,
657	+ x: p.x,
658	+ y: p.y
659	+ });
660	+ self.currentX_ = p.x;
661	+ self.currentY_ = p.y;
662	+ }
663	+
664	+ contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
665	+ // the following is lifted almost directly from
666	+ // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
667	+
668	+ var cp = getCoords(this, aCPx, aCPy);
669	+ var p = getCoords(this, aX, aY);
670	+
671	+ var cp1 = {
672	+ x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
673	+ y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
674	+ };
675	+ var cp2 = {
676	+ x: cp1.x + (p.x - this.currentX_) / 3.0,
677	+ y: cp1.y + (p.y - this.currentY_) / 3.0
678	+ };
679	+
680	+ bezierCurveTo(this, cp1, cp2, p);
681	+ };
682	+
683	+ contextPrototype.arc = function(aX, aY, aRadius,
684	+ aStartAngle, aEndAngle, aClockwise) {
685	+ aRadius *= Z;
686	+ var arcType = aClockwise ? 'at' : 'wa';
687	+
688	+ var xStart = aX + mc(aStartAngle) * aRadius - Z2;
689	+ var yStart = aY + ms(aStartAngle) * aRadius - Z2;
690	+
691	+ var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
692	+ var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
693	+
694	+ // IE won't render arches drawn counter clockwise if xStart == xEnd.
695	+ if (xStart == xEnd && !aClockwise) {
696	+ xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
697	+ // that can be represented in binary
698	+ }
699	+
700	+ var p = getCoords(this, aX, aY);
701	+ var pStart = getCoords(this, xStart, yStart);
702	+ var pEnd = getCoords(this, xEnd, yEnd);
703	+
704	+ this.currentPath_.push({type: arcType,
705	+ x: p.x,
706	+ y: p.y,
707	+ radius: aRadius,
708	+ xStart: pStart.x,
709	+ yStart: pStart.y,
710	+ xEnd: pEnd.x,
711	+ yEnd: pEnd.y});
712	+
713	+ };
714	+
715	+ contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
716	+ this.moveTo(aX, aY);
717	+ this.lineTo(aX + aWidth, aY);
718	+ this.lineTo(aX + aWidth, aY + aHeight);
719	+ this.lineTo(aX, aY + aHeight);
720	+ this.closePath();
721	+ };
722	+
723	+ contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
724	+ var oldPath = this.currentPath_;
725	+ this.beginPath();
726	+
727	+ this.moveTo(aX, aY);
728	+ this.lineTo(aX + aWidth, aY);
729	+ this.lineTo(aX + aWidth, aY + aHeight);
730	+ this.lineTo(aX, aY + aHeight);
731	+ this.closePath();
732	+ this.stroke();
733	+
734	+ this.currentPath_ = oldPath;
735	+ };
736	+
737	+ contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
738	+ var oldPath = this.currentPath_;
739	+ this.beginPath();
740	+
741	+ this.moveTo(aX, aY);
742	+ this.lineTo(aX + aWidth, aY);
743	+ this.lineTo(aX + aWidth, aY + aHeight);
744	+ this.lineTo(aX, aY + aHeight);
745	+ this.closePath();
746	+ this.fill();
747	+
748	+ this.currentPath_ = oldPath;
749	+ };
750	+
751	+ contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
752	+ var gradient = new CanvasGradient_('gradient');
753	+ gradient.x0_ = aX0;
754	+ gradient.y0_ = aY0;
755	+ gradient.x1_ = aX1;
756	+ gradient.y1_ = aY1;
757	+ return gradient;
758	+ };
759	+
760	+ contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
761	+ aX1, aY1, aR1) {
762	+ var gradient = new CanvasGradient_('gradientradial');
763	+ gradient.x0_ = aX0;
764	+ gradient.y0_ = aY0;
765	+ gradient.r0_ = aR0;
766	+ gradient.x1_ = aX1;
767	+ gradient.y1_ = aY1;
768	+ gradient.r1_ = aR1;
769	+ return gradient;
770	+ };
771	+
772	+ contextPrototype.drawImage = function(image, var_args) {
773	+ var dx, dy, dw, dh, sx, sy, sw, sh;
774	+
775	+ // to find the original width we overide the width and height
776	+ var oldRuntimeWidth = image.runtimeStyle.width;
777	+ var oldRuntimeHeight = image.runtimeStyle.height;
778	+ image.runtimeStyle.width = 'auto';
779	+ image.runtimeStyle.height = 'auto';
780	+
781	+ // get the original size
782	+ var w = image.width;
783	+ var h = image.height;
784	+
785	+ // and remove overides
786	+ image.runtimeStyle.width = oldRuntimeWidth;
787	+ image.runtimeStyle.height = oldRuntimeHeight;
788	+
789	+ if (arguments.length == 3) {
790	+ dx = arguments[1];
791	+ dy = arguments[2];
792	+ sx = sy = 0;
793	+ sw = dw = w;
794	+ sh = dh = h;
795	+ } else if (arguments.length == 5) {
796	+ dx = arguments[1];
797	+ dy = arguments[2];
798	+ dw = arguments[3];
799	+ dh = arguments[4];
800	+ sx = sy = 0;
801	+ sw = w;
802	+ sh = h;
803	+ } else if (arguments.length == 9) {
804	+ sx = arguments[1];
805	+ sy = arguments[2];
806	+ sw = arguments[3];
807	+ sh = arguments[4];
808	+ dx = arguments[5];
809	+ dy = arguments[6];
810	+ dw = arguments[7];
811	+ dh = arguments[8];
812	+ } else {
813	+ throw Error('Invalid number of arguments');
814	+ }
815	+
816	+ var d = getCoords(this, dx, dy);
817	+
818	+ var w2 = sw / 2;
819	+ var h2 = sh / 2;
820	+
821	+ var vmlStr = [];
822	+
823	+ var W = 10;
824	+ var H = 10;
825	+
826	+ // For some reason that I've now forgotten, using divs didn't work
827	+ vmlStr.push(' <g_vml_:group',
828	+ ' coordsize="', Z * W, ',', Z * H, '"',
829	+ ' coordorigin="0,0"' ,
830	+ ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
831	+
832	+ // If filters are necessary (rotation exists), create them
833	+ // filters are bog-slow, so only create them if abbsolutely necessary
834	+ // The following check doesn't account for skews (which don't exist
835	+ // in the canvas spec (yet) anyway.
836	+
837	+ if (this.m_[0][0] != 1 \|\| this.m_[0][1] \|\|
838	+ this.m_[1][1] != 1 \|\| this.m_[1][0]) {
839	+ var filter = [];
840	+
841	+ // Note the 12/21 reversal
842	+ filter.push('M11=', this.m_[0][0], ',',
843	+ 'M12=', this.m_[1][0], ',',
844	+ 'M21=', this.m_[0][1], ',',
845	+ 'M22=', this.m_[1][1], ',',
846	+ 'Dx=', mr(d.x / Z), ',',
847	+ 'Dy=', mr(d.y / Z), '');
848	+
849	+ // Bounding box calculation (need to minimize displayed area so that
850	+ // filters don't waste time on unused pixels.
851	+ var max = d;
852	+ var c2 = getCoords(this, dx + dw, dy);
853	+ var c3 = getCoords(this, dx, dy + dh);
854	+ var c4 = getCoords(this, dx + dw, dy + dh);
855	+
856	+ max.x = m.max(max.x, c2.x, c3.x, c4.x);
857	+ max.y = m.max(max.y, c2.y, c3.y, c4.y);
858	+
859	+ vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
860	+ 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
861	+ filter.join(''), ", sizingmethod='clip');");
862	+
863	+ } else {
864	+ vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
865	+ }
866	+
867	+ var opacity = ~~(this.globalAlpha * 100);
868	+ vmlStr.push(' ">' ,
869	+ '<g_vml_:image src="', image.src, '"',
870	+ ' style="width:', Z * dw, 'px;',
871	+ ' height:', Z * dh, 'px;',
872	+ ' -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=', opacity, ');',
873	+ ' filter:alpha(opacity=', opacity, ')"',
874	+ ' cropleft="', sx / w, '"',
875	+ ' croptop="', sy / h, '"',
876	+ ' cropright="', (w - sx - sw) / w, '"',
877	+ ' cropbottom="', (h - sy - sh) / h, '"',
878	+ ' />',
879	+ '</g_vml_:group>');
880	+
881	+ this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
882	+ };
883	+
884	+ contextPrototype.stroke = function(aFill) {
885	+ var lineStr = [];
886	+ var lineOpen = false;
887	+
888	+ var W = 10;
889	+ var H = 10;
890	+
891	+ lineStr.push('<g_vml_:shape',
892	+ ' filled="', !!aFill, '"',
893	+ ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
894	+ ' coordorigin="0,0"',
895	+ ' coordsize="', Z * W, ',', Z * H, '"',
896	+ ' stroked="', !aFill, '"',
897	+ ' path="');
898	+
899	+ var newSeq = false;
900	+ var min = {x: null, y: null};
901	+ var max = {x: null, y: null};
902	+
903	+ for (var i = 0; i < this.currentPath_.length; i++) {
904	+ var p = this.currentPath_[i];
905	+ var c;
906	+
907	+ switch (p.type) {
908	+ case 'moveTo':
909	+ c = p;
910	+ lineStr.push(' m ', mr(p.x), ',', mr(p.y));
911	+ break;
912	+ case 'lineTo':
913	+ lineStr.push(' l ', mr(p.x), ',', mr(p.y));
914	+ break;
915	+ case 'close':
916	+ lineStr.push(' x ');
917	+ p = null;
918	+ break;
919	+ case 'bezierCurveTo':
920	+ lineStr.push(' c ',
921	+ mr(p.cp1x), ',', mr(p.cp1y), ',',
922	+ mr(p.cp2x), ',', mr(p.cp2y), ',',
923	+ mr(p.x), ',', mr(p.y));
924	+ break;
925	+ case 'at':
926	+ case 'wa':
927	+ lineStr.push(' ', p.type, ' ',
928	+ mr(p.x - this.arcScaleX_ * p.radius), ',',
929	+ mr(p.y - this.arcScaleY_ * p.radius), ' ',
930	+ mr(p.x + this.arcScaleX_ * p.radius), ',',
931	+ mr(p.y + this.arcScaleY_ * p.radius), ' ',
932	+ mr(p.xStart), ',', mr(p.yStart), ' ',
933	+ mr(p.xEnd), ',', mr(p.yEnd));
934	+ break;
935	+ }
936	+
937	+
938	+ // TODO: Following is broken for curves due to
939	+ // move to proper paths.
940	+
941	+ // Figure out dimensions so we can do gradient fills
942	+ // properly
943	+ if (p) {
944	+ if (min.x == null \|\| p.x < min.x) {
945	+ min.x = p.x;
946	+ }
947	+ if (max.x == null \|\| p.x > max.x) {
948	+ max.x = p.x;
949	+ }
950	+ if (min.y == null \|\| p.y < min.y) {
951	+ min.y = p.y;
952	+ }
953	+ if (max.y == null \|\| p.y > max.y) {
954	+ max.y = p.y;
955	+ }
956	+ }
957	+ }
958	+ lineStr.push(' ">');
959	+
960	+ if (!aFill) {
961	+ appendStroke(this, lineStr);
962	+ } else {
963	+ appendFill(this, lineStr, min, max);
964	+ }
965	+
966	+ lineStr.push('</g_vml_:shape>');
967	+
968	+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
969	+ };
970	+
971	+ function appendStroke(ctx, lineStr) {
972	+ var a = processStyle(ctx.strokeStyle);
973	+ var color = a.color;
974	+ var opacity = a.alpha * ctx.globalAlpha;
975	+ var lineWidth = ctx.lineScale_ * ctx.lineWidth;
976	+
977	+ // VML cannot correctly render a line if the width is less than 1px.
978	+ // In that case, we dilute the color to make the line look thinner.
979	+ if (lineWidth < 1) {
980	+ opacity *= lineWidth;
981	+ }
982	+
983	+ lineStr.push(
984	+ '<g_vml_:stroke',
985	+ ' opacity="', opacity, '"',
986	+ ' joinstyle="', ctx.lineJoin, '"',
987	+ ' miterlimit="', ctx.miterLimit, '"',
988	+ ' endcap="', processLineCap(ctx.lineCap), '"',
989	+ ' weight="', lineWidth, 'px"',
990	+ ' color="', color, '" />'
991	+ );
992	+ }
993	+
994	+ function appendFill(ctx, lineStr, min, max) {
995	+ var fillStyle = ctx.fillStyle;
996	+ var arcScaleX = ctx.arcScaleX_;
997	+ var arcScaleY = ctx.arcScaleY_;
998	+ var width = max.x - min.x;
999	+ var height = max.y - min.y;
1000	+ if (fillStyle instanceof CanvasGradient_) {
1001	+ // TODO: Gradients transformed with the transformation matrix.
1002	+ var angle = 0;
1003	+ var focus = {x: 0, y: 0};
1004	+
1005	+ // additional offset
1006	+ var shift = 0;
1007	+ // scale factor for offset
1008	+ var expansion = 1;
1009	+
1010	+ if (fillStyle.type_ == 'gradient') {
1011	+ var x0 = fillStyle.x0_ / arcScaleX;
1012	+ var y0 = fillStyle.y0_ / arcScaleY;
1013	+ var x1 = fillStyle.x1_ / arcScaleX;
1014	+ var y1 = fillStyle.y1_ / arcScaleY;
1015	+ var p0 = getCoords(ctx, x0, y0);
1016	+ var p1 = getCoords(ctx, x1, y1);
1017	+ var dx = p1.x - p0.x;
1018	+ var dy = p1.y - p0.y;
1019	+ angle = Math.atan2(dx, dy) * 180 / Math.PI;
1020	+
1021	+ // The angle should be a non-negative number.
1022	+ if (angle < 0) {
1023	+ angle += 360;
1024	+ }
1025	+
1026	+ // Very small angles produce an unexpected result because they are
1027	+ // converted to a scientific notation string.
1028	+ if (angle < 1e-6) {
1029	+ angle = 0;
1030	+ }
1031	+ } else {
1032	+ var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
1033	+ focus = {
1034	+ x: (p0.x - min.x) / width,
1035	+ y: (p0.y - min.y) / height
1036	+ };
1037	+
1038	+ width /= arcScaleX * Z;
1039	+ height /= arcScaleY * Z;
1040	+ var dimension = m.max(width, height);
1041	+ shift = 2 * fillStyle.r0_ / dimension;
1042	+ expansion = 2 * fillStyle.r1_ / dimension - shift;
1043	+ }
1044	+
1045	+ // We need to sort the color stops in ascending order by offset,
1046	+ // otherwise IE won't interpret it correctly.
1047	+ var stops = fillStyle.colors_;
1048	+ stops.sort(function(cs1, cs2) {
1049	+ return cs1.offset - cs2.offset;
1050	+ });
1051	+
1052	+ var length = stops.length;
1053	+ var color1 = stops[0].color;
1054	+ var color2 = stops[length - 1].color;
1055	+ var opacity1 = stops[0].alpha * ctx.globalAlpha;
1056	+ var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
1057	+
1058	+ var colors = [];
1059	+ for (var i = 0; i < length; i++) {
1060	+ var stop = stops[i];
1061	+ colors.push(stop.offset * expansion + shift + ' ' + stop.color);
1062	+ }
1063	+
1064	+ // When colors attribute is used, the meanings of opacity and o:opacity2
1065	+ // are reversed.
1066	+ lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
1067	+ ' method="none" focus="100%"',
1068	+ ' color="', color1, '"',
1069	+ ' color2="', color2, '"',
1070	+ ' colors="', colors.join(','), '"',
1071	+ ' opacity="', opacity2, '"',
1072	+ ' g_o_:opacity2="', opacity1, '"',
1073	+ ' angle="', angle, '"',
1074	+ ' focusposition="', focus.x, ',', focus.y, '" />');
1075	+ } else if (fillStyle instanceof CanvasPattern_) {
1076	+ if (width && height) {
1077	+ var deltaLeft = -min.x;
1078	+ var deltaTop = -min.y;
1079	+ lineStr.push('<g_vml_:fill',
1080	+ ' position="',
1081	+ deltaLeft / width * arcScaleX * arcScaleX, ',',
1082	+ deltaTop / height * arcScaleY * arcScaleY, '"',
1083	+ ' type="tile"',
1084	+ // TODO: Figure out the correct size to fit the scale.
1085	+ //' size="', w, 'px ', h, 'px"',
1086	+ ' src="', fillStyle.src_, '" />');
1087	+ }
1088	+ } else {
1089	+ var a = processStyle(ctx.fillStyle);
1090	+ var color = a.color;
1091	+ var opacity = a.alpha * ctx.globalAlpha;
1092	+ lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
1093	+ '" />');
1094	+ }
1095	+ }
1096	+
1097	+ contextPrototype.fill = function() {
1098	+ this.stroke(true);
1099	+ };
1100	+
1101	+ contextPrototype.closePath = function() {
1102	+ this.currentPath_.push({type: 'close'});
1103	+ };
1104	+
1105	+ function getCoords(ctx, aX, aY) {
1106	+ var m = ctx.m_;
1107	+ return {
1108	+ x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
1109	+ y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
1110	+ };
1111	+ };
1112	+
1113	+ contextPrototype.save = function() {
1114	+ var o = {};
1115	+ copyState(this, o);
1116	+ this.aStack_.push(o);
1117	+ this.mStack_.push(this.m_);
1118	+ this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
1119	+ };
1120	+
1121	+ contextPrototype.restore = function() {
1122	+ if (this.aStack_.length) {
1123	+ copyState(this.aStack_.pop(), this);
1124	+ this.m_ = this.mStack_.pop();
1125	+ }
1126	+ };
1127	+
1128	+ function matrixIsFinite(m) {
1129	+ return isFinite(m[0][0]) && isFinite(m[0][1]) &&
1130	+ isFinite(m[1][0]) && isFinite(m[1][1]) &&
1131	+ isFinite(m[2][0]) && isFinite(m[2][1]);
1132	+ }
1133	+
1134	+ function setM(ctx, m, updateLineScale) {
1135	+ if (!matrixIsFinite(m)) {
1136	+ return;
1137	+ }
1138	+ ctx.m_ = m;
1139	+
1140	+ if (updateLineScale) {
1141	+ // Get the line scale.
1142	+ // Determinant of this.m_ means how much the area is enlarged by the
1143	+ // transformation. So its square root can be used as a scale factor
1144	+ // for width.
1145	+ var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
1146	+ ctx.lineScale_ = sqrt(abs(det));
1147	+ }
1148	+ }
1149	+
1150	+ contextPrototype.translate = function(aX, aY) {
1151	+ var m1 = [
1152	+ [1, 0, 0],
1153	+ [0, 1, 0],
1154	+ [aX, aY, 1]
1155	+ ];
1156	+
1157	+ setM(this, matrixMultiply(m1, this.m_), false);
1158	+ };
1159	+
1160	+ contextPrototype.rotate = function(aRot) {
1161	+ var c = mc(aRot);
1162	+ var s = ms(aRot);
1163	+
1164	+ var m1 = [
1165	+ [c, s, 0],
1166	+ [-s, c, 0],
1167	+ [0, 0, 1]
1168	+ ];
1169	+
1170	+ setM(this, matrixMultiply(m1, this.m_), false);
1171	+ };
1172	+
1173	+ contextPrototype.scale = function(aX, aY) {
1174	+ this.arcScaleX_ *= aX;
1175	+ this.arcScaleY_ *= aY;
1176	+ var m1 = [
1177	+ [aX, 0, 0],
1178	+ [0, aY, 0],
1179	+ [0, 0, 1]
1180	+ ];
1181	+
1182	+ setM(this, matrixMultiply(m1, this.m_), true);
1183	+ };
1184	+
1185	+ contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
1186	+ var m1 = [
1187	+ [m11, m12, 0],
1188	+ [m21, m22, 0],
1189	+ [dx, dy, 1]
1190	+ ];
1191	+
1192	+ setM(this, matrixMultiply(m1, this.m_), true);
1193	+ };
1194	+
1195	+ contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
1196	+ var m = [
1197	+ [m11, m12, 0],
1198	+ [m21, m22, 0],
1199	+ [dx, dy, 1]
1200	+ ];
1201	+
1202	+ setM(this, m, true);
1203	+ };
1204	+
1205	+ /**
1206	+ * The text drawing function.
1207	+ * The maxWidth argument isn't taken in account, since no browser supports
1208	+ * it yet.
1209	+ */
1210	+ contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
1211	+ var m = this.m_,
1212	+ delta = 1000,
1213	+ left = 0,
1214	+ right = delta,
1215	+ offset = {x: 0, y: 0},
1216	+ lineStr = [];
1217	+
1218	+ var fontStyle = getComputedStyle(processFontStyle(this.font),
1219	+ this.element_);
1220	+
1221	+ var fontStyleString = buildStyle(fontStyle);
1222	+
1223	+ var elementStyle = this.element_.currentStyle;
1224	+ var textAlign = this.textAlign.toLowerCase();
1225	+ switch (textAlign) {
1226	+ case 'left':
1227	+ case 'center':
1228	+ case 'right':
1229	+ break;
1230	+ case 'end':
1231	+ textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
1232	+ break;
1233	+ case 'start':
1234	+ textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
1235	+ break;
1236	+ default:
1237	+ textAlign = 'left';
1238	+ }
1239	+
1240	+ // 1.75 is an arbitrary number, as there is no info about the text baseline
1241	+ switch (this.textBaseline) {
1242	+ case 'hanging':
1243	+ case 'top':
1244	+ offset.y = fontStyle.size / 1.75;
1245	+ break;
1246	+ case 'middle':
1247	+ break;
1248	+ default:
1249	+ case null:
1250	+ case 'alphabetic':
1251	+ case 'ideographic':
1252	+ case 'bottom':
1253	+ offset.y = -fontStyle.size / 2.25;
1254	+ break;
1255	+ }
1256	+
1257	+ switch(textAlign) {
1258	+ case 'right':
1259	+ left = delta;
1260	+ right = 0.05;
1261	+ break;
1262	+ case 'center':
1263	+ left = right = delta / 2;
1264	+ break;
1265	+ }
1266	+
1267	+ var d = getCoords(this, x + offset.x, y + offset.y);
1268	+
1269	+ lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
1270	+ ' coordsize="100 100" coordorigin="0 0"',
1271	+ ' filled="', !stroke, '" stroked="', !!stroke,
1272	+ '" style="position:absolute;width:1px;height:1px;">');
1273	+
1274	+ if (stroke) {
1275	+ appendStroke(this, lineStr);
1276	+ } else {
1277	+ // TODO: Fix the min and max params.
1278	+ appendFill(this, lineStr, {x: -left, y: 0},
1279	+ {x: right, y: fontStyle.size});
1280	+ }
1281	+
1282	+ var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
1283	+ m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
1284	+
1285	+ var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
1286	+
1287	+ lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
1288	+ ' offset="', skewOffset, '" origin="', left ,' 0" />',
1289	+ '<g_vml_:path textpathok="true" />',
1290	+ '<g_vml_:textpath on="true" string="',
1291	+ encodeHtmlAttribute(text),
1292	+ '" style="v-text-align:', textAlign,
1293	+ ';font:', encodeHtmlAttribute(fontStyleString),
1294	+ '" /></g_vml_:line>');
1295	+
1296	+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
1297	+ };
1298	+
1299	+ contextPrototype.fillText = function(text, x, y, maxWidth) {
1300	+ this.drawText_(text, x, y, maxWidth, false);
1301	+ };
1302	+
1303	+ contextPrototype.strokeText = function(text, x, y, maxWidth) {
1304	+ this.drawText_(text, x, y, maxWidth, true);
1305	+ };
1306	+
1307	+ contextPrototype.measureText = function(text) {
1308	+ if (!this.textMeasureEl_) {
1309	+ var s = '<span style="position:absolute;' +
1310	+ 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
1311	+ 'white-space:pre;"></span>';
1312	+ this.element_.insertAdjacentHTML('beforeEnd', s);
1313	+ this.textMeasureEl_ = this.element_.lastChild;
1314	+ }
1315	+ var doc = this.element_.ownerDocument;
1316	+ this.textMeasureEl_.innerHTML = '';
1317	+ this.textMeasureEl_.style.font = this.font;
1318	+ // Don't use innerHTML or innerText because they allow markup/whitespace.
1319	+ this.textMeasureEl_.appendChild(doc.createTextNode(text));
1320	+ return {width: this.textMeasureEl_.offsetWidth};
1321	+ };
1322	+
1323	+ /****** STUBS ******/
1324	+ contextPrototype.clip = function() {
1325	+ // TODO: Implement
1326	+ };
1327	+
1328	+ contextPrototype.arcTo = function() {
1329	+ // TODO: Implement
1330	+ };
1331	+
1332	+ contextPrototype.createPattern = function(image, repetition) {
1333	+ return new CanvasPattern_(image, repetition);
1334	+ };
1335	+
1336	+ // Gradient / Pattern Stubs
1337	+ function CanvasGradient_(aType) {
1338	+ this.type_ = aType;
1339	+ this.x0_ = 0;
1340	+ this.y0_ = 0;
1341	+ this.r0_ = 0;
1342	+ this.x1_ = 0;
1343	+ this.y1_ = 0;
1344	+ this.r1_ = 0;
1345	+ this.colors_ = [];
1346	+ }
1347	+
1348	+ CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
1349	+ aColor = processStyle(aColor);
1350	+ this.colors_.push({offset: aOffset,
1351	+ color: aColor.color,
1352	+ alpha: aColor.alpha});
1353	+ };
1354	+
1355	+ function CanvasPattern_(image, repetition) {
1356	+ assertImageIsValid(image);
1357	+ switch (repetition) {
1358	+ case 'repeat':
1359	+ case null:
1360	+ case '':
1361	+ this.repetition_ = 'repeat';
1362	+ break
1363	+ case 'repeat-x':
1364	+ case 'repeat-y':
1365	+ case 'no-repeat':
1366	+ this.repetition_ = repetition;
1367	+ break;
1368	+ default:
1369	+ throwException('SYNTAX_ERR');
1370	+ }
1371	+
1372	+ this.src_ = image.src;
1373	+ this.width_ = image.width;
1374	+ this.height_ = image.height;
1375	+ }
1376	+
1377	+ function throwException(s) {
1378	+ throw new DOMException_(s);
1379	+ }
1380	+
1381	+ function assertImageIsValid(img) {
1382	+ if (!img \|\| img.nodeType != 1 \|\| img.tagName != 'IMG') {
1383	+ throwException('TYPE_MISMATCH_ERR');
1384	+ }
1385	+ if (img.readyState != 'complete') {
1386	+ throwException('INVALID_STATE_ERR');
1387	+ }
1388	+ }
1389	+
1390	+ function DOMException_(s) {
1391	+ this.code = this[s];
1392	+ this.message = s +': DOM Exception ' + this.code;
1393	+ }
1394	+ var p = DOMException_.prototype = new Error;
1395	+ p.INDEX_SIZE_ERR = 1;
1396	+ p.DOMSTRING_SIZE_ERR = 2;
1397	+ p.HIERARCHY_REQUEST_ERR = 3;
1398	+ p.WRONG_DOCUMENT_ERR = 4;
1399	+ p.INVALID_CHARACTER_ERR = 5;
1400	+ p.NO_DATA_ALLOWED_ERR = 6;
1401	+ p.NO_MODIFICATION_ALLOWED_ERR = 7;
1402	+ p.NOT_FOUND_ERR = 8;
1403	+ p.NOT_SUPPORTED_ERR = 9;
1404	+ p.INUSE_ATTRIBUTE_ERR = 10;
1405	+ p.INVALID_STATE_ERR = 11;
1406	+ p.SYNTAX_ERR = 12;
1407	+ p.INVALID_MODIFICATION_ERR = 13;
1408	+ p.NAMESPACE_ERR = 14;
1409	+ p.INVALID_ACCESS_ERR = 15;
1410	+ p.VALIDATION_ERR = 16;
1411	+ p.TYPE_MISMATCH_ERR = 17;
1412	+
1413	+ // set up externs
1414	+ G_vmlCanvasManager = G_vmlCanvasManager_;
1415	+ CanvasRenderingContext2D = CanvasRenderingContext2D_;
1416	+ CanvasGradient = CanvasGradient_;
1417	+ CanvasPattern = CanvasPattern_;
1418	+ DOMException = DOMException_;
1419	+ })();
1420	+
1421	+ } // if

js/mgs_tagcloud/tagcanvas.js ADDED Viewed

	@@ -0,0 +1,637 @@


1	+ /**
2	+ * Copyright (C) 2010-2011 Graham Breach
3	+ *
4	+ * This program is free software: you can redistribute it and/or modify
5	+ * it under the terms of the GNU Lesser General Public License as published by
6	+ * the Free Software Foundation, either version 3 of the License, or
7	+ * (at your option) any later version.
8	+ *
9	+ * This program is distributed in the hope that it will be useful,
10	+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
11	+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12	+ * GNU Lesser General Public License for more details.
13	+ *
14	+ * You should have received a copy of the GNU Lesser General Public License
15	+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
16	+ */
17	+ /**
18	+ * TagCanvas 1.10
19	+ * For more information, please contact <graham@goat1000.com>
20	+ */
21	+ (function(){
22	+ var i, j, abs = Math.abs, sin = Math.sin, cos = Math.cos, hexlookup3 = {}, hexlookup2 = {}, hexlookup1 = {
23	+ 0:"0,", 1:"17,", 2:"34,", 3:"51,", 4:"68,", 5:"85,",
24	+ 6:"102,", 7:"119,", 8:"136,", 9:"153,", a:"170,", A:"170,",
25	+ b:"187,", B:"187,", c:"204,", C:"204,", d:"221,", D:"221,",
26	+ e:"238,", E:"238,", f:"255,", F:"255,"
27	+ }, Oproto, Tproto, TCproto, doc = document;
28	+ for(i = 0; i < 256; ++i) {
29	+ j = i.toString(16);
30	+ if(i < 16)
31	+ j = '0' + j;
32	+ hexlookup2[j] = hexlookup2[j.toUpperCase()] = i.toString() + ',';
33	+ }
34	+ function Defined(d) {
35	+ return typeof(d) != 'undefined';
36	+ }
37	+ function PointsOnSphere(n) {
38	+ var i, y, r, phi, pts = [], inc = Math.PI * (3-Math.sqrt(5)), off = 2/n;
39	+ for(i = 0; i < n; ++i) {
40	+ y = i * off - 1 + (off / 2);
41	+ r = Math.sqrt(1 - y*y);
42	+ phi = i * inc;
43	+ pts.push([cos(phi)r, y, sin(phi)r]);
44	+ }
45	+ return pts;
46	+ }
47	+ function SetAlpha(c,a) {
48	+ var d = c, p1, p2, ae = (a*1).toPrecision(3) + ')';
49	+ if(c[0] === '#') {
50	+ if(!hexlookup3[c])
51	+ if(c.length === 4)
52	+ hexlookup3[c] = 'rgba(' + hexlookup1[c[1]] + hexlookup1[c[2]] + hexlookup1[c[3]];
53	+ else
54	+ hexlookup3[c] = 'rgba(' + hexlookup2[c.substr(1,2)] + hexlookup2[c.substr(3,2)] + hexlookup2[c.substr(5,2)];
55	+ d = hexlookup3[c] + ae;
56	+ } else if(c.substr(0,4) === 'rgb(' \|\| c.substr(0,4) === 'hsl(') {
57	+ d = (c.replace('(','a(').replace(')', ',' + ae));
58	+ } else if(c.substr(0,5) === 'rgba(' \|\| c.substr(0,5) === 'hsla(') {
59	+ p1 = c.lastIndexOf(',') + 1, p2 = c.indexOf(')');
60	+ a *= parseFloat(c.substring(p1,p2));
61	+ d = c.substr(0,p1) + a.toPrecision(3) + ')';
62	+ }
63	+ return d;
64	+ }
65	+ function NewCanvas(w,h) {
66	+ // if using excanvas, give up now
67	+ if(window.G_vmlCanvasManager)
68	+ return null;
69	+ var c = doc.createElement('canvas');
70	+ c.width = w;
71	+ c.height = h;
72	+ return c;
73	+ }
74	+ // I think all browsers pass this test now...
75	+ function ShadowAlphaBroken() {
76	+ var cv = NewCanvas(3,3), c, i;
77	+ if(!cv)
78	+ return false;
79	+ c = cv.getContext('2d');
80	+ c.strokeStyle = '#000';
81	+ c.shadowColor = '#fff';
82	+ c.shadowBlur = 3;
83	+ c.globalAlpha = 0;
84	+ c.strokeRect(2,2,2,2);
85	+ c.globalAlpha = 1;
86	+ i = c.getImageData(2,2,1,1);
87	+ cv = null;
88	+ return (i.data[0] > 0);
89	+ }
90	+ function FindGradientColour(t,p) {
91	+ var l = 1024, g = t.weightGradient, cv, c, i, gd, d;
92	+ if(t.gCanvas) {
93	+ c = t.gCanvas.getContext('2d');
94	+ } else {
95	+ t.gCanvas = cv = NewCanvas(l,1);
96	+ if(!cv)
97	+ return null;
98	+ c = cv.getContext('2d');
99	+ gd = c.createLinearGradient(0,0,l,0);
100	+ for(i in g)
101	+ gd.addColorStop(1-i, g[i]);
102	+ c.fillStyle = gd;
103	+ c.fillRect(0,0,l,1);
104	+ }
105	+ d = c.getImageData(~~((l-1)*p),0,1,1).data;
106	+ return 'rgba(' + d[0] + ',' + d[1] + ',' + d[2] + ',' + (d[3]/255) + ')';
107	+ }
108	+ function TextSet(c,f,l,s,sc,sb,so) {
109	+ var xo = (sb \|\| 0) + (so && so[0] < 0 ? abs(so[0]) : 0),
110	+ yo = (sb \|\| 0) + (so && so[1] < 0 ? abs(so[1]) : 0);
111	+ c.font = f;
112	+ c.textBaseline = 'top';
113	+ c.fillStyle = l;
114	+ sc && (c.shadowColor = sc);
115	+ sb && (c.shadowBlur = sb);
116	+ so && (c.shadowOffsetX = so[0], c.shadowOffsetY = so[1]);
117	+ c.fillText(s, xo, yo);
118	+ }
119	+ function TextToCanvas(s,f,ht,w,h,l,sc,sb,so) {
120	+ var cw = w + abs(so[0]) + sb + sb, ch = h + abs(so[1]) + sb + sb, cv, c;
121	+ cv = NewCanvas(cw,ch);
122	+ if(!cv)
123	+ return null;
124	+ c = cv.getContext('2d');
125	+ TextSet(c,f,l,s,sc,sb,so);
126	+ return cv;
127	+ }
128	+ function AddShadowToImage(i,sc,sb,so) {
129	+ var cw = i.width + abs(so[0]) + sb + sb, ch = i.height + abs(so[1]) + sb + sb, cv, c,
130	+ xo = (sb \|\| 0) + (so && so[0] < 0 ? abs(so[0]) : 0),
131	+ yo = (sb \|\| 0) + (so && so[1] < 0 ? abs(so[1]) : 0);
132	+ cv = NewCanvas(cw,ch);
133	+ if(!cv)
134	+ return null;
135	+ c = cv.getContext('2d');
136	+ sc && (c.shadowColor = sc);
137	+ sb && (c.shadowBlur = sb);
138	+ so && (c.shadowOffsetX = so[0], c.shadowOffsetY = so[1]);
139	+ c.drawImage(i, xo, yo);
140	+ return cv;
141	+ }
142	+ function FindTextBoundingBox(s,f,ht) {
143	+ var w = parseInt(s.length * ht), h = parseInt(ht * 2), cv = NewCanvas(w,h), c, idata, w1, h1, x, y, i, ex;
144	+ if(!cv)
145	+ return null;
146	+ c = cv.getContext('2d');
147	+ c.fillStyle = '#000';
148	+ c.fillRect(0,0,w,h);
149	+ TextSet(c,ht + 'px ' + f,'#fff',s)
150	+
151	+ idata = c.getImageData(0,0,w,h);
152	+ w1 = idata.width; h1 = idata.height;
153	+ ex = {
154	+ min: { x: w1, y: h1 },
155	+ max: { x: -1, y: -1 }
156	+ };
157	+ for(y = 0; y < h1; ++y) {
158	+ for(x = 0; x < w1; ++x) {
159	+ i = (y * w1 + x) * 4;
160	+ if(idata.data[i+1] > 0) {
161	+ if(x < ex.min.x) ex.min.x = x;
162	+ if(x > ex.max.x) ex.max.x = x;
163	+ if(y < ex.min.y) ex.min.y = y;
164	+ if(y > ex.max.y) ex.max.y = y;
165	+ }
166	+ }
167	+ }
168	+ // device pixels might not be css pixels
169	+ if(w1 != w) {
170	+ ex.min.x *= (w / w1);
171	+ ex.max.x *= (w / w1);
172	+ }
173	+ if(h1 != h) {
174	+ ex.min.y *= (w / h1);
175	+ ex.max.y *= (w / h1);
176	+ }
177	+
178	+ cv = null;
179	+ return ex;
180	+ }
181	+ function FixFont(f) {
182	+ return "'" + f.replace(/(\'\|\")/g,'').replace(/\s,\s/g, "', '") + "'";
183	+ }
184	+ function AddHandler(h,f,e) {
185	+ e = e \|\| doc;
186	+ if(e.addEventListener)
187	+ e.addEventListener(h,f,false);
188	+ else
189	+ e.attachEvent('on' + h, f);
190	+ }
191	+ function AddImage(i,t,tl) {
192	+ if(i.complete) {
193	+ t.w = i.width;
194	+ t.h = i.height;
195	+ tl.push(t);
196	+ } else {
197	+ AddHandler('load',function() {
198	+ t.w = this.width;
199	+ t.h = this.height;
200	+ tl.push(t);
201	+ },i);
202	+ }
203	+ }
204	+ function FindWeight(t,a) {
205	+ var w = 1, p;
206	+ if(t.weightFrom) {
207	+ w = 1 * (a.getAttribute(t.weightFrom) \|\| t.textHeight);
208	+ } else if(doc.defaultView && doc.defaultView.getComputedStyle) {
209	+ p = doc.defaultView.getComputedStyle(a,null).getPropertyValue('font-size');
210	+ w = p.replace('px','') * 1;
211	+ } else {
212	+ t.weight = false;
213	+ }
214	+ return w;
215	+ }
216	+ function MouseMove(e) {
217	+ var i, tc, dd = doc.documentElement, p;
218	+ for(i in TagCanvas.tc) {
219	+ tc = TagCanvas.tc[i];
220	+ p = AbsPos(i);
221	+ if(e.pageX) {
222	+ tc.mx = e.pageX - p.x;
223	+ tc.my = e.pageY - p.y;
224	+ } else {
225	+ tc.mx = e.clientX + (dd.scrollLeft \|\| doc.body.scrollLeft) - p.x;
226	+ tc.my = e.clientY + (dd.scrollTop \|\| doc.body.scrollTop) - p.y;
227	+ }
228	+ }
229	+ }
230	+ function MouseClick(e) {
231	+ var t = TagCanvas, cb = doc.addEventListener ? 0 : 1,
232	+ tg = e.target && Defined(e.target.id) ? e.target.id : e.srcElement.parentNode.id;
233	+ if(tg && e.button == cb && t.tc[tg]) {
234	+ MouseMove(e);
235	+ t.tc[tg].Clicked(e);
236	+ }
237	+ }
238	+ function DrawCanvas() {
239	+ var t = TagCanvas.tc, i;
240	+ for(i in t)
241	+ t[i].Draw();
242	+ }
243	+ function AbsPos(id) {
244	+ var e, p, pn;
245	+ e = doc.getElementById(id);
246	+ p = {x:e.offsetLeft,y:e.offsetTop};
247	+ while(e.offsetParent) {
248	+ pn = e.offsetParent;
249	+ p.x += pn.offsetLeft;
250	+ p.y += pn.offsetTop;
251	+ e = pn;
252	+ }
253	+ return p;
254	+ }
255	+ function RotX(p1,t) {
256	+ var s = sin(t), c = cos(t);
257	+ return {x:p1.x, y:(p1.y * c) + (p1.z * s), z:(p1.y * -s) + (p1.z * c)};
258	+ }
259	+ function RotY(p1,t) {
260	+ var s = sin(t), c = cos(t);
261	+ return {x:(p1.x * c) + (p1.z * -s), y:p1.y, z:(p1.x * s) + (p1.z * c)};
262	+ }
263	+ function Project(tc,p1,w,h,fov,asp) {
264	+ var yn, xn, zn, m = tc.z1 / (tc.z1 + tc.z2 + p1.z);
265	+ yn = p1.y * m;
266	+ xn = p1.x * m;
267	+ zn = tc.z2 + p1.z;
268	+ return {x:xn, y:yn, z:zn};
269	+ }
270	+ /**
271	+ * @constructor
272	+ */
273	+ function Outline(tc) {
274	+ this.ts = new Date().valueOf();
275	+ this.tc = tc;
276	+ this.x = this.y = this.w = this.h = this.sc = 1;
277	+ this.z = 0;
278	+ }
279	+ Oproto = Outline.prototype;
280	+ Oproto.Update = function(x,y,w,h,sc,p) {
281	+ var o = this.tc.outlineOffset;
282	+ this.x = sc * (x - o);
283	+ this.y = sc * (y - o);
284	+ this.w = sc * (w + o * 2);
285	+ this.h = sc * (h + o * 2);
286	+ this.sc = sc; // used to determine frontmost
287	+ this.z = p.z;
288	+ };
289	+ Oproto.Draw = function(c) {
290	+ var diff = new Date().valueOf() - this.ts, t = this.tc;
291	+ c.setTransform(1,0,0,1,0,0);
292	+ c.strokeStyle = t.outlineColour;
293	+ c.lineWidth = t.outlineThickness;
294	+ c.shadowBlur = c.shadowOffsetX = c.shadowOffsetY = 0;
295	+ if(t.pulsateTo < 1)
296	+ c.globalAlpha = t.pulsateTo + ((1 - t.pulsateTo) *
297	+ (0.5 + (cos(2 * Math.PI * diff / (1000 * t.pulsateTime)) / 2)));
298	+ else
299	+ c.globalAlpha = 1;
300	+ c.strokeRect(this.x, this.y, this.w, this.h);
301	+ };
302	+ Oproto.Active = function(c,x,y) {
303	+ return (x >= this.x && y >= this.y &&
304	+ x <= this.x + this.w && y <= this.y + this.h);
305	+ };
306	+ /**
307	+ * @constructor
308	+ */
309	+ function Tag(tc,name,a,v,w,h) {
310	+ var c = tc.ctxt, i;
311	+ this.tc = tc;
312	+ this.image = name.src ? name : null;
313	+ this.name = name.src ? '' : name;
314	+ this.a = a;
315	+ this.p3d = { x: v[0] * tc.radius * 1.1, y: v[1] * tc.radius * 1.1, z: v[2] * tc.radius * 1.1};
316	+ this.x = this.y = 0;
317	+ this.w = w;
318	+ this.h = h;
319	+ this.colour = tc.textColour;
320	+ this.weight = this.sc = this.alpha = 1;
321	+ this.weighted = !tc.weight;
322	+ this.outline = new Outline(tc);
323	+ if(this.image) {
324	+ if(tc.txtOpt && tc.shadow) {
325	+ i = AddShadowToImage(this.image,tc.shadow,tc.shadowBlur,tc.shadowOffset);
326	+ if(i) {
327	+ this.image = i;
328	+ this.w = i.width;
329	+ this.h = i.height;
330	+ }
331	+ }
332	+ } else {
333	+ this.textHeight = tc.textHeight;
334	+ this.extents = FindTextBoundingBox(this.name, tc.textFont, this.textHeight);
335	+ this.Measure(c,tc);
336	+ }
337	+ this.SetShadowColour = tc.shadowAlpha ? this.SetShadowColourAlpha : this.SetShadowColourFixed;
338	+ this.SetDraw(tc);
339	+ }
340	+ Tproto = Tag.prototype;
341	+ Tproto.SetDraw = function(t) {
342	+ this.Draw = this.image ? (t.ie > 7 ? this.DrawImageIE : this.DrawImage) : this.DrawText;
343	+ };
344	+ Tproto.Measure = function(c,t) {
345	+ this.h = this.extents ? this.extents.max.y + this.extents.min.y : this.textHeight;
346	+ c.font = this.font = this.textHeight + 'px ' + t.textFont;
347	+ this.w1 = c.measureText(this.name).width;
348	+ if(t.txtOpt) {
349	+ var s = t.txtScale, th = s * this.textHeight, f = th + 'px ' + t.textFont,
350	+ soff = [st.shadowOffset[0],st.shadowOffset[1]], cw;
351	+ c.font = f;
352	+ cw = c.measureText(this.name).width;
353	+ this.image = TextToCanvas(this.name, f, th, cw, s * this.h, this.colour,
354	+ t.shadow, s * t.shadowBlur, soff);
355	+ if(this.image) {
356	+ this.w = this.image.width / s;
357	+ this.h = this.image.height / s;
358	+ }
359	+ this.SetDraw(t);
360	+ t.txtOpt = this.image;
361	+ }
362	+ };
363	+ Tproto.SetWeight = function(w) {
364	+ this.weight = w;
365	+ this.Weight(this.tc.ctxt, this.tc);
366	+ this.Measure(this.tc.ctxt, this.tc);
367	+ };
368	+ Tproto.Weight = function(c,t) {
369	+ var w = this.weight, m = t.weightMode;
370	+ this.weighted = true;
371	+ if(m == 'colour' \|\| m == 'both')
372	+ this.colour = FindGradientColour(t, (w - t.min_weight) / (t.max_weight-t.min_weight));
373	+ if(m == 'size' \|\| m == 'both')
374	+ this.textHeight = w * t.weightSize;
375	+ this.extents = FindTextBoundingBox(this.name, t.textFont, this.textHeight);
376	+ };
377	+ Tproto.SetShadowColourFixed = function(c,s,a) {
378	+ c.shadowColor = s;
379	+ };
380	+ Tproto.SetShadowColourAlpha = function(c,s,a) {
381	+ c.shadowColor = SetAlpha(s, a);
382	+ };
383	+ Tproto.DrawText = function(c,xoff,yoff) {
384	+ var t = this.tc, x = this.x, y = this.y, w, h, s = this.sc, o = this.outline;
385	+
386	+ c.globalAlpha = this.alpha;
387	+ c.setTransform(s,0,0,s,0,0);
388	+ c.fillStyle = this.colour;
389	+ t.shadow && this.SetShadowColour(c,t.shadow,this.alpha);
390	+ c.font = this.font;
391	+ w = this.w1 * s;
392	+ h = this.h * s;
393	+ x += 1 + (xoff / s) - (w / 2);
394	+ y += 1 + (yoff / s) - (h / 2);
395	+
396	+ c.fillText(this.name, x, y);
397	+ o.Update(x, y, this.w1, this.h, s, this.p3d);
398	+ return o.Active(c, t.mx, t.my) ? o : null;
399	+ };
400	+ Tproto.DrawImage = function(c,xoff,yoff) {
401	+ var t = this.tc, x = this.x, y = this.y, s = this.sc, o = this.outline,
402	+ i = this.image, w = this.w, h = this.h;
403	+ c.globalAlpha = this.alpha;
404	+ c.setTransform(s,0,0,s,0,0);
405	+ c.fillStyle = this.colour;
406	+ t.shadow && this.SetShadowColour(c,t.shadow,this.alpha);
407	+ x += (xoff / s) - (w / 2);
408	+ y += (yoff / s) - (h / 2);
409	+
410	+ c.drawImage(i, x, y, w, h);
411	+ o.Update(x, y, w, h, s, this.p3d);
412	+ return o.Active(c, t.mx, t.my) ? o : null;
413	+ };
414	+ Tproto.DrawImageIE = function(c,xoff,yoff) {
415	+ var t = this.tc, i = this.image, s = this.sc, o = this.outline,
416	+ w = i.width = this.ws, h = i.height = this.h s,
417	+ x = (this.xs) + xoff - (w/2), y = (this.ys) + yoff - (h/2);
418	+ c.globalAlpha = this.alpha;
419	+ c.drawImage(i, x, y);
420	+ o.Update(x, y, w, h, 1, this.p3d);
421	+ return o.Active(c, t.mx, t.my) ? o : null;
422	+ };
423	+ Tproto.Calc = function(yaw,pitch) {
424	+ var pp = RotY(this.p3d,yaw), t = this.tc, mb = t.minBrightness, r = t.radius;
425	+ this.p3d = RotX(pp,pitch);
426	+ pp = Project(t, this.p3d, this.w, this.h, Math.PI / 4, 20);
427	+ this.x = pp.x;
428	+ this.y = pp.y;
429	+ this.sc = (t.z1 + t.z2 - pp.z) / t.z2;
430	+ this.alpha = Math.max(mb,Math.min(1,mb + 1 - ((pp.z - t.z2 + r) / (2 * r))));
431	+ };
432	+ Tproto.Clicked = function(e) {
433	+ var a = this.a, t = a.target, h = a.href, evt;
434	+ if(t != '' && t != '_self') {
435	+ if(self.frames[t])
436	+ self.frames[t] = h;
437	+ else if(top.frames[t])
438	+ top.frames[t] = h;
439	+ else
440	+ window.open(h, t);
441	+ return;
442	+ }
443	+ if(a.fireEvent) {
444	+ if(!a.fireEvent('onclick'))
445	+ return;
446	+ } else {
447	+ evt = doc.createEvent('MouseEvents');
448	+ evt.initMouseEvent('click', 1, 1, window, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, null);
449	+ if(!a.dispatchEvent(evt))
450	+ return;
451	+ }
452	+ doc.location = h;
453	+ };
454	+ /**
455	+ * @constructor
456	+ */
457	+ function TagCanvas(cid,lctr,opt) {
458	+ var i, ctr, tl, vl, p, im, ii, tag, c = doc.getElementById(cid), cp = ['id','class','innerHTML'], w, weights = [];
459	+
460	+ if(!c) throw 0;
461	+ if(Defined(window.G_vmlCanvasManager)) {
462	+ c = window.G_vmlCanvasManager.initElement(c);
463	+ this.ie = parseFloat(navigator.appVersion.split('MSIE')[1]);
464	+ }
465	+ if(c && (!c.getContext \|\| !c.getContext('2d').fillText)) {
466	+ p = doc.createElement('DIV');
467	+ for(i = 0; i < cp.length; ++i)
468	+ p[cp[i]] = c[cp[i]];
469	+ c.parentNode.insertBefore(p,c);
470	+ c.parentNode.removeChild(c);
471	+ throw 0;
472	+ }
473	+ for(i in TagCanvas.options)
474	+ this[i] = opt && Defined(opt[i]) ? opt[i] :
475	+ (Defined(TagCanvas[i]) ? TagCanvas[i] : TagCanvas.options[i]);
476	+
477	+ this.canvas = c;
478	+ this.ctxt = c.getContext('2d');
479	+ this.z1 = (19800 / (Math.exp(this.depth) * (1-1/Math.E))) +
480	+ 20000 - 19800 / (1-(1/Math.E));
481	+ this.z2 = this.z1 * (1/this.zoom);
482	+ this.radius = (c.height > c.width ? c.width : c.height)
483	+ * 0.33 * (this.z2 + this.z1) / (this.z1);
484	+ this.max_weight = 0;
485	+ this.min_weight = 200;
486	+ this.textFont = FixFont(this.textFont);
487	+ this.ctxt.textBaseline = 'top';
488	+ if(this.shadowBlur \|\| this.shadowOffset[0] \|\| this.shadowOffset[1]) {
489	+ // let the browser translate "red" into "#ff0000"
490	+ this.ctxt.shadowColor = this.shadow;
491	+ this.shadow = this.ctxt.shadowColor;
492	+ this.shadowAlpha = ShadowAlphaBroken();
493	+ } else {
494	+ delete this.shadow;
495	+ }
496	+ try {
497	+ ctr = doc.getElementById(lctr \|\| cid);
498	+ tl = ctr.getElementsByTagName('a');
499	+ this.taglist = [];
500	+ if(tl.length) {
501	+ vl = PointsOnSphere(tl.length);
502	+ for(i = 0; i < tl.length; ++i) {
503	+ im = tl[i].getElementsByTagName('img');
504	+ if(im.length) {
505	+ ii = new Image;
506	+ ii.src = im[0].src;
507	+ tag = new Tag(this, ii, tl[i], vl[i], 1, 1);
508	+ AddImage(ii,tag,this.taglist);
509	+ } else {
510	+ this.taglist.push(new Tag(this, tl[i].innerText \|\| tl[i].textContent, tl[i],
511	+ vl[i], 2, this.textHeight + 2));
512	+ }
513	+ if(this.weight) {
514	+ w = FindWeight(this,tl[i]);
515	+ if(w > this.max_weight) this.max_weight = w;
516	+ if(w < this.min_weight) this.min_weight = w;
517	+ weights.push(w);
518	+ }
519	+ }
520	+ if(this.weight = (this.max_weight > this.min_weight)) {
521	+ for(i = 0; i < this.taglist.length; ++i) {
522	+ this.taglist[i].SetWeight(weights[i]);
523	+ }
524	+ }
525	+ }
526	+ if(lctr && this.hideTags)
527	+ ctr.style.display = 'none';
528	+ } catch(ex) {
529	+ ex;
530	+ }
531	+
532	+ this.yaw = this.initial ? this.initial[0] * this.maxSpeed : 0;
533	+ this.pitch = this.initial ? this.initial[1] * this.maxSpeed : 0;
534	+ AddHandler('mousemove', MouseMove, c);
535	+ AddHandler('mouseout', MouseMove, c);
536	+ AddHandler('mouseup', MouseClick, c);
537	+ TagCanvas.started \|\| (TagCanvas.started = setInterval(DrawCanvas, this.interval));
538	+ }
539	+ TCproto = TagCanvas.prototype;
540	+ TCproto.Draw = function() {
541	+ var cv = this.canvas, cw = cv.width, ch = cv.height, max_sc = 0, yaw = this.yaw, pitch = this.pitch,
542	+ x1 = cw / 2, y1 = ch / 2, c = this.ctxt, active, a, i, tl = this.taglist, l = tl.length;
543	+ c.setTransform(1,0,0,1,0,0);
544	+ this.active = null;
545	+ for(i = 0; i < l; ++i)
546	+ tl[i].Calc(yaw, pitch);
547	+ tl = tl.sort(function(a,b) {return a.sc-b.sc});
548	+
549	+ if(!this.txtOpt && this.shadow) {
550	+ c.shadowBlur = this.shadowBlur;
551	+ c.shadowOffsetX = this.shadowOffset[0];
552	+ c.shadowOffsetY = this.shadowOffset[1];
553	+ }
554	+ c.clearRect(0,0,cw,ch);
555	+ for(i = 0; i < l; ++i) {
556	+ a = tl[i].Draw(c, x1, y1);
557	+ if(a && a.sc > max_sc && (!this.frontSelect \|\| a.z <= 0)) {
558	+ active = a;
559	+ active.index = i;
560	+ max_sc = a.sc;
561	+ }
562	+ }
563	+ if(this.freezeActive && active)
564	+ this.yaw = this.pitch = 0;
565	+ else
566	+ this.Animate(cw, ch);
567	+ active && (this.active = active).Draw(c);
568	+ };
569	+ TCproto.Animate = function(w,h) {
570	+ var tc = this, x = tc.mx, y = tc.my, s, ay, ap, r;
571	+ if(x >= 0 && y >= 0 && x < w && y < h)
572	+ {
573	+ s = tc.maxSpeed, r = tc.reverse ? -1 : 1;
574	+ this.yaw = r * ((s * 2 * x / w) - s);
575	+ this.pitch = r * -((s * 2 * y / h) - s);
576	+ this.initial = null;
577	+ }
578	+ else if(!tc.initial)
579	+ {
580	+ s = tc.minSpeed, ay = abs(tc.yaw), ap = abs(tc.pitch);
581	+ if(ay > s)
582	+ this.yaw = ay > tc.z0 ? tc.yaw * tc.decel : 0;
583	+ if(ap > s)
584	+ this.pitch = ap > tc.z0 ? tc.pitch * tc.decel : 0;
585	+ }
586	+ };
587	+ TCproto.Clicked = function(e) {
588	+ var t = this.taglist, a = this.active;
589	+ try {
590	+ if(a && t[a.index])
591	+ t[a.index].Clicked(e);
592	+ } catch(ex) {
593	+ }
594	+ };
595	+ TagCanvas.Start = function(id,l,o) {
596	+ TagCanvas.tc[id] = new TagCanvas(id,l,o);
597	+ };
598	+
599	+ TagCanvas.tc = {};
600	+ TagCanvas.options = {
601	+ z1: 20000,
602	+ z2: 20000,
603	+ z0: 0.0002,
604	+ freezeActive: false,
605	+ pulsateTo: 0.15,
606	+ pulsateTime: 3,
607	+ reverse: false,
608	+ depth: 0.5,
609	+ maxSpeed: 0.05,
610	+ minSpeed: 0,
611	+ decel: 0.95,
612	+ interval: 20,
613	+ minBrightness: 0.1,
614	+ outlineColour: '#ffff99',
615	+ outlineThickness: 2,
616	+ outlineOffset: 5,
617	+ textColour: '#ff99ff',
618	+ textHeight: 15,
619	+ textFont: 'Helvetica, Arial, sans-serif',
620	+ shadow: '#000',
621	+ shadowBlur: 0,
622	+ shadowOffset: [0,0],
623	+ initial: null,
624	+ hideTags: true,
625	+ zoom: 1,
626	+ weight: false,
627	+ weightMode: 'size',
628	+ weightFrom: null,
629	+ weightSize: 1,
630	+ weightGradient: {0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'},
631	+ txtOpt: true,
632	+ txtScale: 2,
633	+ frontSelect: false
634	+ };
635	+ for(i in TagCanvas.options) TagCanvas[i] = TagCanvas.options[i];
636	+ window.TagCanvas = TagCanvas;
637	+ })();

package.xml ADDED Viewed

	@@ -0,0 +1,25 @@


1	+ <?xml version="1.0"?>
2	+ <package>
3	+ <name>MGS_Html5TagCloud</name>
4	+ <version>1.0.0</version>
5	+ <stability>stable</stability>
6	+ <license uri="http://opensource.org/licenses/osl-3.0.php">OSL</license>
7	+ <channel>community</channel>
8	+ <extends/>
9	+ <summary>It's beautiful tag block with HTML5 technology. It will replace simple tag block in Magento with HTML5 tag cloud</summary>
10	+ <description><ul>
11	+ <li>It's developed based on HTML5 technology</li>
12	+ <li>It will replace simple tag block in Magento and display with a beautiful tag cloud</li>
13	+ <li> If web browser doesn't support HTML5, it will be shown with Javascript technology </li>
14	+ <li>HTML/ CSS and W3C validation</li>
15	+ <li>Friendly and flexible configuration</li>
16	+ <li>Cross-browsers compatibility</li>
17	+ </ul></description>
18	+ <notes>version 1.0</notes>
19	+ <authors><author><name>Mage Solution</name><user>mage_solution</user><email>info@magesolution.com</email></author></authors>
20	+ <date>2013-12-19</date>
21	+ <time>10:22:53</time>
22	+ <contents><target name="mageetc"><dir name="modules"><file name="MGS_Mgscore.xml" hash="f8ac0e98f4c28786cd4b615090676e1f"/><file name="MGS_CloudTag.xml" hash="660e381399cb790072052dff5672c1e3"/></dir></target><target name="magelocal"><dir name="MGS"><dir name="CloudTag"><dir name="Block"><file name="Popular.php" hash="3507454f888fec114396c2298cbbd89a"/></dir><dir name="Helper"><file name="Data.php" hash="5dcdde303f42d8c340bc1a04da421767"/></dir><dir name="etc"><file name="config.xml" hash="0d23350d54c594c274ad83a4300eb732"/><file name="system.xml" hash="b56dab7841f036b9a6f953ace7168c95"/></dir></dir><dir name="Mgscore"><dir name="Block"><dir name="System"><dir name="Config"><file name="About.php" hash="e3a6ea60f46dcc1e9f961d60d1eaca1f"/></dir></dir></dir><dir name="Helper"><file name="Data.php" hash="e8940e23620e28ed20fe8bb799526230"/></dir><dir name="etc"><file name="config.xml" hash="f15f20b1d2b4ff90c9c289ae273c01ff"/><file name="system.xml" hash="231f2cc3b2d424833cb4ea328bac70f6"/></dir></dir></dir></target><target name="magedesign"><dir name="frontend"><dir name="default"><dir name="default"><dir name="layout"><file name="mgs_cloudtag.xml" hash="d2e7d4dd1f906225e921badba1d89b2a"/></dir><dir name="template"><dir name="mgs"><dir name="cloudtag"><file name="popular.phtml" hash="9c079b2484b6dcbb9bb3eec472459894"/></dir></dir></dir></dir></dir></dir></target><target name="mage"><dir name="js"><dir name="mgs_tagcloud"><file name="excanvas.js" hash="59e01a2bcf64ed75aaf3ef6ac97547d7"/><file name="tagcanvas.js" hash="4c37da9682b542ee6f594807c1e53d63"/></dir></dir></target></contents>
23	+ <compatible/>
24	+ <dependencies><required><php><min>5.1.0</min><max>6.0.0</max></php></required></dependencies>
25	+ </package>