//
// jQuery effekt for demo siden til somebody.no/demo.html
// Av Alireza Balouch @ Siteman AS 2009
//
// Sist endret: 2009.10.23
//

var innholdBredde = 911;
var current = 1;

$(document).ready(function(){
    // nav click
    $('#demo-topp a').click(function(){
        var navNavn = $(this).attr('id');
        current = navNavn.replace('side' ,'');
        // sliding av innhold
        slideInnhold();
        // submenu effekt
        submenuEffekt();
        // nav aktivering av klassen
        setTopClass();
        return false;
    });
    // submenu click
    $('#demo-bunn a').click(function(){
         var subNavNavn = $(this).attr('id');
         current = subNavNavn.replace('steg-' ,'');
        // sliding av innhold
        slideInnhold();
        // submenu effekt
        submenuEffekt();
        // nav aktivering av klassen
        setTopClass();
        return false;
    });
    // tilbake og videre click
    $('.demoknapper a').click(function(){
        var relNavn = $(this).attr('rel');
        current = relNavn.replace('slide-' ,'');
        // sliding av innhold
        slideInnhold();
        // submenu effekt
        submenuEffekt();
        // nav aktivering av klassen
        setTopClass();
        return false;
    });
    // videre Click

    function setTopClass(){
       // nav aktivering av klassen
       $('#demo-topp li').removeClass('aktiv');
       if( current >= 2 && current <= 4){
            $('#side2').parent().addClass('aktiv');
       }
       else if( current >= 5 && current <= 13 ){
            $('#side5').parent().addClass('aktiv');
       }
       else{
           $('#side' + current ).parent().addClass('aktiv');
       }
    }
    function slideInnhold(){
        var intID = (current * innholdBredde) - innholdBredde ;
        $('#inner-innhold' ).animate({'marginLeft' :  ('-' + intID) } , 1000);
    }

    function submenuEffekt(){
        $('#demo-bunn ul li a').css({'background-position' : 'top'}).animate({'opacity' : 0.5} , 50);
       if( current >= 2 && current <= 4){
            $('#steg-2' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-3' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-4' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
       }
       if( current >= 5 && current <= 13 ){
            $('#steg-5' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-6' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-7' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-8' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-9' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-10' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-11' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-12' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
            $('#steg-13' ).css({'background-position' : 'top'}).animate({'opacity' : 1} , 200);
       }
       $('#steg-' + current ).css({'background-position' : 'bottom'}).animate({'opacity' : 1} , 600);
    }
});