// ==UserScript==
// @name				deviantEXPERIENCE:CrystalBall
// @namespace			http://dancewiththesky.deviantart.com
// @description			A user-friendly interface to deviantART Search feature
// @include				http://*.deviantart.com*
// @exclude				http://my.deviantart.com/journal/update
// @exclude				http://*.deviantart.com/friends/
// @exclude				http://*.deviantart.com/myfriends/
// @exclude				http://chat.deviantart.com/chat/* 
// @exclude				http://ads.deviantart.com*
// @exclude				http://backend.deviantart.com*
// @x-pkg-guid			{78533c73-dead-4339-aebb-0ebad9476c6f}
// @x-pkg-version		0.2.2         
// ==/UserScript==

/* ==UpdateInfo==

	0.2.1: Improved category tree browser, fully dynamic and with category descriptions. Fixed for v6.  
	0.2.0.3: Migrated to ChickenFillet and became compatible with Firefox 3.
	0.2.0.2: Updated category tree. The launch icon appears only when the search form is present (and not in chat rooms, for example).  
	0.2.2: Fixed trigger. Updated Category Tree. New update URL.

   ==/UpdateInfo== */

// TODO fix indention and general cleanup

(function(){

	const TOP_CATEGORIES = [
		{"title":"Digital Art","path":["art","digitalart"],"children":[],"id":"759","flag":0},
		{"title":"Photography","path":["art","photography"],"children":[],"id":"469","flag":0},
		{"title":"Traditional Art","path":["art","traditional"],"children":[],"id":"758","flag":0},
		{"title":"Film & Animation","path":["art","film"],"children":[],"id":"2060","flag":0},
		{"title":"Contests","path":["art","contests"],"children":[],"id":"309","flag":0},

		{"title":"Customization","path":["art","customization"],"children":[],"id":"1585","flag":0},		
		{"title":"Artisan Crafts","path":["art","artisan"],"children":[],"id":"1201","flag":0},
		{"title":"Designs & Interfaces","path":["art","designs"],"children":[],"id":"355","flag":0},
		
		{"title":"Game Development Art","path":["art","gameart"],"children":[],"id":"2598","flag":0},
		{"title":"Literature","path":["art","literature"],"children":[],"id":"1586","flag":0},
		{"title":"Resources & Stock","path":["art","resources"],"children":[],"id":"560","flag":0},
		{"title":"Cartoons & Comics","path":["art","cartoons"],"children":[],"id":"1587","flag":0},
		{"title":"Manga\/Anime","path":["art","manga"],"children":[],"id":"1615","flag":0},

		{"title":"Flash","path":["art","flash"],"children":[],"id":"368","flag":0},
		{"title":"Fan Art","path":["art","fanart"],"children":[],"id":"1892","flag":1},
		{"title":"Anthro","path":["art","anthro"],"children":[],"id":"1633","flag":0},
		{"title":"Community Projects","path":["art","projects"],"children":[],"id":"1645","flag":0},
		
		{"title":"deviantART Related","path":["art","darelated"],"children":[],"id":"749","flag":0},
		{"title":"Scraps","path":["art","scraps"],"children":null,"id":"1123","flag":0}
	];



/// LIBRARY FUNCTIONS ////////////////////////////////////////////////////////////////

	function $(id){
		return document.getElementById(id);
	}

    function $xp(path){
        var result = document.evaluate(path, document, null, 
                                XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
        return result? result.snapshotItem(0) : null;
    }
    // get form element value
   function $f(id){
      // trim and return value
      return $(id).value.replace(/^\s*|\s*$/g,"");
   }

/// PRESENTAION //////////////////////////////////////////////////////////////////////

  function attachButton(){
	// does search form exist?
	if(!$("searchInput")){
		return;
	}

	var trigger = document.createElement('span');
	trigger.innerHTML = 'Ask the CrystalBall ...';
	trigger.className = 'crystallBallTrigger';
	trigger.addEventListener('click', launch, false);
	document.body.appendChild(trigger);

	var triggerCss = document.createElement('style');
	triggerCss.innerHTML = 
		'.crystallBallTrigger {position: absolute; right: 59px; top: 48px; cursor: pointer; color: white} ' +
		'.crystallBallTrigger:hover {text-decoration: underline}';
	document.body.appendChild(triggerCss);
  }

  function toggleComponent(idPrefix){
      var container = $('__advance-' + idPrefix + '-container');
      var toggleImg = $('__advance-' + idPrefix + '-toggle-img'); 
      if (container.style.display == 'none'){
        container.style.display = 'table-row';
        toggleImg.src = UNFOLDED_IMG_SRC;
      } else {
        container.style.display = 'none';
        toggleImg.src = FOLDED_IMG_SRC;
      }
  }
  
  unsafeWindow.__crystallball_toggleCategory =  function(catpath){ // toggle category
	var container = $('__crystallball_catContainer_' + catpath.split('/').join('_'));

	if(container.innerHTML == ""){
		container.innerHTML = "Loading ...";
		// can't access GM_xmlhttpRequest from unsafeWindow
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 
			'http://' + window.location.host + '/global/difi/?c[]=Menu;get;' + catpath + ',2&t=json', true);
		xhr.onreadystatechange = function (e) {
			if (xhr.readyState == 4) {
				if(xhr.status == 200){
					eval("var response = " + xhr.responseText);
					if(response.DiFi.status == 'SUCCESS'){
							container.innerHTML = buildCategoryHtml(
								response.DiFi.response.calls[0].response.content.children, 
								container.indentLevel
							);
					} else {
						alert('Cannot obtain sub-categories at the moment. Try again later');
						container.innerHTML = '';
						container.style.display = 'none';
      					$('__crystallball_catEntry_' + 
							catpath.split('/').join('_')).style.backgroundImage = 'url(' + ADD_IMG_SRC + ')';
					}
				} else { 
					alert('Cannot contact server to obtain sub-categories at the moment. Try again later');
					container.innerHTML = '';
					container.style.display = 'none';      
					$('__crystallball_catEntry_' + 
						catpath.split('/').join('_')).style.backgroundImage = 'url(' + ADD_IMG_SRC + ')';

				}
			}
		};
		xhr.send(null);
	}
    
    if(container.style.display == 'none'){
      container.style.display = 'block';
      $('__crystallball_catEntry_' + catpath.split('/').join('_')).style.backgroundImage = 
		'url(' + REMOVE_IMG_SRC + ')';
    } else {
      container.style.display = 'none';
      $('__crystallball_catEntry_' + catpath.split('/').join('_')).style.backgroundImage = 
		'url(' + ADD_IMG_SRC + ')';
    }
  }
  
  var onlyCatArr = new Array();
  var excludeCatArr = new Array();
  
  function manageUniquely(arr, value, add /* flag, other value is 'remove' */){
      if (add){
        if (arr.indexOf(value) == -1){
          arr.push(value);
        }
      } else {
        if (arr.indexOf(value) != -1){
          arr.splice(arr.indexOf(value), 1); // remove value
        }
      }
  }

  
  unsafeWindow.__crystallball_selectCategory = function(event, action, path){
	path = path.substring(4);
	checkbox = event.target;

    if ('O' == action){
      if (excludeCatArr.indexOf(path) != -1){
        $('__crystallball_catX_art_' + path.split('/').join('_')).checked = false;
		manageUniquely(excludeCatArr, path, false);
      }
      manageUniquely(onlyCatArr, path, checkbox.checked);
    } else if ('X' == action ){
      if (onlyCatArr.indexOf(path) != -1){
        $('__crystallball_catO_art_' + path.split('/').join('_')).checked = false;
		manageUniquely(onlyCatArr, path, false);
      }
      manageUniquely(excludeCatArr, path, checkbox.checked);
    }
    
    var summaryStr = '';
    if (onlyCatArr.length == 0){
      summaryStr += '<i>Include all categories</i><br />';
    } else {
      summaryStr += '<i>Include only (' + onlyCatArr.length + ')</i>:<br />';
      summaryStr += onlyCatArr.join('<br />');
	  if(onlyCatArr.length > 0){
		summaryStr += '<br />'; 
	  }	
    }
    
    if (excludeCatArr.length > 0){
      summaryStr += '<i>Exclude (' + excludeCatArr.length + ')</i>:<br />';
      summaryStr += excludeCatArr.join('<br />');
    }
    
    $('__advance-cat-summary').innerHTML = summaryStr;
	event.stopPropagation();
  }

  unsafeWindow.__crystallball_toggleCatHelp = function(event, catId){
	var container = $('__crystallball_catHelp_' + catId);

	if (container.innerHTML == ''){
		container.innerHTML = "Loading ...";
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 
			'http://' + window.location.host + '/global/difi/?c[]=Deck;categoryHelp;' + catId + '&t=json', true);

		xhr.onreadystatechange = function (e) {
			if (xhr.readyState == 4) {
				if(xhr.status == 200){
					eval("var response = " + xhr.responseText);
					if(response.DiFi.status == 'SUCCESS'){
							var helpText = response.DiFi.response.calls[0].response.content;
							if (helpText == ""){
								container.innerHTML = "[No Description Available]";
							} else {
								container.innerHTML =  
									"<i>" + helpText.replace('<p class="read">', '').replace('</p>', '') + "</i>";
							}
					} else {
						alert('Cannot obtain category description the moment. Try again later');
						container.innerHTML = '';
						container.style.display = 'none';
					}
				} else { 
					alert('Cannot contact server to obtain category description at the moment. Try again later');
					container.innerHTML = '';
					container.style.display = 'none';      
				}
			}
		};
		xhr.send(null);
	}

    if(container.style.display == 'none'){
      container.style.display = 'block';
    } else {
      container.style.display = 'none';
    }

	event.stopPropagation();
  }
  
  function buildSearchComponent(title, idPrefix, addAllAndExact){
  
    var code =    '<tr>' + 
                    '<td class="__advance-toggler" id="__advance-' + idPrefix + '-toggler"><img id="__advance-' + idPrefix + '-toggle-img" src="'+FOLDED_IMG_SRC+'" style="vertical-align: middle"/>' +
                    ' In <i>' + title + '</i> ...</td>' +
                  '</tr>' + 
                  '<tr id="__advance-' + idPrefix + '-container" style="display:none">' + 
                    '<td>' +
                        '<table class="__advance-table" style="background-color: #495957">';
                      
    if(addAllAndExact){                              
     code +=             '<tr>' + 
                            '<td style="width: 50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;with <b>all</b> of </td>' +
                            '<td><input class="__advance_form_text" type="text" id="__advance-' + idPrefix + '-all"></td>' + 
                          '</tr>' +
                        '<tr>' + 
                          '<td style="width: 50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;with the <b>exact phrase</b> </td>' +
                          '<td><input type="text" class="__advance_form_text" id="__advance-' + idPrefix + '-phrase"></td>' + 
                        '</tr>' ;
    }
                       
    code +=             '<tr>' + 
                          '<td style="width: 50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;with <b>at least one</b> of </td>' +
                          '<td><input type="text" class="__advance_form_text" id="__advance-' + idPrefix + '-any"></td>' + 
                        '</tr>' +
                        '<tr>' + 
                          '<td style="width: 50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>without</b> any of</td>' +
                          '<td><input type="text" class="__advance_form_text" id="__advance-' + idPrefix + '-without"></td>' +
                        '</tr>' +
                      '</table>' + 
                    '</td>' +
                  '</tr>';
                  
    return code;                  
  }

  // think of teh children!
  const MATURE_VISUAL_CATS = [
	'art/photography/people/nude',
	'art/photography/people/fetish',
	'art/resources/stockart/model/women/femalenude',
	'art/resources/stockart/model/men/malenude'
  ];

  function buildCategoryHtml(/*json*/ cats, indentLevel){	
		if(!indentLevel){
			indentLevel = 0;
		} else {
			indentLevel = parseInt(indentLevel);
		}

		var htmlCode = '';
		for(var i = 0; i< cats.length; i++){

			if (MATURE_VISUAL_CATS.indexOf(cats[i].path.join('/')) != -1){
				continue;
			}			

			var isChildrenAvailable = cats[i]['children'];
			var isChildrenPresent = isChildrenAvailable && cats[i]['children'].length > 0;

			htmlCode += "<div id='__crystallball_catEntry_" + cats[i].path.join('_') + "' class='__crystallball_catEntry ";

			if(isChildrenAvailable){
				htmlCode += " __crystallball_toggleButton' onclick='__crystallball_toggleCategory(\"" +
						cats[i].path.join('/') + "\")' ";
			} else {
				htmlCode += "' ";
			}

			htmlCode += ">" + cats[i].title;

			// TODO a three-state toggle box?
			htmlCode += 
				  "<span style='position: absolute; right: 75px;' ><img style='cursor: pointer; vertical-align: middle' src='" + INFO_IMG_SRC  + "' title='Wut?' onclick='__crystallball_toggleCatHelp(event, " + cats[i]["id"]  + ")'/>&nbsp;&nbsp;<input id='__crystallball_catO_" + cats[i].path.join('_') + "' style='vertical-align: middle' type='checkbox'  onclick='__crystallball_selectCategory(event, \"O\", \"" + cats[i].path.join('/') + "\");'/>O <input  id='__crystallball_catX_" + cats[i].path.join('_') + "'style='vertical-align: middle'  type='checkbox' onclick='__crystallball_selectCategory(event, \"X\", \"" + cats[i].path.join('/') + "\");'/>X</span>";

			htmlCode += "</div><div style='display: none; padding: 0.5em 0; margin-left: " + ((indentLevel + 2) * 18 ) + "px'  id='__crystallball_catHelp_" + cats[i].id  + "'></div>";


			if(isChildrenAvailable){
				htmlCode += "<div indentLevel='" + (indentLevel + 1) + "' id='__crystallball_catContainer_" +
 							cats[i].path.join('_') + "' style='display: none; margin-left: " +
							((indentLevel + 1) * 18 )+ "px' >";
				if (isChildrenPresent){
					htmlCode += buildCategoryHtml(cats[i]['children'], indentLevel + 1);
				}
				htmlCode += "</div>";
			} 

		}

		return htmlCode;
  }

  function launch(){
    if (!$('__advance-srch-div')){
        var DE_ADVSRCH_GUI_HTML = 
          '<form id="__advance-srch-form" onsubmit="return false;" >' +
            '<fieldset>' +
              '<legend>CrystalBall</legend>' +
              '<br />What do you want to search in?&nbsp;&nbsp;' + 
              '<select id="__advance-section-select" style="border-width: 1px; border-style: solid; border-color: #3E4B48; background-color: #96C56A; width: 30%; font-size: 10pt;">' +
                '<option value="browse" selected="selected">All Deviations</option>' +
                '<option value="shop">Shop</option>' +
                '<option value="news">News</option>' +
                '<option value="today">Journals</option>' +
                '<option value="forum">Forum</option>' +
                '<option value="chat">Chat</option>' +
              '</select>' +
				'<div style="background-color: #495957; padding-left: 3em; margin-top: 2em;"><p>For each entry you can add a <strong>space-separated</strong> list of values. For example: cat dog rat (with no commas between them)</p></div>' + 
              '<table class="__advance-table" id="__advance-single" style="display: none">' +
                '<tr class="__advance-help">' + 
                  '<td><p>Fill in some keywords</p></td>' +
                '</tr>' +
                '<tr>' + 
                  '<td><input type="text" id="__advance-one-liner" ' + 
                  'style="width: 90%;"/></td>' +
                '</tr>' +
              '</table>' +
              '<table class="__advance-table" id="__advance-multi">' + 
                '<tr class="__advance-help">' + 
                  '<td><p><!--<b>Fill in some search parameters</b>--></p></td>' +
                '</tr>' +
                  buildSearchComponent('Title, Description or Keywords', 'tdk', true) +
                '<tr>' + 
                  '<td class="__advance-toggler" id="__advance-cat-toggler">' + 
                  '<img id="__advance-cat-toggle-img" src="' + FOLDED_IMG_SRC + '" style="vertical-align: middle" /> In <i>Category</i> ...</td>' +
                '</tr>' + 
                '<tr id="__advance-cat-container" style="display:none">' + 
                    '<td style="background-color: #495957; padding-left: 3em">' +
                    '<p>All categories are included by default. ' +
                    'Ticking the <b>O</b> box of a category signifies that you want to exclude ' +
                    '<b>all</b> categories <b>except</b> for the ones with their <b>O</b> boxes ticked (O stands for Only.) ' +
                    'Ticking the <b>X</b> box of a category signifies that you want to exclude ' +
                    'the ones with their <b>X</b> boxs ticked from your search results (X stands for eXclude.) '+
                    'No comprehensive sanity checks are done on your selections so try to make sure they make sense. '+
                    '</p><div id="__crystallball_catList">' +
						buildCategoryHtml(TOP_CATEGORIES) +
                    '</div><p><b>Category Selection Summary</b><br />' + 
                    '<span id="__advance-cat-summary"><i>Include all categories</i><br /></span></p>' +
                    '</td>'+
                 '</tr>' +                  
                  buildSearchComponent('Title only', 'title', true) + 
                  buildSearchComponent('Description only', 'description', true) +
                  buildSearchComponent('Keywords only', 'keywords', false) + 
                  buildSearchComponent('Deviant Name (artist)', 'by', false) + 
                  buildSearchComponent('Width', 'width', false) + 
                  buildSearchComponent('Height', 'height', false) + 
                '<tr>' + 
                  '<td class="__advance-toggler" id="__advance-order-toggler">' + 
                  '<img id="__advance-order-toggle-img" src="' + FOLDED_IMG_SRC + '" style="vertical-align: middle" /> Order by ...</td>' +
                '</tr>' + 
                '<tr id="__advance-order-container" style="display:none">' + 
                  '<td>' +
                      '<table class="__advance-table" style="background-color: #495957">' + 
                        '<tr>' + 
                          '<td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="__advance-order" value="newest" id="__advance-order-newest" checked="checked"/><label for="__advance-order-newest">Newest</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="__advance-order" value="popular" id="__advance-order-popular"/><label for="__advance-order-popular">Popular</label></td>' + 
                        '</tr>' +
                      '</table>' +
                   '</td>'+
                 '</tr>' +
               '</table>'+
               '<br /><br /><table class="__advance-table"><tr><td align="right"><span id="__advance-perform" style="cursor: pointer; color: #374341; padding: 2px; border-style: solid; border-width: 1px; border-color: #374341; background-color: #96C56A;"><img style="vertical-align: middle" src="' +
               SEARCH_BUTTON_ICON_SRC         
               +'" /><span style="font-variant: small-caps"> <b>Search <span id="__advance-section-name">All Deviations</span></b>&nbsp;</span></span></td></tr></table>' +
            '</fieldset>' +
          '</form><span id="__advance-footer" style="position: absolute; bottom: 10px; left: 75px; font-size: xx-small;">' +
          'Dedicated to deviantART community!</span>';
        
        var DE_ADVSRCH_STYLE = 
          '#__advance-srch-div { position: absolute; top: 100px; background-color: #374341; ' +
                                'opacity: 0.95; padding: 25px; z-Index: 1000; width: 550px; color: white; ' + 
                                'border-width: 1px; border-color: white; border-style: solid; font-size: 8.5pt}' +   
          '#__advance-srch-div p { margin: 0px; padding: 10px 0px; }' +  
          '#__advance-srch-form { padding: 5px }' +
          '#__advance-srch-form fieldset {border-width: 0px;}' +
          '#__advance-srch-form legend { font-weight: bold; color: white}' +
          '#__advance-srch-form input { background-color: #96C56A; border-width: 0px; border-color: black; border-style: solid;}' +
          '#__advance-close { position: absolute; right: 10px; top: 10px; cursor: pointer; }' + 
          '.__advance_form_text {width: 100%}' + 
          '.__advance-table { width: 100%; height: 100%; }' + 
          '.__advance-table td { width: 100%; height: 100%; padding: 1px}' + 
          '.__advance-help p { padding; 10px 0 !important; margin: 0px }' + 
          '.__advance-toggler { cursor: pointer;}' +
		  '.__crystallball_catEntry { padding: 3px 0 3px 18px; } ' + 
		  '.__crystallball_catEntry:hover {background-color: #8EBA64; color:#374341 }' + 
		  '.__crystallball_toggleButton { background-image: url(' + ADD_IMG_SRC + '); background-position: center left; background-repeat: no-repeat; cursor: pointer }';
                
        var advSrchDiv = document.createElement('div');
        advSrchDiv.id = '__advance-srch-div';
        advSrchDiv.innerHTML = DE_ADVSRCH_GUI_HTML;
        advSrchDiv.style.left = ((window.innerWidth / 2) - 275) + 'px';
        document.body.appendChild(advSrchDiv);
        
        var closeIcon = document.createElement('img');
        closeIcon.id = "__advance-close";
        closeIcon.src = CLOSE_ICON_SRC;
        closeIcon.addEventListener('click', hideSrchFormDiv, false);
        closeIcon.title = "Close";
        advSrchDiv.appendChild(closeIcon);
       
        var aboutLink = document.createElement('a');
        aboutLink.href = "http://dancewiththesky.deviantart.com";
        var aboutIcon = document.createElement('img');
        aboutLink.appendChild(aboutIcon);
        aboutIcon.src = ABOUT_ICON_SRC;
        aboutIcon.style.top = "10px";
        aboutIcon.style.left = "10px";
        aboutIcon.style.position = "absolute";
        aboutIcon.title = "deviantEXPERIENCE:CrystalBall by dancewiththesky. Click to visit author's profile.";
        advSrchDiv.appendChild(aboutLink);
       
        advSrchStyle = document.createElement('style');
        advSrchStyle.innerHTML = DE_ADVSRCH_STYLE;
        document.body.appendChild(advSrchStyle);  

        
        // attach event listeners
        
        $('__advance-section-select').addEventListener('change', function(e){
          if (e.target.value == 'browse' || e.target.value == 'shop'){
            $('__advance-single').style.display = 'none';
            $('__advance-multi').style.display = 'table';
          } else {
            $('__advance-single').style.display = 'table';
            $('__advance-multi').style.display = 'none';
          }
          $('__advance-section-name').innerHTML = e.target.options[e.target.selectedIndex].innerHTML;
        }, false);

        $('__advance-perform').addEventListener('click', submit, false);
        advSrchDiv.addEventListener('keypress', function(e){
          if (e.keyCode == 13 /* Enter key? */ ){
            submit();
          }
        }, false);

        idPrefixes = ['tdk', 'cat', 'title', 'description', 'keywords', 'by', 'width', 'height', 'order'];
        for(var x = 0; x < idPrefixes.length; x++){
          eval("$('__advance-" + idPrefixes[x] + "-toggler').addEventListener('click', function(e){ toggleComponent('" + idPrefixes[x] + "'); }, false)");
        }
        
        // make tdk component visible initially
        toggleComponent('tdk');
      }
         
      $('__advance-srch-div').style.display = 'block';             
   }
   
   function hideSrchFormDiv(){
    $('__advance-srch-div').style.display = 'none';
   }



/// INTERNAL WORKINGS /////////////////////////////////////////////////////////////////////


   function buildSearchStr(idPrefix, hasAllAndExact, addSpec){
      var str = '';    
      
      if(hasAllAndExact){
        if ($f('__advance-' + idPrefix + '-all') != ''){
          str += $f('__advance-'+idPrefix+'-all');
        }
        
        if ($f('__advance-' + idPrefix + '-phrase') != ''){
          str += " \"" + $f('__advance-'+idPrefix+'-phrase') + "\"";
        }
      }
      
	  // TODO trim inbetween empty values
      if ($f('__advance-' + idPrefix + '-any') != ''){
        var anyArr = $f('__advance-' + idPrefix + '-any').split(' ');
        str += ' (' + anyArr.join(' OR ') + ')';
      }
      
      if ($f('__advance-' + idPrefix + '-without') != ''){
        var withoutArr = $f('__advance-' + idPrefix + '-without').split(' ');
        str += ' -' + withoutArr.join(' -'); 
      }
      
      if (addSpec && str != ''){
        str = idPrefix + ':(' + str + ')';
      }
      
      return str == ''? str : str + ' ';
   }

  function submit(){
  
    var section = $f('__advance-section-select');
      
    if (section == 'browse' || section == 'shop'){
        srchStr = '';
        srchStr += buildSearchStr('tdk', true, false);
        srchStr += buildSearchStr('title', true, true);
        srchStr += buildSearchStr('description', true, true);
        idPrefixes = ['keywords', 'by', 'width', 'height'];
        for(var x = 0; x < idPrefixes.length; x++){
              srchStr += buildSearchStr(idPrefixes[x], false, true);
        }
        
        if (onlyCatArr.length > 0){
          srchStr += '(in:' + onlyCatArr.join(' OR in:') + ')';
        }
        
        if (excludeCatArr.length > 0){
          srchStr += ' -in:' + excludeCatArr.join(' -in:') + ' ' ;
        }
        
      if(srchStr == ''){
        alert('Fill in some search parameters.'); return;
      }
    } else {
      srchStr = $f('__advance-one-liner');
      if(srchStr == ''){
        alert('Fill in some keywords.'); return;
      }
    }
 
    var srchLocStr;
          
	if(section  == 'shop'){
		srchLocStr = "http://prints.deviantart.com/?section=shop&q=" + encodeURIComponent(srchStr);
	} else if (section == 'chat'){
        srchLocStr = "http://chat.deviantart.com/?keywords=" + encodeURIComponent(srchStr);
    } else {
        srchLocStr = "http://search.deviantart.com/?section=" +
                     section + "&q=" + encodeURIComponent(srchStr);
    }
    
    if (section == 'browse' || section == 'shop'){
      if ($('__advance-order-popular').checked){
          srchLocStr += "&order=9";
      } else {
		  srchLocStr += "&order=5";
	  }
    }
    
    window.location = srchLocStr;
    $('__advance-section-name').innerHTML = "is in progress ...";
  }



////////////// data: URLs & GENERATED CODE //////////////////////////////////
  
  const SHOW_ICON_SRC =  "data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%18%00%00%00%18%08%06%00%00%00%E0w%3D%F8%00%00%00%06bKGD%00%00%00%00%00%00%F9C%BB%7F%00%00%00%09pHYs%00%00%0D%D6%00%00%0D%D6%01%90oy%9C%00%00%00%09vpAg%00%00%00%18%00%00%00%18%00xL%A5%A6%00%00%03%E8IDATH%C7%D5%95kl%14U%14%C7%7F3%3B%B3%8F.%EDR%ECR0P%1A%5B%BBKJ%D1%08%88%E1%D9%10%85%B4%88%8F%10%83%81%C4%0F%F2I%89%22%C1%18%A3DB%04%B4%0A%A5%E1Q%94%A8%90%18Q%1B%A3%D1%A4%10%23%25%B4*%B2%BC%A5%84%02%02R%D2E%B7-%ED2%F4%B1%B3%B3s%AF%1FZ%60%5BX%60%F5%93'%B9%1F%CE%C9%B9%FF%FF%FC%CF%E3%0E%FC%DFMIv%B6~%BC%E5lwwW!%20%93S%14%05%A4%94%0C%8C%DFLP%14e%F7%F2eo%3CyW%B6%8A%0F%D7%0A)%A5%14B%DC%F3%91R%CAu%95%15v*Lm%90%2F%01%C50%AE%DEs%09%B2%B2%7C%A9%94%01%A0%0E%D2%9AV%7D%FB%CBvG%D3R%5Dhjj%BA%2Bx086%3D%82d%05%C1%60%F0%8E_-%A5%FCo%0AN%9F%3E%7DKr%E8P%88K%CD%17%11B%20%A4%40%D34%A6O%9F%F9%EF%14%8C%1D%7BS~%F3%A5f%B6%EF%D8%CE%A2%85%8B(%2F%9BG%DC%B2%B1%258%1D%0A%D7%8CN%F6%EE%ADs%BC%B5%E2%CD)kW%BF%BF%3F-%05RJ%AE%5E%8D%B2%FB%C7%5D%2Cyy)uG%2Fs6%1A%C1%E9%C9%C0%B2%25%B6%D9%C3%F8%E1%92eK%97S%B5q%FD%CF%AB%D7%AC%9A%B8%E2%ED%95%C7%EEIA%20%10%40Jxw%CD*%96%BC%F4*%DF%1Fn%E5%AFX%16%CF%97%8E%E2%FEa%1E%12B%D0%D4bPw%A2%95h(%CC%2BK%5ES%AB6V6%00%99%C9%98%8Ed%E7%89%D9%8F%AF%9C%3Ae%9A%12%8B%F5r%EAT%13%07%0F%85%18%3D%3A%8F%0B%1D%1A%17%BA%3C%BCX%9A%C7p%9F%1B%B7%EE%C0%16%E0qix%DD%1A%8D%97%E3%B8DO%3C7%DB%AD%8C%7F%A8%A4%AB~_C%E8%3A%E6%80%3DH.U%20P%C4%FE%DF~a%C2%23%138%D0l15%E0G%D75%12%02b%96%8D%90%12%2Ba%D3%D2%DE%8BC%C49%19%C1%F9%E8%A4%C9%EE%D6%D6HU2VJ%02P%D0u%1D%81%8A7%CB%C7%7D%99%3A%A6%95%C0%B4%12%C4%13%82%DE%B8M%7B%B4%87%E0%A8L%5Cf%98%A8%A5%E1%F1d%A0%EB%FA%80%D9%BD%A5%C9B%88%FE%19%EF%8B%B9t%0D%5D%95%B4Ec8%1D%7D%3D2%CD%04m%86%89%AE%81%EAp%A0%20%B0%13%96m%9A%A6C%08a%A5%24%00%A4m%DB7%08%8A%8B%C7%11%0E%87%19%EAtr.%DC%09H%3CN%85!n%8D%B8e%E3ujH%87BG%8F%C2%18%BF%AAtt%5C1G%8C%18y%E0%8E%25%EA%23%E8SS2%AE%84%83%87C%CC%9D%90K%5B%2F%98%09%81%94%0ABHb%96MBH%A2%5D1%DC%FE%02%CA%1E%F6%AB%9F%ED%F8%D4%88F%3B%F7%A6%22P%00%5C.%17999%F8%FD~%1E%9B%3C%85H%24%C2%F9SG%98S%9C%C5%D1%8B%06%FB%1B%2F%22%14%07%D7LI%ED%AFg%D8%D3%D8%C6%FC%12%8D%FA%3D%3F%C81y%F9%DE%AEk%DD%AF%3F%B7%60%FE%C8%01%A0%D7m%5De%C5w%B6m%3F3x%E9ZZZ(%2C(b%EE%B3%0B%F9%E9%F7%08%97%AE%C4%89K%95%07%FD%3A3%82%D9l%D9%B0Z%3C5%EFi%F5%C8%B1%23tvv%08%C30%DA%9D%BAs%CE%E6M%D5%C7o%F7%3Ek%80%B7%7Fa2%81!3Kg%94%04%82E%159%C3r%E2C%B3%87%E9%93%26N%F2%E6%E7%E7g%EC%FCr%E7%9F%E7%2F%FC%E1%EC2z%D6%E6%8E%F0o)%2F%2B%E7%C4%C9FfL%9B)%BE%D8%F9%B9%BAyS%B5r%BB1M%00%06%F07p%0E8Y%BF%AF%E1%ABm%1F%7D%F2%80%AA)k%ACD%EC%F87%DF~%AD%AC%DF%F0%01%AAC%9E)%2C%2Cx%A7%A6%A6f%AB%B0y%AFvW-%B3Jg%E1%F3%F9n%E0%A6%F7%87%E9%EB%99%DA%7FOI%C2%90%00%8B%17%2F~%C1%93%E1%DA%D6%1F%5B%B0ySuM%9A%F8%E9%DB%3FX%1B%F1r%80%84%2B%7F%00%00%00%00IEND%AEB%60%82";

  const CLOSE_ICON_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1QoRFy0Na8CcwAAAAsFJREFUOMttk7tPU2EYh59z6QVtjcbI4CWGxkAreGlquAmpNoiamJC4sRBY/A9cOjgYaRwcTByMC3HQwbsxuJhQJJqwiMHEDg4otdQWSmmhB+G05zufA6WC8iZfvuRNnt97+eVV2BKPwmE9PTHxRMBVdggNxgRcjkJlM6f8Az9r9PkuXbx2za1oGgBSShACaVl8ePjQ/DIz817AlShYNYEq/MLv8/VGhobc8+PjmPn8tupOr5f6jg4+PH1qJpLJMQF9UbC0kVDIkZ2cfBk4dqw3Mji4Aa+ugmVtExCqylo6TSAS0Vfn5o4slUpnBsPh51pnJvPmeGNjz/mBAXc2Hseqr0ePxSCZRGazG7OfOMHeu3epJBIYX79yPBzWjVTq6I9EIqj1qOrj/uvX9cy7d5QLBdS+PtSWFpSODvj+HXX/fvYMD+Patw9FSkrj4/wuFGgOh/Wpz58DuqIoICXlQmGj1ZERcLlw9fbivnEDXVFwejyY8Tj5O3ewgXXDQAqBAqj/eSUl4v595NQUzl27cHq9WNPT5GIxhG1jAzYgqztSd/S7uRl3KISu6zgcDnYHg9SFQsgqLMplxNzcXwEpRA1WW1rw3rqF0+tlPR5ndXQUp8eD7949PO3tmLkcxrdvyJUVAHQp5YaaYSAsi7q2NlxVeHF4GNs00YAD/f3UnTrF+oMHoGnY1aLaBSm7K8Xi4UBbm1ZKJCi9fk3l508Wbt6knMlQXlwk9+oVa7OzJG/fRtE0fH4/6aUl+8fycl6JgVODtycbGrpbg0FXKh5nrVisLWvrUxwOGpqaSBcK4mM6vWBDpzYGIgJPcsVil2kYhwKtrXppfp6KaW6DVYeDBr+f2XxeTP76lbKhPQqp2jFtduI/eLD77OnTLkUIbMtCWlbtTyST1qdsdsaGrigsbrvGrSICenayV4VpG85FYXkz9wfHTVL214b3FAAAAABJRU5ErkJggg==";
  
  const ABOUT_ICON_SRC = "data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%19tEXtSoftware%00www.inkscape.org%9B%EE%3C%1A%00%00%036IDAT8%8Dm%93%5BlTe%14%85%BF%F3%FF%E7ZQ%1A%C0%86N%A1%F46%ED%80N%A9S%82%05MS.F-%FA%A2%A2%86%C4%84%98%18%13%2B%06IL'A%8Ci%A2%AD%17%24%F1A%0D%89%11%D2%F8%E0%83%09%A0G%23%82%8E%D5%A0%05i%19Z%DB%82c%A7b%9D%A1-P%7B%99i%A7v%CE%EFCK%03%C1%9D%EC%97%9D%BDW%D6%5EYKSJqc%15ok%09%00%CF%00u%40p~%DC%05D%80%D6%B8%1B%EE%BBq_%BB%0EP%BC%ADE%00%8D%8Br%CCWw%3E%BA%CE%BE'%E0%13%95%E5%F9%00%9C%BF%98%A4%F3B%C2%3Bt%EC%D7%CCdz%A6%09x%3B%EE%86%BD%05%80%F9%E3%B6%FB%AA%8AB-%2F%3D%EC%9C%8A%0Ep%A2%3DFO%FF0%00kJ%F2x%A0%C6%CF%C6%B5%AB%08%BF%FF%F5%D4O%9D%03%1D%40m%DC%0D%7B%FA%3C%93%C6M%EBJCo%EEz%C8%D9%B3%FFK%AE%8D%A5%D9%FB%DCf*%FD%F9%A4%A7f%F8%A1%23N%AB%DB%C9%F1_b%BC%BB%E7%11%E7%95%03n%F5%8F%1D%F1F%A0%99%A2%FA%E6%40p%FB%7B%A9%BF%87%C7%D4%D3%E1OUQ%7D%B3z%B1%E5%88%CAf%3D%D5%D3%3F%A4F%C7%D3J)%A5N%9E%8E%A9%9A%9D%1F%A9%86%B7%BEP%89%91q%15%DC%BE%3F%5DT%DF%1C%90%B9%FE%AD%2F%BF%F0%E4%86M%A3%E3i%ED%D0%B1%B3%00%18%86%CEg%C7%CFs%D8%3DG%7B%F7_%3C%BE%E5nV.%CF%E5%F3%EF%7B%19%19MQ%BAb%09%25%2B%96%CAS%D1%3F'%04PWU%E1%D3N%B4%C7%00%B0L%9DK%97%C7H%5EMa%5B%06U%15%3E%00%AE%FE%93%C60tr%1C%8B%CE%DF%87%08%AD.%10R%88%3A%1D%08%06%CB%96%13%BD%98%C40%24%A6i%60Y%06%96i%10%0A%14%B0%7B%C7F%94R%1C%3C%DA%81c%5B%08%A1%91%B82%C9%EA%E2%3C%3C%A5%82%D7ED%08%0DC%D71%8D%B9%B6L%83%BD%CF%D6b%EA%92%C3_E%E9%BB4J%8Ec%22%84%C0%B1L444%40%00%5D%5D%B1%CB%84%02%05%18%86%9Cca%E8%2C%BE%DDf%209%C6%99%DE%04m%D1A%1C%DB%C4%B1-r%1C%93%F2%C2e%C4%06%AF!%A4%E8%12%40%E4%DC%85%84%B7e%7D%19%BA.%D1u%89a%E8hB%F0s%F7%20%A7%7B%93H)%B1mc%01%A4%D2%9FG%F7%1FC%5E6%EBE%04%D0%FA%F1%913%99%0DkW%B1%FE%AE%95%E8R%A2KA%EE%22%87%DDO%DDK%C3c%D5%E48%26%96eb%DB%26k%8A%EF%A4%CC%97%CB%81%D6HF)%D5*%E2n%B8o%22%95i%DA%F7%C17S%AF%3F%BF%99P%C0%87%94%02)%B5%05%BF%1B%F3%BA%04%0A%97%F0Dm)%AF%7D%F8%ED%F4D*%D3%14w%C3%7D7Yyk%8D%BF%FA%8D%86%07%EDhl%98hl%98%C4%95Il%7B%EE%E7%CA%D2e%94%E4%2F%A6%E9%E0%C9i%B7%AD%E7%EC%CC%BF%B3%B5q7%EC%DD%12%A6%3Bn%B3%F7%ED%DAq%BF%5DU%E1%D3%CA%0B%97%A2i%1A%F1%C4(%BF%F5%8Fx%EF%7C%F2%5Df%7Cr%BA)%EBy7%87%E9%FF%E2%2C%A5%A8SJ%05%01%A4%94%5D%B3%B3%D9%88R%EA%968%FF%07f%F7L%94%A2%DB%8Aa%00%00%00%00IEND%AEB%60%82";
  
  const SEARCH_BUTTON_ICON_SRC = "data:image/png;base64,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";
  
  const FOLDED_IMG_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAI2SURBVDiNlZJLSFRhHMV/3+POw0bDFFLEXkQgaBQEhdNGaNEiggRbRoFCuMlyjDZCKzeNkIsochMUvaRFYj5wES1m0CmkFDfRIiwznbGBHuN479z7tQhfMxPUgbP5/ofD+Z//hzGGfIa7dKyxU7cVm+VTUgTGo3F39YG+cJc1EI5YoWKaNRQ1ALjS0hs8efTsaQSz4YjV8N8GSmqaDp/xtTdfrw36QxPhiNVWTCcaI/orhp1bHhXZm+2DganPY1SV7cMnt/F4/NbKh/mZYWM4H4s6PzcMOrXpuXgfKRRKKISQCAQAiU9DeLiU+Xewq7ye+PS4MzY5sIAxp2JRZwZAA7hejtjHZyipUUKBEAgBQgHCY9meI700z8G6I1ZN1Z7ap2N3J8IRqyMWdfo1QM5bJZ1ZwHaz2G4WpTSlJWWUBEL4LT9GuNhejndLo9SE6kRrc1fJ0KtHfcevWsc0wNKPOd4nX693oH2ClCPRWYnWCr8viE8GUPgpzZWjTJCsnTHrK2wpUILUAmXJP/SBp7KgLBoqmkgvZsyDl3dWsquZjRUAWg5dWzdQlkBpychcL9onqQ7tp277CSbfxO3E2/hX47KpRMHi7Sc9W84oLbKXznUHlFLUVzZRofcy8PxhZjH5ZcS4eWc0xhR8jnDEMpdbu/nlJUmmUubF6OCK7dgdsRtOf762oIM1ODmbxFRidXp2atHbFLmgs78lqCivzHz7nho2Lhc2R/6nBEISX06n7sWihZHz8RtB3gm0bnbltgAAAABJRU5ErkJggg==";
  
  const UNFOLDED_IMG_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAI9SURBVDiNhZNNaBNBGIbfmezmD2vAYNJD/MGq9SIaj0m04MGL8SIULx4q4kEU6qFV8SoI0hU8qVCEnBQholJTW3Kx1lUItS0Ue6hVtFTNmq79C+kms7Ofh9Yamxjf4zffPPO+880wIkK14t1qHoQw6onB0HtEc3VJqWkihG9dSMN2BGxHYMkqYMkyAQB3H92oAdcCADDGkJt5jrJdQqE4g49zY2g/eLWuKV6vWB3Ko/jrbmwIABGIHBARFO5uCFASl1WdHMTW7btgOSS9kmxIsrFcNlG9Fu9S1w0yjjcKOUhFQi3Riyev+xSXCiLHK0mCmAS4RFEWoHo5uMJw/tQ1LwgQooJ0NlWaX5xLMSJColtNt0WPJ49Ek573+VeQXECijBV7EdPzORBoLRZH2/bTGJ0YKU9Ojfe97hHtfC1yx8uxjPHFmKJIcC+IVwCXjUJlGqqPwe3jUH0uRCNHYS6YNPlh3CDCmfVL1DVRBCH5cPCe5eVNCPiDKNFPlF2LcHs53D4Xtm3Zg5CvBdmhjEUOkromin9NQdfEREWsdD4YvFPaETgAm5WgelZP3rwpgP2hY+jLPi4JUenUNTFRd4y6JnpnjU8vhscGRGswAa4wKG6OQ+ETyL17W/lhfuvXNdHb8B2Qg46hkYHvprFAu5ti2OWPwfy6TLlRPe/I1dwNAbomiiSRzGSfWVuxD0GnFU/7n1iO/JO7Wmzjb/yteJd6LtK88zYAzOY/X9po/b8AADh8Rb0PAMM3xdl/9fwCc0oSKoZoHMsAAAAASUVORK5CYII=";
  
  const ADD_IMG_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH1gELEAARlER4oQAAANBJREFUOMvNkb0OwWAUhh/SxWC3cgfSuoHGYDZbO3RxB0TSxGQXsVoNJoOEG+hnN1osVmnip98xEIr6iwTvdvKdvPme58Cvk7j3YDk9HzCPo/K7FStuL/mg3PRcG8+1iRS9VfBSPi4w7jDHOZHIeHJiRJlb1SJbLSSAbXje91wbERA5WK93xubNDwBW65D5MkAEtBa0QLARwlDYaUFryGVS8QiAanQmFwjlUgGAwci/JlJP5VhOT4bThTT7M7ni//IZ89n0a2eMiaq1T7YVf5s9VHJLC4uyd44AAAAASUVORK5CYII=";
  
  const REMOVE_IMG_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH1gELDzsiAFwSwgAAAIRJREFUOMvtkbEJg1AQhr8HadzAOivoCBkjrW1GCBkgC4itc8QFdIjUtiJE8+5PIcqzszOFHxwcB/93HAcH++PmJs3KGkg25pq6uKYAp2CYPG8XRhMOGL1WCWkqB9zz17IoFNB9PO+2RwIzYYJ+EN6LrwkzOMfRShwKmkdebT7h+P4/8QOsUy3bRuSA2AAAAABJRU5ErkJggg==";  

  const INFO_IMG_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9gHEhUMC1sDgPkAAAJySURBVDjLnZM7TBRRFIb/e2Z2d3Zm9jFLYSyQ1xb2RsE1ITEkxAbiI8aQSGFB0ChUVHYmlsYGbLTSBhMbtTM2VhbESqUBIUEBgd2Fndlhd2funXstYHm4ITF+1U3uuf85/597mGEYaDI81E/5fPcHTWPnOOfpKIo0IhJEtMU5fzTz7PVz/AVrCty7e2vMspLTmayTcHI5JAwDRAQpJYJGA+VSiZeLxXUFNTw9M/v1mMD42I1R0zRfduXzzLZtSBFBKXXYhTEwjeB5nlz+sVgHUGiK0PBQfzyVTr3o7OlhtmUh4gJKKRQuDeL26CR6+waglIIUEdKpFHV29+hKqVdNcersOvM+6+QStm0jEhFaPDJ2cJaRRCaTSTiO0z3xYOQOAFBM13qzjgMVyYNCIQTcShmLC9/gVyvHBFUkkXFyCsBNACAhRMowjBbPvu8h5CFcbwecB5DqsIGxl/x5ANCllBoRIdqfQEGhWnVRKm1A02OoVl2UtzcBBZimDdNKg4g0AA4A6AxMBEGgS8FRr++i0ahBQWFpeR5Ly/NHwgBqdR+1ug/TcnwAIQAQI1b0fQ8Vt4R6YxcKe1YKhSuYmnqC3gsDxzIgRhBCcABfAIDCIHxadT2eMEz8C0YyHXjuzg6ANwcfaeL+yEp7R0e7lCHjPDjxcTxuQkRqdWN9bXV6ZvYiANC+v6FfP1dqjMXCpGmDGLWMbZpZzoVc3VhfSwAYb95puq5jbu775ulTbZ8jEfYRIytuWNIyU2QkTYDFGmDabrlU/F3a2qqQRtdbduEo165eftyWywzGE/GzRGRLKatBI1gob7sf37779PDEbfxf/gBEShO4w4u1agAAAABJRU5ErkJggg==";

////////////// START //////////////////////////////////////////////////////////  
  
  attachButton();  

})();