From 2d609191e3103263f17d0ec5ed9f6cae595ed7e6 Mon Sep 17 00:00:00 2001
From: "m.bova" <m.bova@levi9.com>
Date: Mon, 21 Sep 2015 13:06:16 +0300
Subject: [PATCH] added template for jquery templates

---
 POC/w2/1/index2.JQuery.html    |  70 +++++++++
 POC/w2/10/index2.JQuery.html   |  62 ++++++++
 POC/w2/11/index2.JQuery.html   |  55 +++++++
 POC/w2/12_/index2.JQuery.html  | 103 +++++++++++++
 POC/w2/13.v/index2.JQuery.html | 107 +++++++++++++
 POC/w2/14/index2.JQuery.html   |  96 ++++++++++++
 POC/w2/15.r/index2.JQuery.html |  96 ++++++++++++
 POC/w2/2/index2.JQuery.html    |  40 +++++
 POC/w2/3/index2.JQuery.html    |  43 ++++++
 POC/w2/4/index2.JQuery.html    |  48 ++++++
 POC/w2/5.v/index2.JQuery.html  |  64 ++++++++
 POC/w2/6/index2.JQuery.html    |  58 ++++++++
 POC/w2/7/index2.JQuery.html    |  58 ++++++++
 POC/w2/8/index2.JQuery.html    |  61 ++++++++
 POC/w2/9.v/index2.JQuery.html  |  62 ++++++++
 index.html                     |   8 +-
 index2.JQuery.html             | 265 ++++++++-------------------------
 templates2.html                |  52 +++++++
 18 files changed, 1142 insertions(+), 206 deletions(-)
 create mode 100644 POC/w2/1/index2.JQuery.html
 create mode 100644 POC/w2/10/index2.JQuery.html
 create mode 100644 POC/w2/11/index2.JQuery.html
 create mode 100644 POC/w2/12_/index2.JQuery.html
 create mode 100644 POC/w2/13.v/index2.JQuery.html
 create mode 100644 POC/w2/14/index2.JQuery.html
 create mode 100644 POC/w2/15.r/index2.JQuery.html
 create mode 100644 POC/w2/2/index2.JQuery.html
 create mode 100644 POC/w2/3/index2.JQuery.html
 create mode 100644 POC/w2/4/index2.JQuery.html
 create mode 100644 POC/w2/5.v/index2.JQuery.html
 create mode 100644 POC/w2/6/index2.JQuery.html
 create mode 100644 POC/w2/7/index2.JQuery.html
 create mode 100644 POC/w2/8/index2.JQuery.html
 create mode 100644 POC/w2/9.v/index2.JQuery.html
 create mode 100644 templates2.html
diff --git a/POC/w2/1/index2.JQuery.html b/POC/w2/1/index2.JQuery.html
new file mode 100644
index 0000000..a57dfc2
--- /dev/null
+++ b/POC/w2/1/index2.JQuery.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <h1>Super Yahoo pipes</h1>
+    
+    <style>
+    #errors-block {
+        color: red;
+    }
+    </style>
+
+    <script type="text/javascript" src="jquery-1.4.4.js"></script>
+    <script type="text/javascript" src="jquery.tmpl.js"></script> 
+ 
+  </head>
+<body>
+  <div id="news">
+  </div>
+ 
+    <script type="text/javascript">
+        // Create an array of books
+//         var books = [
+//             { title: "ASP.NET 4 Unleashed", price: 37.79, picture: "1.jpg" },
+//             { title: "ASP.NET MVC Unleashed", price: 44.99, picture: "2.jpg" },
+//             { title: "ASP.NET Kick Start", price: 4.00, picture: "3.jpg" },
+//             { title: "ASP.NET MVC Unleashed iPhone", price: 44.99, picture: "4.jpg" },
+//         ];
+ 
+        // Render the books using the template
+//         $("#bookTemplate").tmpl(books).appendTo("#news"); 
+    </script> 
+
+    <script id="bookTemplate" type="text/x-jQuery-tmpl">
+        <div>
+            <h2>${title}</h2>
+        </div>
+    </script>
+
+    <script type="text/javascript">
+    // -----------------------------------------------------------------------------------------
+        // receive news from yahoo server
+        // -----------------------------------------------------------------------------------------
+        window.onload = function () {
+            //Create a SCRIPT element.
+            var script = document.createElement("script");
+            //Set the Type.
+            script.type = "text/javascript";
+            //Set the source to the URL the JSON Service.
+            script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+           //Append the script element to the HEAD section.
+            document.getElementsByTagName("head")[0].appendChild(script);
+        };
+
+        // -----------------------------------------------------------------------------------------
+        // Display all received news on the page
+        // -----------------------------------------------------------------------------------------
+        function DisplayNews(response) {
+            var i;
+            ////
+            console.log(response);
+            console.log(response.value.items);
+            // for(i = 0; i < response.count; i++) {
+            //     CreateMainDivBlock(i);
+            //     FillArticle(i, response);
+            // }
+            $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/10/index2.JQuery.html b/POC/w2/10/index2.JQuery.html
new file mode 100644
index 0000000..d38811b
--- /dev/null
+++ b/POC/w2/10/index2.JQuery.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article-${count()}">
+    <div id="img-${count()}"><img height="50" id="image-${count()}" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title-${count()}">
+        ${title}
+    </div>
+    <div id="summary-${count()}">
+        ${description}
+    </div>20
+    <div id="lnk-${count()}">
+        <a href=${link}
+        id="article-link-${count()}">-&gt;</a>
+    </div>
+</div>
+</script>
+<script type="text/javascript">
+    var iii = 0;
+    function count()
+    {
+        return iii++;
+    }
+</script>
+        <script type="text/javascript">
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                //document.getElementsByTagName("head")[0].appendChild(script);
+                $('head')[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/11/index2.JQuery.html b/POC/w2/11/index2.JQuery.html
new file mode 100644
index 0000000..6bb255a
--- /dev/null
+++ b/POC/w2/11/index2.JQuery.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article">
+    <div id="img"><img height="50" id="image" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title">
+        ${title}
+    </div>
+    <div id="summary">
+        ${description}
+    </div>20
+    <div id="lnk">
+        <a href=${link}
+        id="article-link">-&gt;</a>
+    </div>
+</div>
+</script>
+        <script type="text/javascript">
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                //document.getElementsByTagName("head")[0].appendChild(script);
+                $('head')[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/12_/index2.JQuery.html b/POC/w2/12_/index2.JQuery.html
new file mode 100644
index 0000000..5fd2af0
--- /dev/null
+++ b/POC/w2/12_/index2.JQuery.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article" onclick="ProcessDivOnClick(this);">
+    <div id="img"><img height="50" id="image" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title">
+        ${title}
+    </div>
+    <div id="summary">
+        ${description}
+    </div>20
+    <div id="lnk">
+        <a href=${link}
+        id="article-link">-&gt;</a>
+    </div>
+</div>
+</script>
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------
+            // Show/hide elements on click in parent div
+            // -----------------------------------------------------------------------------------
+            var ProcessDivOnClick = function(e) {
+
+                console.log("here");
+                var elem = e;
+                /*                             
+                        <div id="article" onclick="ProcessDivOnClick(this);">
+                          <div id="img"><img height="50" id="image" src="http://www.nasa.gov/sites/default/files/thumbnails/image/wolf_ast_2015162_lrg.jpg" width="50">
+                          </div>
+                          <div id="title"> Eruption of Wolf Volcano, Galapagos Islands </div>
+                          <div id="summary"> In late May 2015, the highest volcano in the Galapagos Islands, Wolf volcano, erupted for the first time in 33 years. The wide image and closeup of Wolf was acquired on June 11, 2015, by the ASTER instrument on NASA's Terra satellite. The false-color images combine near-infrared, red, and green light (ASTER bands 3-2-1). </div>20
+                          <div id="lnk"> <a href="http://www.nasa.gov/image-feature/eruption-of-wolf-volcano-galapagos-islands" id="article-link">-&gt;</a> </div>
+                        </div>
+                */
+                //
+                console.log(elem);
+
+                var jqElem = $(this);
+                //
+                console.log(jqElem);
+                var lnk = jqElem.find('#lnk');
+                console.log(lnk);
+                lnk.hide();
+
+                /*
+                var elemId = e.srcElement.id;
+                // image-1
+                ////console.log(elemId);
+                var res = elemId.split("-");
+                var clickedId = res[1];
+                console.log(clickedId);
+                */
+
+                ///console.log("Clicked!!!");
+                /*
+                var visible = document.getElementById("article-link-"+clickedId).style.visibility;
+                if(visible === 'visible') {
+                    document.getElementById("article-link-"+clickedId).style.visibility = 'hidden';
+                    document.getElementById("summary-"+clickedId).style.visibility = 'hidden';
+                } else {
+                    document.getElementById("article-link-"+clickedId).style.visibility = 'visible'; 
+                    document.getElementById("summary-"+clickedId).style.visibility = 'visible';
+                }
+                */
+            }
+
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                //document.getElementsByTagName("head")[0].appendChild(script);
+                $('head')[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/13.v/index2.JQuery.html b/POC/w2/13.v/index2.JQuery.html
new file mode 100644
index 0000000..a7c998c
--- /dev/null
+++ b/POC/w2/13.v/index2.JQuery.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article" onclick="ProcessDivOnClick($(this));">
+    <div id="img"><img height="50" id="image" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title">
+        ${title}
+    </div>
+    <div id="summary">
+        ${description}
+    </div>20
+    <div id="lnk">
+        <a href=${link}
+        id="article-link">-&gt;</a>
+    </div>
+</div>
+</script>
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------
+            // Show/hide elements on click in parent div
+            // -----------------------------------------------------------------------------------
+            var ProcessDivOnClick = function(e) {
+
+                console.log("here");
+                var elem = e;
+                /*                             
+                        <div id="article" onclick="ProcessDivOnClick(this);">
+                          <div id="img"><img height="50" id="image" src="http://www.nasa.gov/sites/default/files/thumbnails/image/wolf_ast_2015162_lrg.jpg" width="50">
+                          </div>
+                          <div id="title"> Eruption of Wolf Volcano, Galapagos Islands </div>
+                          <div id="summary"> In late May 2015, the highest volcano in the Galapagos Islands, Wolf volcano, erupted for the first time in 33 years. The wide image and closeup of Wolf was acquired on June 11, 2015, by the ASTER instrument on NASA's Terra satellite. The false-color images combine near-infrared, red, and green light (ASTER bands 3-2-1). </div>20
+                          <div id="lnk"> <a href="http://www.nasa.gov/image-feature/eruption-of-wolf-volcano-galapagos-islands" id="article-link">-&gt;</a> </div>
+                        </div>
+                */
+                //
+                //console.log(elem);
+
+/*
+                var jqElem = $(this);
+                //
+                console.log(jqElem);
+*/
+
+                var lnk = elem.find('#lnk');
+                console.log(lnk);
+                lnk.hide();
+
+
+                /*
+                var elemId = e.srcElement.id;
+                // image-1
+                ////console.log(elemId);
+                var res = elemId.split("-");
+                var clickedId = res[1];
+                console.log(clickedId);
+                */
+
+                ///console.log("Clicked!!!");
+                /*
+                var visible = document.getElementById("article-link-"+clickedId).style.visibility;
+                if(visible === 'visible') {
+                    document.getElementById("article-link-"+clickedId).style.visibility = 'hidden';
+                    document.getElementById("summary-"+clickedId).style.visibility = 'hidden';
+                } else {
+                    document.getElementById("article-link-"+clickedId).style.visibility = 'visible'; 
+                    document.getElementById("summary-"+clickedId).style.visibility = 'visible';
+                }
+                */
+            }
+
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                //document.getElementsByTagName("head")[0].appendChild(script);
+                $('head')[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/14/index2.JQuery.html b/POC/w2/14/index2.JQuery.html
new file mode 100644
index 0000000..3c352a3
--- /dev/null
+++ b/POC/w2/14/index2.JQuery.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article" onclick="ProcessDivOnClick($(this));">
+    <div id="img"><img height="50" id="image" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title">
+        ${title}
+    </div>
+    <div id="summary">
+        ${description}
+    </div>20
+    <div id="lnk">
+        <a href=${link}
+        id="article-link">-&gt;</a>
+    </div>
+</div>
+</script>
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------
+            // Show/hide elements on click in parent div
+            // -----------------------------------------------------------------------------------
+            var ProcessDivOnClick = function(e) {
+                /*                             
+                        <div id="article" onclick="ProcessDivOnClick(this);">
+                          <div id="img"><img height="50" id="image" src="http://www.nasa.gov/sites/default/files/thumbnails/image/wolf_ast_2015162_lrg.jpg" width="50">
+                          </div>
+                          <div id="title"> Eruption of Wolf Volcano, Galapagos Islands </div>
+                          <div id="summary"> In late May 2015, the highest volcano in the Galapagos Islands, Wolf volcano, erupted for the first time in 33 years. The wide image and closeup of Wolf was acquired on June 11, 2015, by the ASTER instrument on NASA's Terra satellite. The false-color images combine near-infrared, red, and green light (ASTER bands 3-2-1). </div>20
+                          <div id="lnk"> <a href="http://www.nasa.gov/image-feature/eruption-of-wolf-volcano-galapagos-islands" id="article-link">-&gt;</a> </div>
+                        </div>
+                */
+                var elem = e;
+                var lnk = elem.find('#lnk');
+                //lnk.hide();
+                console.log(lnk.is(':visible'));
+                lnk.is(':visible') === true ? lnk.hide() : lnk.show();
+                
+                /*
+                var elemId = e.srcElement.id;
+                // image-1
+                ////console.log(elemId);
+                var res = elemId.split("-");
+                var clickedId = res[1];
+                console.log(clickedId);
+                */
+
+                ///console.log("Clicked!!!");
+                /*
+                var visible = document.getElementById("article-link-"+clickedId).style.visibility;
+                if(visible === 'visible') {
+                    document.getElementById("article-link-"+clickedId).style.visibility = 'hidden';
+                    document.getElementById("summary-"+clickedId).style.visibility = 'hidden';
+                } else {
+                    document.getElementById("article-link-"+clickedId).style.visibility = 'visible'; 
+                    document.getElementById("summary-"+clickedId).style.visibility = 'visible';
+                }
+                */
+            }
+
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                //document.getElementsByTagName("head")[0].appendChild(script);
+                $('head')[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/15.r/index2.JQuery.html b/POC/w2/15.r/index2.JQuery.html
new file mode 100644
index 0000000..3fc11b6
--- /dev/null
+++ b/POC/w2/15.r/index2.JQuery.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article" onclick="ProcessDivOnClick($(this));">
+    <div id="img"><img height="50" id="image" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title">
+        ${title}
+    </div>
+    <div id="summary">
+        ${description}
+    </div>20
+    <div id="lnk">
+        <a href=${link}
+        id="article-link">-&gt;</a>
+    </div>
+</div>
+</script>
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------
+            // Show/hide elements on click in parent div
+            // -----------------------------------------------------------------------------------
+            var ProcessDivOnClick = function(elem) {
+                /*                             
+                        <div id="article" onclick="ProcessDivOnClick(this);">
+                          <div id="img"><img height="50" id="image" src="http://www.nasa.gov/sites/default/files/thumbnails/image/wolf_ast_2015162_lrg.jpg" width="50">
+                          </div>
+                          <div id="title"> Eruption of Wolf Volcano, Galapagos Islands </div>
+                          <div id="summary"> In late May 2015, the highest volcano in the Galapagos Islands, Wolf volcano, erupted for the first time in 33 years. The wide image and closeup of Wolf was acquired on June 11, 2015, by the ASTER instrument on NASA's Terra satellite. The false-color images combine near-infrared, red, and green light (ASTER bands 3-2-1). </div>20
+                          <div id="lnk"> <a href="http://www.nasa.gov/image-feature/eruption-of-wolf-volcano-galapagos-islands" id="article-link">-&gt;</a> </div>
+                        </div>
+                */
+                var lnk = elem.find('#lnk');
+                var summary = elem.find('#summary');
+                console.log(lnk.is(':visible'));
+                lnk.is(':visible') === true ? lnk.hide() : lnk.show();
+                summary.is(':visible') === true ? summary.hide() : summary.show();
+                
+                /*
+                var elemId = e.srcElement.id;
+                // image-1
+                ////console.log(elemId);
+                var res = elemId.split("-");
+                var clickedId = res[1];
+                console.log(clickedId);
+                */
+
+                ///console.log("Clicked!!!");
+                /*
+                var visible = document.getElementById("article-link-"+clickedId).style.visibility;
+                if(visible === 'visible') {
+                    document.getElementById("article-link-"+clickedId).style.visibility = 'hidden';
+                    document.getElementById("summary-"+clickedId).style.visibility = 'hidden';
+                } else {
+                    document.getElementById("article-link-"+clickedId).style.visibility = 'visible'; 
+                    document.getElementById("summary-"+clickedId).style.visibility = 'visible';
+                }
+                */
+            }
+
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                //document.getElementsByTagName("head")[0].appendChild(script);
+                $('head')[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/2/index2.JQuery.html b/POC/w2/2/index2.JQuery.html
new file mode 100644
index 0000000..8f0984b
--- /dev/null
+++ b/POC/w2/2/index2.JQuery.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <h1>Super Yahoo pipes</h1>
+    <script type="text/javascript" src="jquery-1.4.4.js"></script>
+    <script type="text/javascript" src="jquery.tmpl.js"></script>  
+  </head>
+    <body>
+        <div id="news">
+        </div>
+         <script id="bookTemplate" type="text/x-jQuery-tmpl">
+            <div>
+                <h2>${title}</h2>
+            </div>
+        </script>
+
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                document.getElementsByTagName("head")[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/3/index2.JQuery.html b/POC/w2/3/index2.JQuery.html
new file mode 100644
index 0000000..dd537a6
--- /dev/null
+++ b/POC/w2/3/index2.JQuery.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <h1>Super Yahoo pipes</h1>
+    <script type="text/javascript" src="jquery-1.4.4.js"></script>
+    <script type="text/javascript" src="jquery.tmpl.js"></script>  
+  </head>
+    <body>
+        <div id="news">
+        </div>
+         <script id="bookTemplate" type="text/x-jQuery-tmpl">
+            <div>
+                <p>${title}</p>
+                <p>${description}</p>
+                <p>${link}</p>
+                <p>${enclosure.url}</p>
+            </div>
+        </script>
+
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                document.getElementsByTagName("head")[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/4/index2.JQuery.html b/POC/w2/4/index2.JQuery.html
new file mode 100644
index 0000000..dca4874
--- /dev/null
+++ b/POC/w2/4/index2.JQuery.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <h1>Super Yahoo pipes</h1>
+    <script type="text/javascript" src="jquery-1.4.4.js"></script>
+    <script type="text/javascript" src="jquery.tmpl.js"></script>  
+  </head>
+    <body>
+        <div id="news">
+        </div>
+
+        <script id="bookTemplate" type="text/x-jQuery-tmpl">
+            <div id="article-${count()}">
+            </div>
+        </script>
+
+        <script type="text/javascript">
+            var iii = 0;
+            function count()
+            {
+                return iii++;
+            }
+        </script>
+
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                document.getElementsByTagName("head")[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/5.v/index2.JQuery.html b/POC/w2/5.v/index2.JQuery.html
new file mode 100644
index 0000000..c1a4597
--- /dev/null
+++ b/POC/w2/5.v/index2.JQuery.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <h1>Super Yahoo pipes</h1>
+    <script type="text/javascript" src="jquery-1.4.4.js"></script>
+    <script type="text/javascript" src="jquery.tmpl.js"></script>  
+  </head>
+    <body>
+        <div id="news">
+        </div>
+
+        <script id="bookTemplate" type="text/x-jQuery-tmpl">
+            <div id="article-${count()}">
+                <div id="img-${count()}"><img height="50" id="image-${count()}" src=
+                ${enclosure.url}
+                width="50"></div>
+
+                <div id="title-${count()}">
+                    ${title}
+                </div>
+
+                <div id="summary-${count()}">
+                    ${description}
+                </div>20
+
+                <div id="lnk-${count()}">
+                    <a href=${link}
+                    id="article-link-${count()}">-&gt;</a>
+                </div>
+            </div>
+        </script>
+
+        <script type="text/javascript">
+            var iii = 0;
+            function count()
+            {
+                return iii++;
+            }
+        </script>
+
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                document.getElementsByTagName("head")[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/6/index2.JQuery.html b/POC/w2/6/index2.JQuery.html
new file mode 100644
index 0000000..f4f5ae3
--- /dev/null
+++ b/POC/w2/6/index2.JQuery.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>  
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article-${count()}">
+    <div id="img-${count()}"><img height="50" id="image-${count()}" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title-${count()}">
+        ${title}
+    </div>
+    <div id="summary-${count()}">
+        ${description}
+    </div>20
+    <div id="lnk-${count()}">
+        <a href=${link}
+        id="article-link-${count()}">-&gt;</a>
+    </div>
+</div>
+</script>
+<script type="text/javascript">
+    var iii = 0;
+    function count()
+    {
+        return iii++;
+    }
+</script>
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                document.getElementsByTagName("head")[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/7/index2.JQuery.html b/POC/w2/7/index2.JQuery.html
new file mode 100644
index 0000000..f97f256
--- /dev/null
+++ b/POC/w2/7/index2.JQuery.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article-${count()}">
+    <div id="img-${count()}"><img height="50" id="image-${count()}" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title-${count()}">
+        ${title}
+    </div>
+    <div id="summary-${count()}">
+        ${description}
+    </div>20
+    <div id="lnk-${count()}">
+        <a href=${link}
+        id="article-link-${count()}">-&gt;</a>
+    </div>
+</div>
+</script>
+<script type="text/javascript">
+    var iii = 0;
+    function count()
+    {
+        return iii++;
+    }
+</script>
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                document.getElementsByTagName("head")[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/8/index2.JQuery.html b/POC/w2/8/index2.JQuery.html
new file mode 100644
index 0000000..7df1eb4
--- /dev/null
+++ b/POC/w2/8/index2.JQuery.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article-${count()}">
+    <div id="img-${count()}"><img height="50" id="image-${count()}" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title-${count()}">
+        ${title}
+    </div>
+    <div id="summary-${count()}">
+        ${description}
+    </div>20
+    <div id="lnk-${count()}">
+        <a href=${link}
+        id="article-link-${count()}">-&gt;</a>
+    </div>
+</div>
+</script>
+<script type="text/javascript">
+    var iii = 0;
+    function count()
+    {
+        return iii++;
+    }
+</script>
+        <script type="text/javascript">
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                document.getElementsByTagName("head")[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/POC/w2/9.v/index2.JQuery.html b/POC/w2/9.v/index2.JQuery.html
new file mode 100644
index 0000000..d38811b
--- /dev/null
+++ b/POC/w2/9.v/index2.JQuery.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article-${count()}">
+    <div id="img-${count()}"><img height="50" id="image-${count()}" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title-${count()}">
+        ${title}
+    </div>
+    <div id="summary-${count()}">
+        ${description}
+    </div>20
+    <div id="lnk-${count()}">
+        <a href=${link}
+        id="article-link-${count()}">-&gt;</a>
+    </div>
+</div>
+</script>
+<script type="text/javascript">
+    var iii = 0;
+    function count()
+    {
+        return iii++;
+    }
+</script>
+        <script type="text/javascript">
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                //document.getElementsByTagName("head")[0].appendChild(script);
+                $('head')[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index ebcf770..c430684 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@ <h1>Super Yahoo pipes</h1>
     #errors-block {
         color: red;
     }
-    </style>
+    </style>    
 
     <script type="text/javascript">
 
@@ -107,6 +107,12 @@ <h1>Super Yahoo pipes</h1>
         // fill news article from received data
         // -----------------------------------------------------------------------------------------
         var FillArticle = function (id, response) {
+
+                // Yep!!
+                // if( Object.prototype.toString.call( response.value.items ) === '[object Array]' ) {
+                //     console.log( ' Array!' );
+                // }
+
               /// http://www.nasa.gov/sites/default/files/thumbnails/image/18964422099_a371167fa5_o.jpg
               /// image
               document.getElementById("image-"+id).src = response.value.items[id].enclosure.url;
diff --git a/index2.JQuery.html b/index2.JQuery.html
index ebcf770..f04f7d3 100644
--- a/index2.JQuery.html
+++ b/index2.JQuery.html
@@ -1,211 +1,66 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <h1>Super Yahoo pipes</h1>
-    
-    <style>
-    #errors-block {
-        color: red;
-    }
-    </style>
-
-    <script type="text/javascript">
-
-        // on error show error in error block
-        var OnScriptError = function () {
-              document.getElementById("errors-block").innerHTML = "Error during script generation. src:" 
-                + this.src;
-        };
-
-        // "clean" aererors blocl
-        var CleanError = function () {
-              document.getElementById("errors-block").innerHTML = "";
-        };
-
-        // questions 1
-        // 1 - checks - how much - what makes sense?
-        // 2 - pictures too big - is there a where to get small ones using some magic?
-        // 3 - iterating elements - how much functional style is better that declarative one?
-        // 4 - any comments regarding my code?
-
-        // answer1
-        // 1 - add script OnError handler
-        // 2 - change table to div
-        // 3 - main loop limit - amount of elements in response
-
-        // questions 2 Sep 14
-        // 1 - css - CDN or can put to dusk close to js?
-        // 2 - idea with $, $$, _, __ for my lib
-        // 3 - what is the best name for own lib
-        // 4 - whwn makes sense to write your own lib?
-        // 5 - Max - experience with libs?
-
-        // answer2
-        // 1 - templates, innerHTML
-
-
-        // -----------------------------------------------------------------------------------------
-        // receive news from yahoo server
-        // -----------------------------------------------------------------------------------------
-        window.onload = function () {
-            CleanError();
-
-            //Create a SCRIPT element.
-            var script = document.createElement("script");
- 
-            //Set the Type.
-            script.type = "text/javascript";
- 
-            //Set the source to the URL the JSON Service.
-            script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
-            
-            script.onerror = OnScriptError;
- 
-           //Append the script element to the HEAD section.
-            document.getElementsByTagName("head")[0].appendChild(script);
-        };
-
-        // -----------------------------------------------------------------------------------------
-        // Display all received news on the page
-        // -----------------------------------------------------------------------------------------
-        function DisplayNews(response) {
-            var i;
-
-            ////console.log(response);
-
-            for(i = 0; i < response.count; i++) {
-                CreateMainDivBlock(i);
-                FillArticle(i, response);
+<head>
+<script type="text/javascript" src="jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.tmpl.js"></script>
+<h1>Super Yahoo pipes</h1>
+</head>
+<body>
+<div id="news">
+</div>
+<script id="bookTemplate" type="text/x-jQuery-tmpl">
+<div id="article" onclick="ProcessDivOnClick($(this));">
+    <div id="img"><img height="50" id="image" src=
+    ${enclosure.url}
+    width="50"></div>
+    <div id="title">
+        ${title}
+    </div>
+    <div id="summary">
+        ${description}
+    </div>20
+    <div id="lnk">
+        <a href=${link}
+        id="article-link">-&gt;</a>
+    </div>
+</div>
+</script>
+        <script type="text/javascript">
+            // -----------------------------------------------------------------------------------
+            // Show/hide elements on click in parent div
+            // -----------------------------------------------------------------------------------
+            var ProcessDivOnClick = function(elem) {
+                var lnk = elem.find('#lnk');
+                var summary = elem.find('#summary');
+                console.log(lnk.is(':visible'));
+                lnk.is(':visible') === true ? lnk.hide() : lnk.show();
+                summary.is(':visible') === true ? summary.hide() : summary.show();
             }
-        }
-
-        /*    
-        Example of article block div element
-        <div id="article-0">
-            <div id="img-0"><img height="50" id="image-0" src=
-            "http://www.nasa.gov/sites/default/files/thumbnails/image/18964422099_a371167fa5_o.jpg"
-            width="50"></div>
-
-            <div id="title-0">
-                Flying Over An Aurora
-            </div>
 
-            <div id="summary-0">
-                NASA astronaut Scott Kelly (@StationCDRKelly) captured photographs
-                and video of auroras on June 22, 2015. Kelly wrote, "Yesterday's
-                aurora was an impressive show from 250 miles up. Good morning from
-                the International Space Station! ?#?YearInSpace?"
-            </div>20
-
-            <div id="lnk-0">
-                <a href="http://www.nasa.gov/image-feature/flying-over-an-aurora"
-                id="article-link-0">-&gt;</a>
-            </div>
-        </div>
-        */
-        // -----------------------------------------------------------------------------------------
-        // fill news article from received data
-        // -----------------------------------------------------------------------------------------
-        var FillArticle = function (id, response) {
-              /// http://www.nasa.gov/sites/default/files/thumbnails/image/18964422099_a371167fa5_o.jpg
-              /// image
-              document.getElementById("image-"+id).src = response.value.items[id].enclosure.url;
-              
-              /// Flying Over An Aurora
-              /// title
-              document.getElementById("title-"+id).innerHTML = response.value.items[id].title;
-
-
-              /// NASA astronaut Scott Kelly (@StationCDRKelly) captured photographs and video of auroras on June 22, 2015. Kelly wrote, "Yesterday's aurora was an impressive show from 250 miles up. Good morning from the International Space Station! ‪#‎YearInSpace‬"
-              // summary
-              document.getElementById("summary-"+id).innerHTML = response.value.items[id].description;
-
-              /// http://www.nasa.gov/image-feature/flying-over-an-aurora
-              /// article_link
-              document.getElementById("article-link-"+id).href = response.value.items[id].link;
-        }
-
-        // -----------------------------------------------------------------------------------------
-        // "main" div for article block
-        // -----------------------------------------------------------------------------------------
-        var CreateMainDivBlock = function(id) {
-            var div = document.createElement("div");
-            var parentId = "article-"+id;
-            var imgId,
-                aId;
-
-            div.id = parentId;
-            div.onclick = ProcessDivOnClick;
-            document.getElementById("news").appendChild(div);
-
-            imgId = CreateDivBlock(id, parentId, "img");
-            CreateImgBlock(id, imgId, "image");
-
-            CreateDivBlock(id, parentId, "title");
-            // hide summary at the begining
-            // TODO: put at separate function later
-            var summaryId = CreateDivBlock(id, parentId, "summary");
-            var summary = document.getElementById(summaryId);
-            summary.style.visibility = 'hidden';
-
-            aId = CreateDivBlock(id, parentId, "lnk");
-            CreateLnkBlock(id, aId, "article-link");
-        }
-
-        var ProcessDivOnClick = function(e) {
-            var elemId = e.srcElement.id;
-            // image-1
-            ////console.log(elemId);
-            var res = elemId.split("-");
-            var clickedId = res[1];
-            console.log(clickedId);
-
-            ///console.log("Clicked!!!");
-            var visible = document.getElementById("article-link-"+clickedId).style.visibility;
-            if(visible === 'visible') {
-                document.getElementById("article-link-"+clickedId).style.visibility = 'hidden';
-                document.getElementById("summary-"+clickedId).style.visibility = 'hidden';
-            } else {
-                document.getElementById("article-link-"+clickedId).style.visibility = 'visible'; 
-                document.getElementById("summary-"+clickedId).style.visibility = 'visible';
+// TODO
+// 1 - use jqury instead js
+// 2 - use just one global variable        
+            // -----------------------------------------------------------------------------------------
+            // receive news from yahoo server
+            // -----------------------------------------------------------------------------------------
+            window.onload = function () {
+                //Create a SCRIPT element.
+                var script = document.createElement("script");
+                //Set the Type.
+                script.type = "text/javascript";
+                //Set the source to the URL the JSON Service.
+                script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
+               //Append the script element to the HEAD section.
+                //document.getElementsByTagName("head")[0].appendChild(script);
+                $('head')[0].appendChild(script);
+            };
+
+            // -----------------------------------------------------------------------------------------
+            // Display all received news on the page
+            // -----------------------------------------------------------------------------------------
+            function DisplayNews(response) {
+                $("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
             }
-        }
-
-        // div for an "elementName-<id>" block
-        var CreateDivBlock = function(id, parentId, elementName) {
-            var div = document.createElement("div");
-            var elementId = elementName+"-"+id;
-            div.id = elementId;
-            document.getElementById(parentId).appendChild(div);
-            return elementId;
-        }
-
-        // img block
-        var CreateImgBlock = function(id, parentId, elementName) {
-            var img = document.createElement("img");
-            var elementId = elementName+"-"+id;
-            img.id = elementId;
-            img.width = 50;
-            img.height = 50;
-            document.getElementById(parentId).appendChild(img);
-        }
-
-        // a href block
-        var CreateLnkBlock = function(id, parentId, elementName) {
-            var a = document.createElement("a");
-            var elementId = elementName+"-"+id;
-            a.id = elementId;
-            a.style.visibility = 'hidden';
-            a.innerHTML = "->";
-            document.getElementById(parentId).appendChild(a);
-        }
-
-    </script>
-  </head>
-<body>
-  <div id="errors-block">
-  </div>
-  <div id="news">
-  </div>
-</body>
+        </script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/templates2.html b/templates2.html
new file mode 100644
index 0000000..ff2052e
--- /dev/null
+++ b/templates2.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="robots" content="noindex" />
+  <title>Template Test</title>
+  
+    <script type="text/javascript" src="jquery-1.4.4.js"></script>
+    <script type="text/javascript" src="jquery.tmpl.js"></script>
+  
+  <script type="text/javascript">
+    $(document).ready(function() {
+   
+          var clientData = [
+              { name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },
+              { name: "Mark Goldberg", age: 51, id: 2, phone: ["617-777-1234", "617-222-3333"] },
+              { name: "Jen Statford", age: "25", id: 3, phone: ["608-555-5647", "608-645-8855"] }
+          ];
+   
+          $("#clientTemplate").tmpl(clientData).appendTo("div");
+   
+    });
+  </script>
+
+<script type="text/javascript">
+    var iii = 0;
+    function count()
+    {
+        return iii++;
+    }
+</script>  
+
+<script id="clientTemplate" type="text/html">
+    <p>
+      Count:  ${count()} <br/>
+      ${id} <br/>
+      ${name} - Age: ${age}
+    </p>
+    {{tmpl($data) "#phoneTemplate"}}
+</script>
+
+<script id="phoneTemplate" type="text/html">
+    <ul>{{each phone}}<li>${$value}</li>{{/each}}</ul>
+</script>
+
+</head>
+  
+<body>
+  <div></div>
+</body>
+
+</html>
\ No newline at end of file
