diff --git a/downloader.py b/downloader.py
index fd03137..cf82e62 100644
--- a/downloader.py
+++ b/downloader.py
@@ -44,7 +44,12 @@ def setBaseAndRemoveScriptsAndMore(response, url):
             head.insert(0, base)
         base.set('href', url)
 
+    i = 1
     for bad in tree.xpath("//*"):
+        # set tag-id attribute
+        bad.attrib['tag-id'] = str(i)
+        i += 1
+        
         # remove scripts
         if bad.tag == 'script':
             bad.getparent().remove(bad)
diff --git a/frontend/frontend/static/frontend/assets/js/setup-tool.js b/frontend/frontend/static/frontend/assets/js/setup-tool.js
index 4a6d0bf..57f9cf4 100644
--- a/frontend/frontend/static/frontend/assets/js/setup-tool.js
+++ b/frontend/frontend/static/frontend/assets/js/setup-tool.js
@@ -1,41 +1,122 @@
 (function(){
 
+var MODE_INACTIVE = 1,
+    MODE_PICKING = 2,
+    MODE_PICKED = 3;
+
+var itemsData = {
+    title: { id: null, elementHoverBg: 'yellow', elementSelectedBg: '#006dcc', mode: MODE_INACTIVE },
+    description: { id: null, elementHoverBg: 'yellow', elementSelectedBg: '#2f96b4', mode: MODE_INACTIVE }
+};
+
+function updateButtonAndData(itemData, new_mode, tag_id){
+    if (new_mode)
+        itemData.mode = new_mode;
+    switch (itemData.mode) {
+        case MODE_INACTIVE:
+            $('#st-title').css('color', 'white');
+            $('#st-title').addClass('disabled');
+            itemData.id = null;
+            break;
+        case MODE_PICKING:
+            $('#st-title').css('color', 'yellow');
+            $('#st-title').removeClass('disabled');
+            itemData.id = null;
+            break;
+        case MODE_PICKED:
+            $('#st-title').css('color', 'white');
+            itemData.id = tag_id;
+            break;
+    }
+}
+
+
 var BG_DATA_KEY = 'st-origin-background';
 
+function setBg(element, bg) {
+    if (!$(element).data(BG_DATA_KEY))
+        $(element).data(BG_DATA_KEY, $(element).css('background')); // backup
+    $(element).css({'background': bg});
+}
+function clearBg(element) {
+    if ($(element).data(BG_DATA_KEY))
+        $(element).css({'background': $(element).data(BG_DATA_KEY)});
+}
+
+function selectElement(element, itemData) {
+    setBg(element, itemData.elementSelectedBg);
+}
+
+function unselectElement(element) {
+    clearBg(element);
+}
+
 function styleHoverElement(element) {
-    $(element).data(BG_DATA_KEY, $(element).css('background'));
-    $(element).css({'background': 'yellow'});
+    setBg(element, itemsData.title.elementHoverBg);
 }
 
 function unstyleHoverElement(element) {
-    $(element).css({'background': $(element).data(BG_DATA_KEY)});
+    clearBg(element);
 }
 
-var previous_hover_element = null;
+function onIframeElementClick(event) {
+    event.stopPropagation();
+
+    if (!$(this).attr('tag-id'))
+        return;
+
+    // unpick by click
+    if (itemsData.title.mode == MODE_PICKED && itemsData.title.id == $(this).attr('tag-id')) {
+        unselectElement($('iframe').contents().find('*[tag-id='+ itemsData.title.id +']')[0]);
+        updateButtonAndData(itemsData.title, MODE_PICKING);
+        styleHoverElement(this);
+    }
+    // pick by click
+    else if (itemsData.title.mode == MODE_PICKING) {
+        selectElement(this, itemsData.title);
+        updateButtonAndData(itemsData.title, MODE_PICKED, $(this).attr('tag-id'));
+    }
+}
+
+var previous_hover_element = [];
 
 function onIframeElementHover(event) {
     event.stopPropagation();
 
+    //console.log(event.type + $(this).attr('tag-id'));
+    
+    if (!$(this).attr('tag-id')) // tag is not from original html
+        return;
+
     if ($(this).prop("tagName")) // is not document object
-        if (event.type == 'mouseenter') {
-            styleHoverElement(this);
-            if (previous_hover_element)
-                unstyleHoverElement(previous_hover_element);
-            previous_hover_element = this;
-        }
-        else {
-            unstyleHoverElement(this);
-        }
+        if (itemsData.title.mode == MODE_PICKING)
+            if (event.type == 'mouseenter') {
+                styleHoverElement(this);
+                if (this != previous_hover_element)
+                    unstyleHoverElement(previous_hover_element);
+                previous_hover_element = this;
+            }
+            else { // mouseleave
+                unstyleHoverElement(this);
+            }
 }
 
+var events_ready = false;
+
 function onItemButtonClick(event) {
-    if ($(this).hasClass('disabled')) { // start picking
-        $(this).removeClass('disabled');
-        $('iframe').contents().on('mouseenter mouseleave', '*', onIframeElementHover);
+    if (itemsData.title.mode == MODE_INACTIVE) { // start
+        if (!events_ready) { // temp logic: attche events on first button click
+            $('iframe').contents().on('mouseenter mouseleave', '*', onIframeElementHover);
+            $('iframe').contents().on('click', '*', onIframeElementClick);
+            events_ready = true;
+        }
+        
+        updateButtonAndData(itemsData.title, MODE_PICKING);
     }
     else { // stop picking
-        $(this).addClass('disabled');
-        $('iframe').contents().off('mouseenter mouseleave', '*', onIframeElementHover);
+        if (itemsData.title.mode == MODE_PICKED)
+            unselectElement($('iframe').contents().find('*[tag-id='+ itemsData.title.id +']')[0]);
+        updateButtonAndData(itemsData.title, MODE_INACTIVE);
     }
 }