//--------------------------------------------------------------------------------
//--|
//--|
//--| Här BÖRJAR JAVA-DELEN
//--|
//--| Allmänna kommentarer om hur tavelförflyttningen fungerar:
//--| Alla tavlor laddas samtidigt och är gömda. Dessutom visas två rutor
//--| med samma färg / mönster som bakgrunden (skall ej kunna skiljas från
//--| bakgrunden). När användaren väljer att rulla, visas nästa tavla (till
//--| höger eller vänster, beroende på rullningsriktning). Poängen är att
//--| de ovan nämnda rutorna är placerade så att de täcker över tavlan som
//--| ska komma in i bild initalt. Detta för att skapa upplevelsen av att
//--| tavlan gradvis kommer in i bilden samt att tavlan som försvinner ut,
//--| också gör detta gradvis.
//--|
//--------------------------------------------------------------------------------



//--------------------------------------------------------------------------------
//--|
//--| GLOBALA KONSTANTER
//--|
//--| Förhoppningsvis räcker det med att ändra här för att byta upplösning etc.
//--| Ett undantag finns tyvärr. Om tavelbredden ska bytas måste den både bytas
//--| här och i stylesheeten (style.css) i klassen Cover.
//--|
//--|
//--------------------------------------------------------------------------------

var MAX_TAVLA = 3;                                      // Antal tavlor
var MIN_TAVLA = 1;                                      // Är normalt 1. Lägsta index på tavla


var BREDD_TAVLA = 70;                                  // Tavelbredd
var HOJD_TAVLA = 70;                                    // Tavelhöjd
var SIDBREDD = 700;                                     // Anger hela sidans bredd
var MARGINAL = 0;                                       // Anger sidans marginaler MÅSTE VARA STÖRRE ÄN TAVELBREDD !!!
var X_MAX = SIDBREDD;         							// Maximal x-position i bilden
var X_MIN = -BREDD_TAVLA;                               // Minimal x-position i bilden
var X_ADD = 16;                                          // Antal pixels att lägga till för varje steg av tavlans förflyttning
var TIMEOUT = 1;                                        // Antal millisekunder (?) att vänta mellan varje uppdatering

var Y_POS = 65;                                         // Anger y-position för tavlorna

var V_POS = X_MIN;                                      // Position av övertäckningsruta vänster. Normalt samma som X_MIN

var M_POS = (X_MAX - BREDD_TAVLA) / 2;                  // Mittposition, positionerar tavlan i mitten av "synfältet"
var H_POS = X_MAX;                                      // Position av övertäckningsruta höger

var aktuellTavla = 1;                                   // Räknare för aktuell tavla. Börjar normalt med "vänstraste" tavlan
var xCnt = 0;
var rullningsFlagga = 0;                                // Anger om rullning sker, eller inte
var oldTavlaID = 1;

//--------------------------------------------------------------------------------
//--|
//--| GLOBALA KONSTANTER - BROWSER SNIFFING
//--|
//--| Allting taget från: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
//--|
//--------------------------------------------------------------------------------

    // convert all characters to lowercase to simplify testing
    var agt=navigator.userAgent.toLowerCase();

    // *** BROWSER VERSION ***
    // Note: On IE5, these return 4, so use is_ie5up to detect IE5.
    var is_major = parseInt(navigator.appVersion);
    var is_minor = parseFloat(navigator.appVersion);

    // Note: Opera and WebTV spoof Navigator.  We do strict client detection.
    // If you want to allow spoofing, take out the tests for opera and webtv.
    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
    var is_nav2 = (is_nav && (is_major == 2));
    var is_nav3 = (is_nav && (is_major == 3));
    var is_nav4 = (is_nav && (is_major == 4));
    var is_nav4up = (is_nav && (is_major >= 4));
    var is_navonly      = (is_nav && ((agt.indexOf(";nav") != -1) ||
                          (agt.indexOf("; nav") != -1)) );
    var is_nav6 = (is_nav && (is_major == 5));
    var is_nav6up = (is_nav && (is_major >= 5));
    var is_gecko = (agt.indexOf('gecko') != -1);


    var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
    var is_ie3    = (is_ie && (is_major < 4));
    var is_ie4    = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
    var is_ie4up  = (is_ie && (is_major >= 4));
    var is_ie5    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
    var is_ie5_5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
    var is_ie5up  = (is_ie && !is_ie3 && !is_ie4);
    var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
    var is_ie6    = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
    var is_ie6up  = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);

    // KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
    // or if this is the first browser window opened.  Thus the
    // variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.
    var is_aol   = (agt.indexOf("aol") != -1);
    var is_aol3  = (is_aol && is_ie3);
    var is_aol4  = (is_aol && is_ie4);
    var is_aol5  = (agt.indexOf("aol 5") != -1);
    var is_aol6  = (agt.indexOf("aol 6") != -1);

    var is_opera = (agt.indexOf("opera") != -1);
    var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
    var is_opera3 = (agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);
    var is_opera4 = (agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);
    var is_opera5 = (agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);
    var is_opera5up = (is_opera && !is_opera2 && !is_opera3 && !is_opera4);

    var is_webtv = (agt.indexOf("webtv") != -1); 

    var is_TVNavigator = ((agt.indexOf("navio") != -1) || (agt.indexOf("navio_aoltv") != -1)); 
    var is_AOLTV = is_TVNavigator;

    var is_hotjava = (agt.indexOf("hotjava") != -1);
    var is_hotjava3 = (is_hotjava && (is_major == 3));
    var is_hotjava3up = (is_hotjava && (is_major >= 3));

var browserCompatibility = " ";

if (is_nav4)
    browserCompatibility = 'nn4';
else if (is_ie4up)
    browserCompatibility = 'ie4';
else if (is_gecko || is_ie6up || is_opera5up)
    browserCompatibility = 'gecko';


//------------------------------------------------------------------------------------------
//--| FUNKTION: setLayout()
//--|
//--| BESKRIVNING: Sätter layouten för vissa element, vars layout måste bestämmas vid
//--| körning. (främst de som beror på upplösningen etc.)
//------------------------------------------------------------------------------------------

function init(maxTavla, aktTavla)
{
	MAX_TAVLA = maxTavla;

	aktuellTavla = aktTavla;

	switch(browserCompatibility)
	    {
	    case 'nn4':
		{
		    document.layers['tavla' + (String) (aktuellTavla)].visibility = 'show';
		    document.layers['tavla' + (String) (aktuellTavla)].left = M_POS;
		    document.layers['tavla' + (String) (aktuellTavla) + 'Text'].visibility = 'show';
		    break;
		}
	    case 'ie4':
		{
		    document.all('tavla' + (String) (aktuellTavla)).style.visibility = 'visible';
		    document.all('tavla' + (String) (aktuellTavla)).style.left = M_POS;
		    document.all('tavla' + (String) (aktuellTavla) + 'Text').style.visibility = 'visible';
		    break;
		}
	    case 'gecko':
		{
		    document.getElementById('tavla' + (String) (aktuellTavla)).style.visibility = 'visible';
		    document.getElementById('tavla' + (String) (aktuellTavla)).style.left = M_POS;
		    document.getElementById('tavla' + (String) (aktuellTavla) + 'Text').style.visibility = 'visible';
		    break;
		}
	}
}

//------------------------------------------------------------------------------------------
//--| FUNKTION: rullaHoger()
//--|
//--| BESKRIVNING: Rullar tavlorna åt höger, samma sak som en betraktare som går åt vänster
//--| (aktuellTavla minskar)
//------------------------------------------------------------------------------------------

function rullaHoger()
{
        // Vi rullar inte om rullning redan pågår

        if (rullningsFlagga == 1)
        {
                return;
        }

        // Kan vi rulla, eller har första tavlan nåtts?
        if (aktuellTavla <= MIN_TAVLA)
        {
                return;
        }

        rullningsFlagga = 1;
        rullaTavlorHoger('tavla' + (String) (aktuellTavla - 1), 'tavla' + (String) (aktuellTavla));
		oldTavlaID = 'tavla' + (String) (aktuellTavla) + 'Text';
        --aktuellTavla;
}

//------------------------------------------------------------------------------------------
//--| FUNKTION: rullaVanster()
//--|
//--| BESKRIVNING: Rullar tavlorna åt vänster, samma sak som en betraktare som går åt höger
//--| (aktuellTavla ökar)
//------------------------------------------------------------------------------------------

function rullaVanster()
{
        // Vi rullar inte om rullning redan pågår

        if (rullningsFlagga == 1)
        {
                return;
        }

        // Kan vi rulla, eller har första tavlan nåtts?

        if (aktuellTavla >= MAX_TAVLA)
        {
                return;
        }

        rullningsFlagga = 1;

        rullaTavlorVanster('tavla' + (String) (aktuellTavla), 'tavla' + (String) (aktuellTavla + 1));

		oldTavlaID = 'tavla' + (String) (aktuellTavla) + 'Text';

        ++aktuellTavla;
}

//------------------------------------------------------------------------------------------
//--| FUNKTION: rullaTavlorHoger(tavlaV, tavlaH)
//--|
//--| BESKRIVNING: Placerar tavlaV vid V_POS (längst till vänster) och tavlaH vid M_POS
//--| (i mitten) och rullar dessa åt höger.
//------------------------------------------------------------------------------------------

function rullaTavlorHoger(tavlaV, tavlaH)
{
	switch(browserCompatibility)
	    {
	    case 'nn4':
		{
		    document.layers[tavlaV].left = V_POS;                   // Sätt tavlornas startposition
		    document.layers[tavlaH].left = M_POS;
		    document.layers[tavlaV].visibility = 'show';   // Visa tavlan
		    document.layers[tavlaH].visibility = 'show';
		    break;
		}
	    case 'ie4':
		{
		    document.all(tavlaV).style.left = V_POS;                        // Sätt tavlornas startpositioner
		    document.all(tavlaH).style.left = M_POS;
		    document.all(tavlaV).style.visibility = 'visible';                // Visa tavlan
		    document.all(tavlaH).style.visibility = 'visible';
		    break;
		}
	    case 'gecko':
		{
		    document.getElementById(tavlaV).style.left = V_POS;                        // Sätt tavlornas startpositioner
		    document.getElementById(tavlaH).style.left = M_POS;
		    document.getElementById(tavlaV).style.visibility = 'visible';                // Visa tavlan
		    document.getElementById(tavlaH).style.visibility = 'visible';
		    break;
		}
        }
        xCnt = V_POS;
        rullaTavlor(tavlaV, tavlaH, X_ADD);
}

//------------------------------------------------------------------------------------------
//--| FUNKTION: rullaTavlorVanster(tavlaV, tavlaH)
//--|
//--| BESKRIVNING: Placerar tavlaV vid M_POS (i mitten) och tavlaH vid H_POS
//--| (längst till vänster) och rullar dessa åt vänster.
//------------------------------------------------------------------------------------------

function rullaTavlorVanster(tavlaV, tavlaH)
{
	switch(browserCompatibility)
	    {
	    case 'nn4':
		{
		    document.layers[tavlaV].left = M_POS;                   // Sätt tavlornas startposition
		    document.layers[tavlaH].left = H_POS;
		    document.layers[tavlaV].visibility = 'show';   // Visa tavlan
		    document.layers[tavlaH].visibility = 'show';
		    break;
		}
	    case 'ie4':
		{
		    document.all(tavlaV).style.left = M_POS;                        // Sätt tavlornas startpositioner
		    document.all(tavlaH).style.left = H_POS;
		    document.all(tavlaV).style.visibility = 'visible';                // Visa tavlan
		    document.all(tavlaH).style.visibility = 'visible';
		    break;
		}
	    case 'gecko':
		{
		    document.getElementById(tavlaV).style.left = M_POS;                        // Sätt tavlornas startpositioner
		    document.getElementById(tavlaH).style.left = H_POS;
		    document.getElementById(tavlaV).style.visibility = 'visible';                // Visa tavlan
		    document.getElementById(tavlaH).style.visibility = 'visible';
		    break;
		}
        }
        xCnt = M_POS;
        rullaTavlor(tavlaV, tavlaH, -X_ADD);
}

//------------------------------------------------------------------------------------------
//--| FUNKTION: rullaTavlor(tavlaV, tavlaH, xAdd)
//--|
//--| BESKRIVNING: Rullar tavlorna xAdd pixels åt höger eller vänster, beroende på xAdd
//------------------------------------------------------------------------------------------

function rullaTavlor(tavlaV, tavlaH, xAdd)
{
        xCnt += xAdd;

	switch(browserCompatibility)
	    {
	    case 'nn4':
		{
		    if ((xCnt > M_POS) || (xCnt < V_POS))
			{
			    if (xAdd < 0)
				{
				    document.layers[tavlaV].visibility = 'hide';
				    document.layers[tavlaH].left = M_POS;
				}
			    else
				{
				    document.layers[tavlaH].visibility = 'hide';
				    document.layers[tavlaV].left = M_POS;
				}
			    rullningsFlagga = 0; // Vi rullar inte längre
			    uppdateraTavlaText();
			    return;
			}
		    document.layers[tavlaV].left += xAdd;
		    document.layers[tavlaH].left += xAdd;
		    break;
		}
	    case 'ie4':
		{
		    if ((xCnt > M_POS) || (xCnt < V_POS))
			{
			    if (xAdd < 0)
				{
				    document.all(tavlaV).style.visibility = 'hidden';
				    document.all(tavlaH).style.left = M_POS;
				}
			    else
				{
				    document.all(tavlaH).style.visibility = 'hidden';
				    document.all(tavlaV).style.left = M_POS;
				}
			    rullningsFlagga = 0; // Vi rullar inte längre
			    uppdateraTavlaText();
			    return;
			}
		    document.all(tavlaV).style.left = parseInt(document.all(tavlaV).style.left) + xAdd;
		    document.all(tavlaH).style.left = parseInt(document.all(tavlaH).style.left) + xAdd;
		    break;
		}
	    case 'gecko':
		{
		    if ((xCnt > M_POS) || (xCnt < V_POS))
			{
			    if (xAdd < 0)
				{
				    document.getElementById(tavlaV).style.visibility = 'hidden';
				    document.getElementById(tavlaH).style.left = M_POS;
				}
			    else
				{
				    document.getElementById(tavlaH).style.visibility = 'hidden';
				    document.getElementById(tavlaV).style.left = M_POS;
				}
			    rullningsFlagga = 0; // Vi rullar inte längre
			    uppdateraTavlaText();
			    return;
			}
		    document.getElementById(tavlaV).style.left = parseInt(document.getElementById(tavlaV).style.left) + xAdd;
		    document.getElementById(tavlaH).style.left = parseInt(document.getElementById(tavlaH).style.left) + xAdd;

		    break;
		}	

	    }

       if ((browserCompatibility =='nn4') || (browserCompatibility =='ie4') || (browserCompatibility == 'gecko'))
        {
                setTimeout('rullaTavlor("' + tavlaV + '", "' + tavlaH + '",' + xAdd + ')', TIMEOUT);
        }
}

function uppdateraTavlaText()
{
	switch(browserCompatibility)
	    {
	    case 'nn4':
		{
		    document.layers[oldTavlaID].visibility = 'hide';
		    document.layers['tavla' + (String) (aktuellTavla) + 'Text'].visibility = 'show';
		    break;
		}
	    case 'ie4':
		{
		    document.all(oldTavlaID).style.visibility = 'hidden';
		    document.all('tavla' + (String) (aktuellTavla) + 'Text').style.visibility = 'visible';
		    break;
		}
	    case 'gecko':
		{
		    document.getElementById(oldTavlaID).style.visibility = 'hidden';
		    document.getElementById('tavla' + (String) (aktuellTavla) + 'Text').style.visibility = 'visible';
		    break;
		}
	    }
}

function popUpWin(url, width, height) {
    switch(browserCompatibility)
	{
        case 'ie4' || 'nn4':
    	{
	    win_layout = 'width=' + width + 
		',height=' + height + 
		',directories=no,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no';
	    win_handle = window.open(url, '' , win_layout);
	    win_handle.focus();
	    break;
	}
        case 'gecko':
	{
	    win_layout = 'width=' + width + 
		',height=' + height + 
		',directories=no,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no';
	    win_handle = window.open(url, '' , win_layout);
	    win_handle.focus();
	    break;
	}
	}
    return false;
}

function popUpWinScrollbar(url, width, height) {
    switch(browserCompatibility)
	{
        case 'ie4' || 'nn4':
    	{
	    win_layout = 'width=' + width + 
		',height=' + height + 
		',directories=no,location=no,menubar=no,resizable=no,scrollbars=yes,status=no,toolbar=no';
	    win_handle = window.open(url, '' , win_layout);
	    win_handle.focus();
	    break;
	}
        case 'gecko':
	{
	    win_layout = 'width=' + width + 
		',height=' + height + 
		',directories=no,location=no,menubar=no,resizable=no,scrollbars=yes,status=no,toolbar=no';
	    win_handle = window.open(url, '' , win_layout);
	    win_handle.focus();
	    break;
	}
	}
    return false;
}