function getUniqueListElement(){
    return document.getElementById('uniqueList');
}

function uniqueListItemsSetAction(uniqueList){
    element = document.createElement('div');
    element.id = 'uniqueActive';
    uniqueListFirstElement = uniqueList.firstChild;
    uniqueList.parentNode.insertBefore(element, uniqueList);

    uniqueListItems = uniqueList.getElementsByTagName('img');

    for (var i = 0; i < uniqueListItems.length; i++){
        uniqueListItems[i].onmouseover = function() {
            showUniqueItemDescription(this)
        };
    }
}

function showUniqueItemDescription(item){
    uniqueList = getUniqueListElement();
    element = uniqueList.previousSibling;
    element.innerHTML = '';
    itemSpans = item.parentNode.getElementsByTagName('span');
    img = item.cloneNode(true);
    img.src = img.src.replace('mini', 'big');
    element.appendChild(img);

    for (var i = 0; i < itemSpans.length; i++){
        newItem = itemSpans[i].cloneNode(true);
        newItem.style.display = 'block';
        element.appendChild(newItem);
    }

}

/**
 * Deciding if script should be ran - attempting to access uniqueList
 */
var uniqueList;

if ((uniqueList = getUniqueListElement())){
    uniqueListItemsSetAction(uniqueList);
}


function getMapElement(){
    return document.getElementById('map1');
}

function hideDiv(){
    div = document.getElementById('mapLabel');
    if (div != null){
        div.style.visibility = 'hidden';
    }
}

function rollOut(element){
    img = document.getElementById('imageMap');
    img.style.backgroundPosition = 'left 312px';

    hideDiv();
}

function rollOver(element){
    var i = element.id.replace('area', '');
    var elementId = 'imageMap';
    var map1 = document.getElementById(elementId);
    elementId = 'imageMapObal';
    var map2 = document.getElementById(elementId);
    var img = map1;
    map2.style.backgroundPosition = 'left 312px';

    if (i > 38){
        i = i - 39;
        map1.style.backgroundPosition = 'left 312px';
        img = map2;
    }

    var left = (i % 5) * 552;
    var top = Math.floor(i / 5) * 312;
    img.style.backgroundPosition = '-'+left + 'px -' + top + 'px';
}

function setDivCoords(refElement, div){
    coords = refElement.coords.split(',');
    posX = coords[0];
    posY = coords[1];

    div.style.right = (552 - 10 - posX) + 'px';
    div.style.bottom = (312 - 10 - posY) + 'px';
}

function setDivContent(refElement, div){
    var name = refElement.alt.split(' - ');
    nameMain = '<a id="kraj" class="mainLabel" href="' + refElement.parentNode.id + '/">' + name[0] + '</a>';

    if (name[0] != name[1]){
        nameDetail = '<br /><a class="detailLabel" href="' + refElement.href.valueOf() + '">' + name[1] + '</a>';
    }
    else {
        nameDetail = '';
    }

    div.innerHTML = nameMain + nameDetail;
}

function getDivElement(){
    div = document.getElementById('mapLabel');

    if (div == null){
        div = document.createElement('div');
        div.id = 'mapLabel';
    }

    return div;
}

function showDiv(element){
    div = getDivElement();
    div.style.visibility = 'visible';

    setDivContent(element, div);
    setDivCoords(element, div);

    map = getMapElement();
    document.getElementById('imageMapBlock').appendChild(div);
}

function setAreaEvents(area){
    area.onmouseover = function(){
        rollOut(this);
        showDiv(this);
        rollOver(this);
    }
}

function prepareMap(){
    map = getMapElement();
    areas = map.getElementsByTagName('area');

    for (var i = 0; i < areas.length; i++){
        setAreaEvents(areas[i]);
    }
}

var map;

if ((map = getMapElement())){
    prepareMap();
}