function loadArticle( url2call, id, showBody, imageIdx )
{
    if( id > 0 )
    {
        $("div#loader").css( "visibility", "visible" );
        hideShortcuts();
        selectTeaser( id );
        
        $.ajax({
            type: "POST",
            dataType: "json",
            url: url2call,
            data: {'id':id},
            success: function(data) {
                //$("div#heading").html( data.heading );
                $("div#body_heading").html( data.heading );
                $("div#body_body").html( data.body );
                var img_path = ( data.medias && data.medias.length > 0 )? data.medias[0].normal : "images/empty.gif";
                if( imageIdx >= 0 && data.medias.length >= imageIdx )
                {
                    img_path = data.medias[imageIdx].normal;
                }
                var img = $("<img src='"+ img_path +"' border='0'/>").load( function()
                {
                    $("div#loader").css( "visibility", "hidden" );
                    if( showBody && !toggleBodyFlag ) toggleBody();
                } );
                $("div#image").children().remove();
                $("div#image").append( img );
            },
            error: function(data) { alert('error get data'); try {} catch (e) {} }
        });
    }
    else
    {
        alert( "Article's ID is null" );
    }
}

function selectTeaser( articleId )
{
    var children = $("div#teasers div.teaser");
    for( var i=0; i<children.length; i++ )
    {
        if( children[i].getAttribute("article_id") == articleId )
        {
            for( var j=0; j<children[i].childNodes.length; j++ )
            {
                if( children[i].childNodes[j].className == "heading" )
                {
                    children[i].childNodes[j].style.fontWeight = "bold";
                }
            }
        }
        else
        {
            for( var j=0; j<children[i].childNodes.length; j++ )
            {
                if( children[i].childNodes[j].className == "heading" )
                {
                    children[i].childNodes[j].style.fontWeight = "normal";
                }
            }
        }
    }
}

var toggleBodyFlag = false;
var toggleBodyAnimate = false;
function toggleBody()
{
    if( !toggleBodyAnimate && !navigatorAnimate )
    {
        toggleBodyAnimate = true;
        var b = $('div#body');
        if( !toggleBodyFlag )
        {
            b.animate( {'left':628}, 1000, 'easeOutQuint', function() { toggleBodyAnimate = false; } );
            toggleBodyFlag = true;
        }
        else
        {
            b.animate( {'left':890}, 1000, 'easeOutQuint', function() { toggleBodyAnimate = false; } );
            toggleBodyFlag = false;
        }
    }
}

var toggleShortcutsFlag = false;
var toggleShortcutsAnimate = false;
function toggleShortcuts()
{
    if( !toggleShortcutsAnimate )
    {
        toggleShortcutsAnimate = true;
        var b = $('div#shortcuts');
        if( !toggleShortcutsFlag )
        {
            b.animate( {'top':0}, 1000, 'easeOutQuint', function() { toggleShortcutsAnimate = false; $("img#btn_shortcuts").attr("src", "images/btn_shortcuts2.gif"); } );
            toggleShortcutsFlag = true;
        }
        else
        {
            b.animate( {'top':-479}, 1000, 'easeOutQuint', function() { toggleShortcutsAnimate = false; $("img#btn_shortcuts").attr("src", "images/btn_shortcuts.gif"); } );
            toggleShortcutsFlag = false;
        }
    }
}

function hideBody()
{
    toggleBodyFlag = false;
    $('div#body').css( "left", "890px" );
}

function hideShortcuts()
{
    toggleShortcutsFlag = false;
    $("img#btn_shortcuts").attr("src", "images/btn_shortcuts.gif");
    $('div#shortcuts').css( "top", "-479px" );
}

var navigatorAnimate = false;
var teaserIdx = 0;
function  navigatorPrev()
{
    if( !navigatorAnimate )
    {
        teaserIdx++;
        navigatorAnimate = true;
        var div = $("div#teasers");
        var div2 = $("div.normal_article div#articles");
        var step = -263-51;
        var step2 = -890;
        var left = div.position().left;
        var left2 = div2.position().left;
        var children = $("div#teasers div.teaser");
        var last = $(children[children.length-1]).position().left+$(children[children.length-1]).width() + step*-2;
        
        //var articleId = children[teaserIdx].getAttribute("article_id");
        //var url2call = children[teaserIdx].getAttribute("url2call");
        //loadArticle(url2call,articleId,true);
        
        hideBody();
        hideShortcuts();
        var articles = $("div.normal_article div#articles div.article");
        selectTeaser( articles[teaserIdx].getAttribute("article_id") );
        
        div2.animate( {'left':left2+step2}, 1000, 'easeOutQuint' );
        if( left*-1+891+step*-1 < last )
        {
            div.animate( {'left':left+step}, 1000, 'easeOutQuint', function() { navigatorAnimate = false; } );
            $("div#navigator_prev").css( "visibility", "visible" );
        }
        else
        {
            $("div#navigator_next").css( "visibility", "hidden" );
            div.animate( {'left':891-last}, 1000, 'easeOutQuint', function() { navigatorAnimate = false; } );
        }
    }
}

function  navigatorNext()
{
    if( !navigatorAnimate )
    {
        teaserIdx--;
        navigatorAnimate = true;
        var div = $("div#teasers");
        var div2 = $("div.normal_article div#articles");
        var step = 263+51;
        var step2 = 890;
        var left = div.position().left;
        var left2 = div2.position().left;
        
        var children = $("div#teasers div.teaser");
        //var articleId = children[teaserIdx].getAttribute("article_id");
        //var url2call = children[teaserIdx].getAttribute("url2call");
        //loadArticle(url2call,articleId,true);
        
        hideBody();
        hideShortcuts();
        var articles = $("div.normal_article div#articles div.article");
        selectTeaser( articles[teaserIdx].getAttribute("article_id") );

        div2.animate( {'left':left2+step2}, 1000, 'easeOutQuint' );
        if( left+step < 0 )
        {
            div.animate( {'left':left+step}, 1000, 'easeOutQuint', function() { navigatorAnimate = false; } );
            $("div#navigator_next").css( "visibility", "visible" );
        }
        else
        {
            $("div#navigator_prev").css( "visibility", "hidden" );
            div.animate( {'left':0}, 1000, 'easeOutQuint', function() { navigatorAnimate = false; } );
        }
    }
}

function getArticleIdx( articleId )
{
    var retval = 0;
    var articles = $("div.normal_article div#articles div.article");
    for( var i=0; i<articles.length; i++ )
    {
        if( articles[i].getAttribute("article_id") == articleId )
        {
            retval = i;
            break;
        }
    }
    
    return( retval );
}

/*
    imageIdx == -1 - show body text
    imageIdx > 0 - slide to the necessary image
*/
function gotoArticle( articleId, imageIdx )
{
    if( articleId > 0 )
    {
        idx = getArticleIdx( articleId );
        //alert( "idx="+ idx +" teaserIdx="+ teaserIdx );
        if( idx != teaserIdx )
        {
            var div = $("div#teasers");
            var div2 = $("div.normal_article div#articles");
            var left = div.position().left;
            var left2 = div2.position().left;
            var step = -263-51;
            var step2 = -890;
            if( idx < teaserIdx )
            {
                step = 263+51;
                step2 = 890;
                left -= step * ( idx-teaserIdx );
                left2 -= step2 * ( idx-teaserIdx );
            }
            else
            {
                left += step * ( idx-teaserIdx );
                left2 += step2 * ( idx-teaserIdx );
            }
            
            if( idx > teaserIdx )
            {
                var children = $("div#teasers div.teaser");
                
                div2.animate( {'left':left2}, 1000, 'easeOutQuint' );
                if( idx == children.length-1 )
                {
                    $("div#navigator_prev").css( "visibility", "visible" );
                    $("div#navigator_next").css( "visibility", "hidden" );
                }
                div.animate( {'left':left}, 1000, 'easeOutQuint', function() { navigatorAnimate = false; if(imageIdx==-1) toggleBody(); } );
            }
            else
            {
                var children = $("div#teasers div.teaser");
                
                div2.animate( {'left':left2}, 1000, 'easeOutQuint' );
                if( idx > 0 )
                {
                    div.animate( {'left':left}, 1000, 'easeOutQuint', function() { navigatorAnimate = false; if(imageIdx==-1) toggleBody(); } );
                    $("div#navigator_next").css( "visibility", "visible" );
                }
                else
                {
                    $("div#navigator_next").css( "visibility", "visible" );
                    $("div#navigator_prev").css( "visibility", "hidden" );
                    div.animate( {'left':0}, 1000, 'easeOutQuint', function() { navigatorAnimate = false; if(imageIdx==-1) toggleBody(); } );
                }
                
            }
            
            if( idx < children.length-1 && idx > 0 )
            {
                $("div#navigator_next").css( "visibility", "visible" );
                $("div#navigator_prev").css( "visibility", "visible" );
            }
            
            teaserIdx = idx;
            hideBody();
            hideShortcuts();
            var articles = $("div.normal_article div#articles div.article");
            selectTeaser( articles[teaserIdx].getAttribute("article_id") );
        }
        else
        {
            if( imageIdx == -1 ) toggleBody();
        }
            
        if( imageIdx >= 0 )
        {
            /* //the old variant showing an image
            var thumbnail = $("div.thumbnails img#thumbnail_"+ articleId +"_"+ imageIdx)
            $("div#loader").css( "visibility", "visible" );
            img_path = thumbnail.attr("normal");
            var img = $("<img src='"+ img_path +"' border='0' onclick='toggleBody("+ articleId +")'/>").load( function()
            {
                $("div#loader").css( "visibility", "hidden" );
                $("div#image_"+ articleId).children().remove();
                $("div#image_"+ articleId).append( img );
            } );
            */
            var articleImages = $("div.article div#image_"+ articleId);
            var iLeft = articleImages.position().left;
            var iPrev = -1*iLeft/890;
            var iStep = iLeft + -890*(imageIdx-iPrev);
            //alert( "iLeft="+ iLeft +" iStep="+ iStep );
            articleImages.animate( {'left':iStep}, 1000, 'easeOutQuint', function() { navigatorAnimate = false; } );
        }
    }
}

