document.observe('dom:loaded', function()
{

    var popup = $$('.rounded-corners-wrapper').first();
    var arrow = $$('.rounded-corners-cursor').first();


    $$('tbody th a').each(function(elm){
        elm.observe('click', function(evt){
            Event.stop(evt);

            // showing info popup with arrow
            popup.removeClassName('hidden');    
            arrow.removeClassName('hidden');    
            
            // selecting originaly clicked element  
            var elm = evt.element();
            
            // selecting element data from prepered "items" json using as the key the text from clicked element
            var data = items[elm.innerHTML];
            if(!data)
                return;
            // positioning popup near clicked link


          
            if(Prototype.Browser.IE)
                {
                    popup.setStyle({'top': elm.cumulativeOffset().top-20+'px', 
                                'left': '380px'});
            
                    arrow.setStyle({'top': elm.cumulativeOffset().top +'px', 
                                'left': '374px'});
                }
            else
                {
                    popup.setStyle({'top': elm.cumulativeOffset().top-20 + 'px', 
                                'left': elm.cumulativeOffset().left-60 + 'px'});
            
                    arrow.setStyle({'top': elm.cumulativeOffset().top + 'px', 
                                'left': elm.cumulativeOffset().left-66 + 'px'});
                }
            



            /*                {
                    popup.setStyle({'top': elm.cumulativeOffset().top-20+'px', 
                                'left': elm.cumulativeOffset().left+100 +'px'});
            

                    arrow.setStyle({'top': elm.cumulativeOffset().top +'px', 
                                'left': elm.cumulativeOffset().left+94 +'px'});
                }
            */
            /*
             {
                    popup.setStyle({'top': elm.cumulativeOffset().top-20+'px', 
                                'left': '80px'});
            

                    arrow.setStyle({'top': elm.cumulativeOffset().top +'px', 
                                'left': '74px'});
             }
            */


            popup.select('p').first().insert({'top': data.text});

                
            // updating popup with elmenet data       
            if(popup.select('h1').first())
                popup.select('h1').first().update(data.title);
            //popup.select('p').first().innerHTML = '';
            //            popup.select('p').first().replace(data.text);
            popup.select('p').first().update(' ');
            popup.select('p').first().insert({'top': data.text});
            //popup.select('p').first().update(data.text);
            //            popup.select('p').first().innerHTML = data.text;            //            popup.select('p').first().innerHTML = data.text;
            if(!data.img)
                popup.select('img:not(.close)').first().addClassName('hidden');
            else
                {
                    popup.select('img:not(.close)').first().writeAttribute({'src':data.img});
                    popup.select('img:not(.close)').first().removeClassName('hidden');
                }
            popup.select('img:not(.close)').first().writeAttribute({'alt':data.title});

            // insert new popup
            // remove old
            //            elm.up().insert({'top': popup});            
        });
    });

    // observing close button
    popup.select('.close').first().observe('click', 
        function(evt){
            popup.addClassName('hidden');
            arrow.addClassName('hidden');
            popup.select('.close').first().removeClassName('active');
        });

    // observing close button
    popup.select('.close').first().observe('mouseover', 
        function(evt){ 
            popup.select('.close').first().addClassName('active');
        });

    popup.select('.close').first().observe('mouseout', 
        function(evt){
            popup.select('.close').first().removeClassName('active');
        });

});