/*Alustuksen muuttujat
************************************/
var listItemsCounter = 0;           // First Child ListItems Under ViewPortDiv
var itemChangeOffset = 5000;        // Milliseconds
var stepsPerAction = 1;
var ItemElements;                   // Array elements in animation
var displayFirstItemOnInit = 1;
var tempLinkItem;

/*Autoplay
************************************/
var autoplay_state_on = 0;
var autoplay;                       // timer function variable

/*Animaation aikaiset muuttujat
************************************/
var itemStateCounter = 0;           // ListItems State Indicator (current Item id)
var nextItem;                       // ListItems State Indicator (next Item id)
var previousItem;                   // ListItems State Indicator (previous Item id)

var disabledItem_object;            // Object State Indicators
var nextItem_object;
var previousItem_object;
var itemStateCounter_object;

var slidingEffect_state_on = 0;
var itemFader;                      // timer function variable
var sliderSteps = 5;                // opacity fade 1/100 ajassa sliderStepOffset (vai tasan 100:seen jaolliset käy)
var sliderStepOffset = 20;           // Milliseconds
var fadeoutItem;
var fadeinItem;
var fadeouteffectState = 100;
var fadeineffectState = 0;

window.onload = function () {
    countSliderItems();
    displayCurrentSlides('next');
    if (!autoplay_state_on && listItemsCounter > 1) {
        autoplay_state_on = 1;
        autoplay = setTimeout("TimedSlide()", itemChangeOffset);
    }
}

function TimedSlide() {
    if (itemStateCounter < listItemsCounter - 1) {
        itemStateCounter = itemStateCounter + stepsPerAction;
    }
    else {
        itemStateCounter = 0;
    }
    displayCurrentSlides('next');                   // huomoitava ettei slideeffect aika saa olla pidempi kuin itse kuvan näyttäminen.
    autoplay = setTimeout("TimedSlide()", itemChangeOffset);
}

function tryAutoSlideStart(e, mouseOutFrom) {
    if (!e) var e = window.event;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != document.body.parentNode && reltg != mouseOutFrom) {
        if (reltg == null) {
            reltg = document.body.parentNode;
            break;
        }
        reltg = reltg.parentNode;
    }
    if (reltg != mouseOutFrom) {
        if (!autoplay_state_on) {
            autoplay_state_on = 1;
            autoplay = setTimeout("TimedSlide()", itemChangeOffset);
        }
    }
}

function tryAutoSlideStop(e, mouseInFrom) {
    if (!e) var e = window.event;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.fromElement;
    while (reltg != document.body.parentNode && reltg != mouseInFrom) {
        if (reltg == null) {
            reltg = document.body.parentNode;
            break;
        }
        reltg = reltg.parentNode;
    }
    if (reltg != mouseInFrom) {
        if (autoplay_state_on) {
            clearTimeout(autoplay);
            autoplay_state_on = 0;
        }
    }
}

function nextSlide() {
    if (!slidingEffect_state_on) {
        if (itemStateCounter >= listItemsCounter - 1) {
            itemStateCounter = 0;
        }
        else {
            itemStateCounter = itemStateCounter + stepsPerAction;
        }
        if (autoplay_state_on) {
            clearTimeout(autoplay);
            autoplay_state_on = 0;
        }
        displayCurrentSlides('next');
    }
}

function previousSlide() {
    if (!slidingEffect_state_on) {
        if (itemStateCounter == 0) {
            itemStateCounter = listItemsCounter - 1;
        }
        else {
            itemStateCounter = itemStateCounter - stepsPerAction;
        }
        if (autoplay_state_on) {
            clearTimeout(autoplay);
            autoplay_state_on = 0;
        }
        displayCurrentSlides('previous');
    }
}

function displayCurrentSlides(direction) {
    if (listItemsCounter > 1) {
        if (itemStateCounter >= listItemsCounter - 1) {
            nextItem = 0;
            previousItem = itemStateCounter - stepsPerAction;
        }
        else if (itemStateCounter <= 0) {
            nextItem = 1;
            previousItem = listItemsCounter - 1;
        }
        else {
            nextItem = itemStateCounter + stepsPerAction;
            previousItem = itemStateCounter - stepsPerAction;
        }
    }
    else {
        nextItem = itemStateCounter;
        previousItem = itemStateCounter;
    }

    for (var i = 0; i < listItemsCounter; i++) {
        if (i != itemStateCounter && i != nextItem && i != previousItem) {
            disabledItem_object = document.getElementById(ItemElements[i].id);
            disabledItem_object.style.visibility = "hidden";
            disabledItem_object.style.display = "none";
            disabledItem_object.style.zIndex = 0;
            disabledItem_object.style.opacity = 0;
            disabledItem_object.style.filter = 'alpha(opacity=0);';
            disabledItem_object.style.KhtmlOpacity = 0;
        }
        else if (i == itemStateCounter) {
            itemFadeInOut(direction);
        }
        else {
        }
    }
}

function itemFadeInOut(direction) {
    if (displayFirstItemOnInit) {
        nextItem_object = document.getElementById(ItemElements[nextItem].id)
        nextItem_object.style.visibility = "hidden";
        nextItem_object.style.display = "block";
        nextItem_object.style.zIndex = 0;
        nextItem_object.style.opacity = 0;
        nextItem_object.style.filter = 'alpha(opacity=0);';
        nextItem_object.style.KhtmlOpacity = 0;
        previousItem_object = document.getElementById(ItemElements[previousItem].id);
        previousItem_object.style.visibility = "hidden";
        previousItem_object.style.display = "block";
        previousItem_object.style.zIndex = 0;
        previousItem_object.style.opacity = 0;
        previousItem_object.style.filter = 'alpha(opacity=0);';
        previousItem_object.style.KhtmlOpacity = 0;
        itemStateCounter_object = document.getElementById(ItemElements[itemStateCounter].id);
        itemStateCounter_object.style.visibility = "visible";
        itemStateCounter_object.style.display = "block";
        itemStateCounter_object.style.zIndex = 10;
        itemStateCounter_object.style.opacity = 1;
        itemStateCounter_object.style.filter = 'alpha(opacity=100);';
        itemStateCounter_object.style.KhtmlOpacity = 1;
        // asetetaan linkki ekalle kuvalle
        tempLinkItem = document.getElementById("hiddenItem" + itemStateCounter);
        document.getElementById('hrefTargetLink').href = tempLinkItem.value;
        displayFirstItemOnInit = 0;
    }
    else {
        if (direction == 'next') {
            fadeoutItem = document.getElementById(ItemElements[previousItem].id);
            fadeinItem = document.getElementById(ItemElements[itemStateCounter].id);
            slidingEffect_state_on = 1;
            fadeoutItem.style.zIndex = 10;
            fadeinItem.style.zIndex = 5;
            fadeinItem.style.visibility = 'visible';
            fadeinItem.style.display = 'block';       
            // asetetaan linkki
            tempLinkItem = document.getElementById("hiddenItem" + itemStateCounter);
            document.getElementById('hrefTargetLink').href = tempLinkItem.value;
            runSlideEffect();
        }
        else {
            fadeoutItem = document.getElementById(ItemElements[nextItem].id);
            fadeinItem = document.getElementById(ItemElements[itemStateCounter].id);
            slidingEffect_state_on = 1;
            fadeoutItem.style.zIndex = 10;
            fadeinItem.style.zIndex = 5;
            fadeinItem.style.visibility = 'visible';
            fadeinItem.style.display = 'block';
            // asetetaan linkki
            tempLinkItem = document.getElementById("hiddenItem" + itemStateCounter);
            document.getElementById('hrefTargetLink').href = tempLinkItem.value;
            runSlideEffect();
        }
    }
}

function runSlideEffect() {
    if (fadeouteffectState >= 0) {
        fadeoutItem.style.opacity = (fadeouteffectState / 100);
        fadeinItem.style.opacity = (fadeineffectState / 100);
        fadeoutItem.style.filter = 'alpha(opacity=' + fadeouteffectState + ');';
        fadeinItem.style.filter = 'alpha(opacity=' + fadeineffectState + ');';
        fadeoutItem.style.KhtmlOpacity = (fadeouteffectState / 100);
        fadeinItem.style.KhtmlOpacity = (fadeineffectState / 100);
        fadeouteffectState = fadeouteffectState - sliderSteps;
        fadeineffectState = fadeineffectState + sliderSteps;
        itemFader = setTimeout("runSlideEffect()", sliderStepOffset);
    }
    else {
        slidingEffect_state_on = 0;
        fadeouteffectState = 100;
        fadeineffectState = 0;
    }
}

function countSliderItems() {
    var itemContainer = document.getElementById('itemsViewPort');
    var iCount = itemContainer.getElementsByTagName('li');
    ItemElements = iCount;
    var iCountItem;
    for (var i = 0; i < iCount.length; i++) {
        iCountItem = iCount[i];
        if (itemContainer == iCountItem.parentNode.parentNode) {
            listItemsCounter = listItemsCounter + 1;
        }
    }
}