/*****************************
 *
 *  Configuration variables
 *
 *****************************/
// Example of config vars setup (should be set in html script tag):
//
//  var radarBoxes = true;// Show boxes under map?
//  var radarMapplet = false;// Are we in mapplet (= do not initialize map)?
//  var radarAPIRoot = '/ring-mapa';// Root of API for reading JSON data.
//  var radarPublicRoot = '/ring-mapa-public';// Root of public dir.



/***********************************************
 *
 * Load scripts through Google & run _onLoad()
 *
 ***********************************************/

//google.load("maps", "2.x");
//google.load("prototype", "1.6.0.3");
//google.load("scriptaculous", "1.8.2");
//google.setOnLoadCallback(_onLoad);

Event.observe( document, 'dom:loaded', _onLoad);

var activateThisEvent = false;

/**
 * Handle onLoad event (main initialization).
 */
function _onLoad() {
    enhance();

    if (window.location.hash && window.location.hash.indexOf('show-') > -1) {
        activateThisEvent = window.location.hash.sub('show-', '').sub('#', '');
    }

    initHovers();
    initMain();
    initRadar();
}



/***************************
 *
 * Initialization functions
 *
 **************************/

/**
 * Enhances Element class by some additional methods
 */
function enhance() {
    Element.addMethods
    ({
        addHoverClass : function ( element, class_name )
        {
            element = $( element );
            class_name = class_name || 'hover';
            element.observe( 'mouseover', function ( event )
            {
                element.addClassName( class_name );
            });

            element.observe( 'mouseout', function ( event )
            {
                element.removeClassName( class_name );
            });

            return element;
        },

        addClickHandler: function ( element )
        {
            element = $( element );
            element.observe( 'click', function (event)
            {
                if (element.readAttribute('id').indexOf('item-') > -1) {
                    var tmpId = element.readAttribute('id').sub('item-', '');
                    if (!radarMapplet) {
                        Effect.ScrollTo('radar-main', {duration: 0.3});
                        new PeriodicalExecuter(function(pe) {
                            activateEventId(tmpId);
                            pe.stop();
                        }, 0.3);
                    } else {
                        activateEventId(tmpId);
                    }
                }
            });
        }
    });
}

/**
 * Initialization of hovers on boxes.
 */
function initHovers() {
    $$('#item-list .item').each( function(e)
    {
        Element.addHoverClass( e, 'hover' );
    });
}

var _radarBoxExists = false;
/**
 * Main initialization (here is the XHTML content built and prepared).
 */
function initMain() {
    if ($('radar-main')) {
        if (!radarMapplet) {
            // only if we're not in mapplet -> generate map box, don't enhance styles of wrappers
            $('radar-main').innerHTML = '<div id="bar-main"><div id="bar-main-inner">\
                <div id="map-wrapper">\
                <div id="map" style="width: 430px; height: 400px;"><div class="loader"></div></div>\
                    <div id="map-info">\
                        <div id="map-info-header">\
                            <h2 class="item-header">\
                                <a onclick="activateEvent(activeEvent);" class="i icon"><img id="box-type-icon" src="images/icon-spatren-active.png" alt="" height="20" width="20"/></a>\
                                <a onclick="activateEvent(activeEvent);" class="title" style="cursor: pointer;">\
                                    <img id="box-portrait" height="32" width="32" src="images/portrait-incognito.png" alt="Jméno" class="f-right" />\
                                    <span id="box-type-name">Typ události!</span>\
                                </a>\
                            </h2>\
                        </div> <!-- #map-info-header -->\
\
                        <div id="map-info-content"><div id="map-info-content-inner">\
\
                            <h3 id="box-names">Jméno</h3>\
                            <h3 id="box-names-full" style="display: none;"><div id="box-names-full-header"><span class="clickable" onclick="$(\'box-names-full\').hide();">x</span></div><div id="box-names-full-content"></div></h3>\
\
                            <p id="box-time" class="time">Čas</p>\
                            <p id="box-place" class="place">Místo</p>\
\
                            <p id="box-photo-par" class="photo">\
                                <a href="#" rel="lightbox">\
                                    <img id="box-photo" height="130" width="174" src="images/portrait-incognito.png" alt="Zvětšit fotku..." />\
                                    <span id="box-photo-mag"></span>\
                                </a>\
                            </p>\
\
                            <p id="box-desc" class="desc">\
                                Toto je prázdná událost. Zobrazila se Vám asi proto, že se ještě načítá (nebo se načíst nepodařilo) seznam událostí ze serveru. Zkuste prosím načíst stránku později.\
                            </p>\
\
                            <p class="author">\
                                Autor: <strong id="box-author">Autor</strong>\
                            </p>\
\
                        </div></div> <!-- #map-info-content(-inner) -->\
\
                        <div id="map-list-nav">\
                            <a onclick="activateLastEvent();" title="Předcházející" class="i prev"><span>Předcházející</span></a>\
                            <a title="nic" class="nospan list"><span>nic</span></a>\
                            <a onclick="activateNextEvent();" title="Další" class="i next"><span>Další</span></a>\
                        </div> <!-- #map-list-nav -->\
\
                    </div> <!-- #map-info -->\
\
                </div> <!-- #map-wrapper -->\
            <div id="item-list"></div>\
            </div></div> <!-- #bar-main(-inner) -->';

            _radarBoxExists = true;

            new Draggable('box-names-full');
        } else {
            $('radar-main').innerHTML = '<div id="item-list"></div>';
        }

        if ($('radar-ad') && radarBoxes) {
            $('item-list').insert({'top': $('radar-ad')});
        }
    }
}

/*
 * Global variables used in map subsystem
 */
var map = null;
var activeEvent = null;
var mIcon = null;
var mIconActive = null;
var events = new Array();

/**
 * Initialization of Google Map stuff (not the map itself).
 * Map will be initialized as soon as first data arrives...
 */
function initRadar() {
    mIcon = createIcon(radarPublicRoot + "/images/icon-spatren-unactive.png");
    mIconActive = createIcon(radarPublicRoot + "/images/icon-spatren-active.png");

    var url = radarAPIRoot + '/event/listData' + '?ts=' + getMs();

    if (radarMapplet) {
        _IG_FetchContent(url, showEvents);
    } else {
        new Ajax.Request(url, {
            onSuccess: function(resp) { showEvents(resp); },
            onFailure: function(resp) { alert("Ups, tohle se nemělo stát. Vypadá to, že se nám nepodařilo načíst seznam události. Zkuste to prosím později..."); }
        });
    }
}

/**
 * Google Map initialization (called after we know proper center to use).
 */
function initializeMap(center, zoom) {
    if ($('map')) {
        $('map').setStyle({background: "#ddd"});
    }

    if (radarMapplet) {
        map = new GMap2();
    } else {
        map = new GMap2(document.getElementById("map"));
    }

    map.setCenter(center, zoom);
    if (!radarMapplet) {
        map.enableScrollWheelZoom();
        map.enableContinuousZoom();
        map.addControl(new GSmallMapControl());
    }

}



/*************************************
 *
 * Ajax loader callbacks
 *
 *************************************/

/**
 * Called after JSON data came from async. request.
 * @param resp
 */
function showEvents(resp) {
    var data;
    if (radarMapplet) {
        data = eval( '(' + resp + ')');
    } else {
        data = eval( '(' + resp.responseText + ')');
    }
    var firstEvent = false;
    var activated = false;
    for (k = 0; k < data.count; k ++) {
        var event = data.events[k];

        var marker = addMarker(event);
        event.marker = marker;

        if (radarBoxes) {
            addListItem(event);
        }

        events.push(event);

        if (k == 0) {
            firstEvent = event;
        }

        if (event.id == activateThisEvent) {
            activateEvent(event);
            activated = true;
        }
    }
    if (!activated && firstEvent && radarActivateFirst) {
        activateEvent(firstEvent);
    }
}



/*************************************
 *
 * Event activators
 * (lit/unlit items in list, scroll map etc.)
 *
 *************************************/

function activateLastEvent() {
    if (events && activeEvent) {
        var last = null;
        for (var k = 0; k < events.length; k++) {
            if (events[k].id == activeEvent.id && k >= 1) {
                activateEvent(events[k-1]);
                return;
            }
        }
    }
}

function activateNextEvent() {
    if (events && activeEvent) {
        var last = null;
        for (var k = 0; k < events.length; k++) {
            if (events[k].id == activeEvent.id && k < events.length - 1) {
                activateEvent(events[k+1]);
                return;
            }
        }
    }
}

function activateEventId(evid) {
    var ev = findEventById(evid);
    if (ev) {
        activateEvent(ev);
    }
}

/**
 * Activates given event. Eg. updates it's box, lits it on the map etc.
 *
 * @param ev    Event to be activated.
 */
function activateEvent(ev) {
    var panDelay = false;

    if (ev != activeEvent) {
        if (activeEvent) {
            if ($('item-'+activeEvent.id)) {
                $('item-'+activeEvent.id).removeClassName('active');
            }
            if ($('item-box-'+activeEvent.id)){
                $('item-box-'+activeEvent.id).hide();
            }
            if ($('item-icon-'+activeEvent.id)) {
                $('item-icon-'+activeEvent.id).setAttribute('src', activeEvent.typeIconUn);
            }
            if (activeEvent.marker) {
                map.removeOverlay(activeEvent.marker);
                activeEvent.marker = addMarker(activeEvent);
            }
        }

        updateBox(ev);

        if ($('item-'+ev.id)) {
            $('item-'+ev.id).addClassName('active');
        }
        if ($('item-box-'+ev.id)){
            if (!$('item-box-'+ev.id).visible()) {
                Effect.BlindDown('item-box-'+ev.id, {duration: 0.2});
                panDelay = 0.2;
            }
        }
        if ($('item-icon-'+ev.id)) {
            $('item-icon-'+ev.id).setAttribute('src', ev.typeIcon);
        }
        if (radarMapplet) {
            window.location.hash = 'item-hash-'+ev.id;
        }

        if (radarMapplet) {
            new PeriodicalExecuter(function(pe) {
                pe.stop();
                _IG_AdjustIFrameHeight();
            }, 0.3);
        }
    }

    if (!panDelay) {
        map.setZoom(15);
        map.panTo(new GLatLng(ev.lat, ev.lon));
    } else {
        new PeriodicalExecuter(function(pe) {
            pe.stop();
            map.setZoom(15);
            map.panTo(new GLatLng(ev.lat, ev.lon));
        }, panDelay);
    }

    if (ev.marker) {
        map.removeOverlay(ev.marker);
    }
    ev.marker = addMarkerActive(ev);
    activeEvent = ev;
}



/*************************************
 *
 * Right box updater
 *
 *************************************/

/**
 * Sets-up values of "box-next-to-map" to properties of given event.
 *
 * @param ev    Event to use values from.
 */
function updateBox(ev) {
    if (_radarBoxExists) {
        $('box-type-name').update(ev.typeName);
        $('box-type-icon').setAttribute('src', ev.typeIcon);
        $('box-time').update(ev.time);
        $('box-place').update(ev.place);
        $('box-desc').update(ev.descr);
        $('box-author').update(ev.author);

        if (ev.celebrities) {
            // update names and portrait
            var names = '';
            var src = '';

            if (ev.celebrities.length <= 0) {
                names = '';
                src = radarPublicRoot + '/images/dummy.png';
                $('box-portrait').hide();
            } else if (ev.celebrities.length >= 1) {
                names = ev.celebrities[0].name;
                src = ev.celebrities[0].ppath;
                $('box-portrait').show();
            }
            if (ev.celebrities.length > 1) {
                names += ' <span class="clickable" onclick="$(\'box-names-full\').toggle();">a další...</span>';
            }
            $('box-names').innerHTML = names;
            $('box-portrait').setAttribute('src', src);

            // set-up allnames box
            var allnames = '';
            ev.celebrities.each(function(it) {
               allnames += '<div class="line-name">' + it.name.gsub(' ', '&nbsp;') + '</div>';
            });
            $('box-names-full-content').innerHTML = allnames;
        }

        if (ev.photos) {
            var src = '';

            if (ev.thumbs.length <= 0) {
                src = radarPublicRoot + '/images/dummy.png';
                $('box-photo-par').hide();
                $('box-photo-mag').hide();
            } else {
                src = ev.thumbs[0];
                $('box-photo-par').show();
                $('box-photo-mag').show();
            }

            $('box-photo').setAttribute('src', src);
        }
    }
}



/*************************************
 *
 * Adding markers to map
 *
 *************************************/

function addMarker(ev) {
    return _addMarker(ev, false);
}

function addMarkerActive(ev) {
    return _addMarker(ev, true);
}

function _addMarker(ev, active) {
    if (!map) {
        initializeMap(new GLatLng(ev.lat, ev.lon), 15);
    }

    var icon = null;
    if (active && typeof ev != 'undefined') {
        icon = createIcon(ev.typeIcon);
    } else {
        icon = createIcon(ev.typeIconUn);
    }

    var marker = new GMarker(
        new GLatLng (ev.lat, ev.lon),
        {
            title: ev.celebrityName,
            icon: icon
        }
    );
    map.addOverlay(marker);

    if (!active) {
        GEvent.addListener(marker, 'click', _createActivationCallback(ev));
    }

    return marker;
}

/**
 * "Generates" function to be used in marker onClick callback.
 * @param ev
 */
function _createActivationCallback(ev) {
    return function() {
        activateEvent(ev);
    };
}



/*************************************
 *
 * Utility functions...
 * (everything that doesn't fit elsewhere)
 *
 *************************************/

function addListItem(ev) {
    var div = null;
    if (!radarBoxesMini) {
        div = new Element('div', {'class': 'item', 'id': 'item-'+ev.id});
    } else {
        div = new Element('div', {'class': 'item mini', 'id': 'item-'+ev.id});
    }

    var ppath = radarPublicRoot + '/images/dummy.png';
    var name = '';
    var hide = ' style="display: none;" ';
    if (ev.celebrities && ev.celebrities.length > 0) {
        ppath = ev.celebrities[0].ppath;
        name = ev.celebrities[0].name;
        hide = '';
    }

    if (!radarBoxesMini) {
        div.innerHTML = '<div class="item-inner"> \
            <h2 class="item-header"> \
                <a class="i icon"><img id="item-icon-'+ ev.id +'" src="'+ ev.typeIconUn +'" /></a> \
                <a class="title"> \
                    <img '+ hide +' height="32" width="32" src="'+ ppath +'" alt="'+ name +'" class="f-right" /> \
                    <span>'+ ev.typeName +'</span> \
                </a> \
            </h2> \
            <div class="box"><div class="box-inner"> \
                <p class="desc"> \
                    '+ ev.descr +'\
                </p> \
            </div></div> \
        </div>';
    } else {
        var names = '';
        if (ev.celebrities) {
            if (ev.celebrities.length <= 0) {
                names = '';
            } else if (ev.celebrities.length >= 1) {
                names = ev.celebrities[0].name;
            }
            if (ev.celebrities.length > 1) {
                names += ' a další...';
            }

            if (names != '') {
                names = '<h3>'+ names +'</h3>';
            }
        }

        var photos = '';
        if (ev.photos && ev.photos.length > 0) {
            photos = '<p id="box-photo-par" class="photo">\
                <img id="box-photo" height="130" width="174" src="'+ ev.thumbs[0] +'" alt="Zvětšit fotku..." />\
            </p>';
        }

        div.innerHTML = '<a name="item-hash-'+ ev.id +'" style="padding: 10px 0 20px 0;"></a><div class="item-inner"> \
            <h2 class="item-header"> \
                <a class="i icon"><img id="item-icon-'+ ev.id +'" src="'+ ev.typeIconUn +'" /></a> \
                <a class="title"> \
                    <img '+ hide +' height="32" width="32" src="'+ ppath +'" alt="'+ name +'" class="f-right" /> \
                    <span>'+ ev.typeName +'</span> \
                </a> \
                <a class="i icon-mini next"></a>\
            </h2> \
            <div id="item-box-'+ ev.id +'" class="box" style="display: none;"><div class="box-inner"> \
                '+ names +'\
\
                <p class="time">'+ev.time+'</p>\
                <p class="place">'+ev.place+'</p>\
\
                '+ photos +'\
\
                <p class="desc">\
                    '+ev.descr+'\
                </p>\
\
                <p class="author">\
                    Autor: <strong id="box-author">'+ev.author+'</strong>\
                </p>\
\
                <p class="link"><a href="'+ radarPublicRoot+'/#show-'+ ev.id +'" target="_blank">zobrazit více na webu</a></p>\
\
            </div></div> \
        </div>';
    }

    Element.addHoverClass(div, 'hover' );
    Element.addClickHandler(div);

    $('item-list').insert({'bottom': div});
}

function findEventById(evid) {
    if (events) {
        for (var k = 0; k <= events.length; k++) {
            if (events[k].id == evid) {
                return events[k];
            }
        }
    }

    return false;
}

function createIcon(iconPath) {
    var ic = new GIcon(iconPath);
    ic.image = iconPath;
    ic.iconSize = new GSize(20, 20);
    ic.iconAnchor = new GPoint(10, 10);
//    ic.shadow = "http://localhost:8080/ring-mapa/css/img/star.gif";
//    ic.shadowSize = new google.maps.Size(20, 20);
    ic.infoWindowAnchor = new GPoint(10, 10);

    return ic;
}

/**
 * Returns current time in milis.
 */
function getMs() {
    var myDate = new Date();
    return myDate.getTime();
}