Переделать формирование html бара с js+php на клиентский JS

uchenikspb.ru/market/klav... – бар сбоку переделать полностью на клиентском JavaScript (в один файл, который включал бы все, в том числе и стили), и чтобы файл полностью кэшировался на клиенте.
Сейчас логика распределена между js и серверным php. Логика – когда какую иконку выделять, какой стиль подставлять

php файл: 
------------------------------------

$links = "";
foreach($link_array as $link=>$icon) {
if (is_array($icon['2'])) {
foreach($icon['2'] as $vvalue) {
if (isset($parse_refer) && preg_match("|$vvalue|",$parse_refer['path'])) {
$curent_link = $link;
$css_url = $curentDir."/".$icon['3'];
}
}
} else 
{
if (isset($parse_refer) && preg_match("|$icon[2]|",$parse_refer['path'])) {
$curent_link = $link;
$css_url = $curentDir."/".$icon['3'];
}
}
}
foreach($link_array as $link=>$icon) {
if ($curent_link  == $link) {

$links .= "<a data-toggle="tooltip2" data-placement="right" data-original-title="$icon[1]" href="$link" class="icon2" ><span class="$icon[0]"></span></a>
";

setcookie("bar_$link","$refer",time()+3600*24*60);
}
else {
if (isset($_COOKIE["bar_$link"])) $links .= "<a data-toggle="tooltip2" data-placement="right" data-original-title="$icon[1]" href="".$_COOKIE["bar_$link"]."" class="icon1" ><span class="$icon[0]"></span></a>
";
else $links .= "<a data-toggle="tooltip2" data-placement="right" data-original-title="$icon[1]" href="$link" class="icon1" ><span class="$icon[0]"></span></a>
";
}
}
if (!isset($curent_link)) {
$links = "<a data-toggle="tooltip2" data-placement="right" data-original-title="$main_tooltip" href="http://".$_SERVER[HTTP_HOST]."" class="icon2" ><span class="$main_icon"></span></a>
".$links;
setcookie("bar_main","$refer",time()+3600*24*60);
$css_url = $curentDir."/".$main_css;
} else {
if (isset($_COOKIE["bar_main"])) $links = "<a data-toggle="tooltip2" data-placement="right" data-original-title="$main_tooltip" href="".$_COOKIE["bar_main"]."" class="icon1" ><span class="$main_icon"></span></a>
".$links;
else $links = "<a data-toggle="tooltip2" data-placement="right" data-original-title="$main_tooltip" href="http://".$_SERVER[HTTP_HOST]."" class="icon1" ><span class="$main_icon"></span></a>
".$links;
}
$html = '
<link rel="stylesheet"href="'.$css_url.'" type="text/css" media="all" />
<style>
.navbarlinks {
    position: relative;
    top: '.$top_position.'%;
    -webkit-transform: translateY(-'.$top_position.'%);
    -ms-transform: translateY(-'.$top_position.'%);
    transform: translateY(-'.$top_position.'%);
}
</style>
<span class="fixbarnav">
<div class="navbarlinks">
'.$links.'
</div>
</span>';
?>
var jQ = false;
function initJQ() {
  if (typeof(jQuery) == 'undefined') {
    if (!jQ) {
      jQ = true;
      document.write('<scr' + 'ipt type="text/javascript" src="ajax.googleapis.com/ajax/... + 'ipt>');
    }
    setTimeout('initJQ()', 50);
  } else {
document.write('<scr' + 'ipt type="text/javascript" src="<?php echo $curentDir; ?>/tooltip.js"></scr' + 'ipt>');
jQuery(function () {
jQuery('[data-toggle="tooltip2"]').tooltip();
jQuery(window).resize(function(){
if(document.body.clientWidth <>) document.body.style.marginLeft="70px";
else document.body.style.marginLeft="0px";
});

})
  }
}
initJQ();
<?php
$html = trim(str_replace(array("r", "n"), '', $html));
echo 'if(document.body.clientWidth <>