﻿// JScript File

function Slideshow(photoImageId, imageSize, photoArray, showMapLink){
    var timer;
    var tickCounter = 0;
    var photoIndex = 0;
    var photoPath = 'http://abandonedrails.com/images/pictures/'
    var processPath = 'http://abandonedrails.com/image.ashx?size=' + imageSize + '&file=';
    var imgs;
    
    var showPhoto = function(index){
        var photo = eval(photoArray[index]);
        var photoLinkImage = document.getElementById(photoImageId);
        var photoLink = photoLinkImage.parentNode;
        photoLink.href = photoPath + photo.filename;
        photoLinkImage.src = imgs[photoIndex].src;
        document.getElementById('caption').innerHTML = photo.caption;
        var ordinal = index + 1;
        document.getElementById('picOrdinal').innerHTML = ordinal.toString();
        
        togglePhotoStatus(photo);
        if (showMapLink) togglePhotoMapLink(photo);
        
        slideshow.resize(false);
    };
    
    var togglePhotoStatus = function(photo) {
        var photoArea = document.getElementById('photoArea');
        var newIcon = document.getElementById('newIcon');
        if (photo.isNew) {
            photoArea.className = 'mainphotodiv mainphotodivnew';
            if (newIcon) newIcon.style.visibility = 'visible';  // newIcon may not be present if only one picture shown.
        }
        else {
            photoArea.className = 'mainphotodiv';
            if (newIcon) newIcon.style.visibility = 'hidden';  // newIcon may not be present if only one picture shown.
        }
    };
    
    var togglePhotoMapLink = function(photo) {
        if (photo.latitude != 0) {
            document.getElementById('photoIdField').value = photo.id;
            document.getElementById('mapPhotoLink').style.visibility = 'visible';
        }
        else {
            document.getElementById('mapPhotoLink').style.visibility = 'hidden';
        }
    };
    
    this.preload = function(){
        if (document.images && photoArray.length > 1)
        {
            imgs = new Array();
            for(var i = 0;i < photoArray.length;i++)
            {
                var photo = eval(photoArray[i]);
                var preloadImg = new Image();
                preloadImg.src = processPath + photo.filename;
                imgs[i] = preloadImg;
            }
        }
    };
    
    this.tick = function(){
        tickCounter += 1;
        if (tickCounter > 6)
        {
            tickCounter = 0;
            slideshow.next(true);
        }
        document.getElementById('timerImage').src = 'images/timer' + tickCounter.toString() + '.png';
    };
    this.back = function(){
        photoIndex -= 1;
        if (photoIndex < 0) photoIndex = photoArray.length - 1;
        showPhoto(photoIndex);
        if (timer) this.pause();
    };
    this.pause = function(){
        if (timer)
        {
            clearInterval(timer);
            timer = null;
            document.getElementById('toggle').src = 'images/play.png'
        }
        else
        {
            document.getElementById('toggle').src = 'images/pause.png'
            this.setTimer();
        }
    };
    this.next = function(auto){
        photoIndex += 1;
        if (photoIndex == photoArray.length) photoIndex = 0;
        showPhoto(photoIndex);
        if (!auto && timer) this.pause();
    };
    this.setTimer = function(){
        timer = setInterval('slideshow.tick();', 1000);
    };
    this.resize = function(forceResize) {
        var photoImage = document.getElementById(photoImageId);
        if (photoImage)
        {
            if (forceResize)
            {
                // if true, then this method is called for only one picture, which means the slideshow controls are not showing
                // need to add margin to the top of the image in order to give it some head space
                photoImage.style.marginTop = '10px';
            }
            var captionText = document.getElementById('caption');
            var photoArea = document.getElementById('photoArea');
            var lowerBound = captionText.offsetTop + captionText.offsetHeight;
            if ((lowerBound > photoArea.offsetTop + photoArea.offsetHeight) || forceResize)
            {
                var newHeight = lowerBound - photoArea.offsetTop + 5;  // add 5 for padding
                photoArea.style.height = newHeight.toString() + 'px';
            }
        }
    };
    this.findPhoto = function(id)
    {
        for(var i = 0; i < photoArray.length; i++)
        {
            if (photoArray[i].id == id)
                return photoArray[i];
        }
        return null;
    };
    this.mapPhoto = function(){
        var photoId = parseInt(document.getElementById('photoIdField').value);
        
        // get latitude coord
        var lat, lng;
        for(var i = 0; i < photoArray.length; i++) {
            var photo = eval(photoArray[i]);
            if (photo.id == photoId){
                lat = photo.latitude;
                lng = photo.longitude;
                break;
            }
        }
        
        // now get all photos with same latitude (presume same longitude)
        if (lat){
            var ids = new Array();
            // now get all photoIds that have same lat lngs
            for(var j = 0; j < photoArray.length; j++) {
                var photo = eval(photoArray[j]);
                if (photo.latitude == lat) {
                    ids.push(photo.id);
                }
            }
            
            // show the photos on the map
            Map.showPhotos(new GLatLng(lat, lng), ids);
        };
    };
    
    this.preload();
    
    this.resize(photoArray.length == 1);
    
    if (photoArray.length > 0)
    {
        if (photoArray.length > 1)
        {
            // show photo as new or not and toggle map link since these aren't handled by code-behind
            togglePhotoStatus(photoArray[0]);
            if (showMapLink) togglePhotoMapLink(photoArray[0]);
        
            document.getElementById('picOrdinal').innerHTML = '1';
            document.getElementById('picCount').innerHTML = photoArray.length.toString();
        
            setTimeout('slideshow.setTimer();', 0);
        }
    }
};

// ---------------------------  Signal Script  -------------------------
var _signalPosition = 0;
var _signalMoveTo = 2;
var _signalTimer = null;
var _signal;
var _signalInterval = 200;
function toggleSignal(signalId, toPosition)
{
    _signal = document.getElementById(signalId);
    _signalMoveTo = toPosition;
    
    if (_signalTimer)
        clearTimeout(_signalTimer);

    if (_signalPosition == 1)
    {
        if (_signalMoveTo == 0)
            moveToRestrict();
        else
            moveToProceed();
    }
    else
    {
        moveToApproach();
    }
};

function moveToRestrict()
{
    _signal.src = 'images/cps_restrict.png';
};

function moveToApproach()
{
    _signal.src = 'images/cps_approach.png';
    switch (_signalMoveTo)
    {
        case 0:
            _signalTimer = setTimeout('moveToRestrict();', _signalInterval);
            break;
        case 2:
            _signalTimer = setTimeout('moveToProceed();', _signalInterval);
            break;
    }
};

function moveToProceed()
{
    _signal.src = 'images/cps_proceed.png';
};