/* These values are initialised within ASP.Net */
var IMG_ICON_ID_PREIX;
var IMG_CAP_ID_PREIX;
var IMG_ID_PREIX;

var IE6Mode = false;

var transitionSpeed = 1000;
var currentBgIndex = 1;
var currentTextIndex = 1;
var currentIcon = 1;
var canEnter = 1;

var videos;
var currentVideo = -1;
var canChangeVideo = 1;
var currentVideoIcon = 1;
var currentContentIndex = 1;
var maxShift;
var currentFeature = 0;
var timer;
var imageCount;
var imageCounter = 2;
var transitionInterval = 5000;
var transitionsEnabled = true;
var isMapActive = false;
var imagesList;
var mediaPanelVersion = 0;
var mediaPanelHeights = [320, 420];

function InitialiseMediaPanel() {
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) //test for MSIE x.x;
    {
        var ieversion = new Number(RegExp.$1) // capture x.x portion and store as a number
        if (ieversion < 7)
            IE6Mode = true;
    }
    // else not IE

    if (!IE6Mode) {
        if (videos != null) {
            LoadVideo(0);
            currentVideo = 0;
            $('#VideoFrame').attr('src', videos[currentVideo][0]);
            $('#VideoFrame').attr('width', videos[currentVideo][1]);
            $('#VideoFrame').attr('height', videos[currentVideo][2]);
            $('#VideoFrame').css('margin-top', (mediaPanelHeights[mediaPanelVersion] - videos[currentVideo][2]) / 2);
        }

        $('#' + IMG_ID_PREIX + '1').show();
        $('#' + IMG_ICON_ID_PREIX + '1').addClass('SelectedImageIcon');
        $('#' + IMG_CAP_ID_PREIX + '1').show();

        if (transitionsEnabled && imageCount > 1)
            timer = window.setInterval(Slideshow, transitionInterval);

        if (isMapActive && imageCount > 1)
            $('#FilmStrip').show();

        if (isMapActive)
            InitialiseMap();
    }
    else
    {
        $('#MediaPanel').hide();
    }   
}

function Slideshow() {
    ChangeBackgroundImage(imageCounter++, false);
    if (imageCounter > imageCount)
        imageCounter = 1;
}

function addListener(element, type, expression, bubbling) {
    bubbling = bubbling || false;
    if (window.addEventListener) { // Standard
        element.addEventListener(type, expression, bubbling);
        return true;
    } else if (window.attachEvent) { // IE
        element.attachEvent('on' + type, expression);
        return true;
    } else return false;
}

function TransitionImage(index)
{
	$('#loading').hide();

	$('#' + IMG_ICON_ID_PREIX + currentIcon).removeClass('SelectedImageIcon');
    $('#' + IMG_ICON_ID_PREIX + index).addClass('SelectedImageIcon');
    currentIcon = index;

	var newCaptionId = '#' + IMG_CAP_ID_PREIX + index;
    var currentCaptionId = '#' + IMG_CAP_ID_PREIX + currentTextIndex;
    // Set the z-index of the current image's caption to a higher z-index to the new caption so it is on top for the transition.
    $(currentCaptionId).css('z-index', 2);
    $(newCaptionId).css('z-index', 1);
    // Reset the new captions opacity for IE
    $(newCaptionId).css('filter', 'alpha(opacity=90)');
    // Fade in the new caption and fade out the old.
    $(newCaptionId).fadeIn(transitionSpeed);
    $(currentCaptionId).fadeOut(transitionSpeed, function() {
        currentTextIndex = index;
    });
    
    var newImageId = '#' + IMG_ID_PREIX + index;
    var currentImageId = '#' + IMG_ID_PREIX + currentBgIndex;
    $(currentImageId).css('z-index', 2);
    $(newImageId).css('z-index', 1);
    $(newImageId).show();
    
    $(currentImageId).fadeOut(transitionSpeed, function() {
        currentBgIndex = index;
        canEnter = 1;
    });
}

function ChangeBackgroundImage(index, stopSlideshow) {

    // First check if the selected image is not the current image and that a transition is not in progress.
    if (currentBgIndex != index && canEnter == 1) {

        // Consume the lock so no other images can be selected during this transition.
        canEnter = 0;

        if (stopSlideshow)
            window.clearInterval(timer);

        /* 
        * Remove the previous selected icon's highlight and apply it to the newly selected icon.
        */
        //$('#' + IMG_ICON_ID_PREIX + currentIcon).removeClass('SelectedImageIcon');
        //$('#' + IMG_ICON_ID_PREIX + index).addClass('SelectedImageIcon');
        //currentIcon = index;

        /* 
        * Display the currently selected images' caption. 
        */
        //var newCaptionId = '#' + IMG_CAP_ID_PREIX + index;
        //var currentCaptionId = '#' + IMG_CAP_ID_PREIX + currentTextIndex;
        // Set the z-index of the current image's caption to a higher z-index to the new caption so it is on top for the transition.
        //$(currentCaptionId).css('z-index', 2);
        //$(newCaptionId).css('z-index', 1);
        // Reset the new captions opacity for IE
        //$(newCaptionId).css('filter', 'alpha(opacity=90)');
        // Fade in the new caption and fade out the old.
        //$(newCaptionId).fadeIn(transitionSpeed);
        //$(currentCaptionId).fadeOut(transitionSpeed, function() {
        //    currentTextIndex = index;
        //});

        /* 
        * Display the currently selected images. 
        */
        var newImageId = '#' + IMG_ID_PREIX + index;
        var currentImageId = '#' + IMG_ID_PREIX + currentBgIndex;
        // Set the z-index of the current image to a higher z-index to the new image so it is on top for the transition.
        //$(currentImageId).css('z-index', 2);
        //$(newImageId).css('z-index', 1);
        // Show the new image. This won't show immediately because it is behind the current image.
        //$(newImageId).show();
        // Fade out the current image so the new image shows from behind. Release the lock once the transition is finished so other images can be selected.
        //$(currentImageId).fadeOut(transitionSpeed, function() {
        //    currentBgIndex = index;
        //    canEnter = 1;
        //});
        
		if ($(newImageId).length == 0)
		{
	        var cacheImage = document.createElement('img');  // create the requested image
	        cacheImage.id = IMG_ID_PREIX + index;
	        cacheImage.setAttribute('class', 'Photo');
	        cacheImage.style.cssText = 'display:none;position: absolute;top: 0px;left: 0px; float: left;';
	        addListener(cacheImage, 'load', function(e) { TransitionImage(index); }, false);
	        $(currentImageId).after(cacheImage);
	        $('#loading').fadeIn(1200);// show();
	        cacheImage.src = imagesList[index-1];
	    }
	    else
		    TransitionImage(index);
    }
}

function ShowVideo() {
    $('#VideoGallery').children().fadeIn('slow');
    //$('#VideoGallery').css('filter', 'alpha(opacity=90)');
}

function HideVideo() {
    $('#VideoGallery').children().fadeOut('slow', function() {
        $('#VideoFrame').attr('src', videos[currentVideo]);
    });
}

function LoadVideo(videoId) {
    // Ensure the current video is not reloaded and a transition is not already in progress.
    if (currentVideo != videoId && canChangeVideo == 1) {

        // Consume the video lock
        canChangeVideo = 0;

        var videoFrame = 'VideoFrame';
        var contentId = 'VideoContent' + (videoId + 1);
        var icon = '#VideoIcon' + (videoId + 1);

        $('#VideoIcon' + currentVideoIcon).removeClass('SelectedVideoIcon');
        $(icon).addClass('SelectedVideoIcon');
        currentVideoIcon = videoId + 1;

        $('#VideoContent' + currentContentIndex).css('z-index', 2);
        $('#' + contentId).css('z-index', 1);
        $('#VideoContent' + currentContentIndex).fadeOut('slow', function() {
            $('#' + contentId).fadeIn('slow', function() {
                currentContentIndex = videoId + 1;
            });
        });

        $('#' + videoFrame).attr('src', videos[videoId][0]);
        $('#' + videoFrame).fadeOut('slow', function() {
            $('#' + videoFrame).attr('width', videos[videoId][1]);
            $('#' + videoFrame).attr('height', videos[videoId][2]);
            $('#' + videoFrame).css('margin-top', (mediaPanelHeights[mediaPanelVersion] - videos[videoId][2]) / 2);

            $('#' + videoFrame).fadeIn(1500, function() {
                currentVideo = videoId;
                canChangeVideo = 1;
            });
        });
    }
}

var shift = 0;

function ShiftLeft() {
    if (shift < maxShift) {
        $("#VideoFilmStrip").animate({ "left": "-=107px" }, "medium");
        shift++;
    }
}

function ShiftRight() {
    if (shift > 0) {
        $("#VideoFilmStrip").animate({ "left": "+=107px" }, "medium");
        shift--;
    }
}



function HideMap() {
    HideFeature(currentFeature);
    $('#PhotoGallery').fadeIn('slow');
    $('#Map').children().fadeOut('slow');
}

function ShowMap() {
    $('#Map').children().fadeIn('slow');
    $('#PhotoGallery').fadeOut('slow');
}


var filtersActive; // = [1, 1, 1, 1, 1];
var featureFilters; // = [[1, 2, 3, 4, 5, 1], [1, 2, 3, 4, 5, 1], [3, 2]]
var featuresActive; // = [[1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1], [1, 1]]
//var selectedClasses = ['selectedblue', 'selectedred', 'selectedgreen', 'selectedorange', 'selectednavy'];
var headerBgImages; // = [['blue/left_corner.png', 'blue/header_bg.png', 'blue/right_corner.png'], ['blue/left_corner.png', 'Red/header_bg.png', 'blue/right_corner.png'], ['blue/left_corner.png', 'Green/header_bg.png', 'blue/right_corner.png'], ['blue/left_corner.png', 'Orange/header_bg.png', 'blue/right_corner.png'], ['blue/left_corner.png', 'Navy/header_bg.png', 'blue/right_corner.png']];
//var bgImageLocation = '/style library/HIE/images/map/';
//var flagLocation; // = 'Images/Flags/'
var multiFlagLocation; // = flagLocation + 'yellow.png'
var flagImages; // = ['blue.png', 'green.png', 'navy.png', 'orange.png', 'red.png'];
var filterIdMapping;

var featurePanelHeight = 112;
var featurePanelWidth = 270;

var minimumWidth = 850;


function InitialiseMap() {
    //var filterValue = filter + 1;
    var currentNumber = 1;
    var singleFlag = -1;
    var itemTop;
    var itemLeft;

    for (var feature = 0; feature < featureFilters.length; feature++) {
        itemTop = parseInt($('#Flag' + (feature + 1)).css('top').replace("px", ""));
        itemLeft = parseInt($('#Flag' + (feature + 1)).css('left').replace("px", ""));

        $('#FlagInformation' + (feature + 1)).css('left', 20);

        if ((itemLeft + featurePanelWidth) >= minimumWidth)
            $('#FlagInformation' + (feature + 1)).css('left', (itemLeft - featurePanelWidth - 2) + 'px');

        if ((itemTop + featurePanelHeight) > mediaPanelHeights[mediaPanelVersion])
            $('#FlagInformation' + (feature + 1)).css('top', (itemTop - featurePanelHeight) + 'px')

        for (var featureItem = 0; featureItem < featureFilters[feature].length; featureItem++) {
            //if (filterValue == featureFilters[feature][featureItem]) {
            //    featuresActive[feature][featureItem] = 0;
            //    $('#Feature' + (feature + 1) + '_' + (featureItem + 1)).hide();
            //}
            if (featuresActive[feature][featureItem] != 0) {
                if (currentNumber == 1) {
                    singleFlag = featureFilters[feature][featureItem];
                    //alert(feature + ' ' + featureItem);
                    ToggleFeatureItem(feature + 1, featureItem + 1); //, featureFilters[feature][featureItem] - 1);
                }
                else {
                    if (singleFlag != featureFilters[feature][featureItem])
                        singleFlag = -1;
                }

                //alert(currentNumber);
                $('#Feature' + (feature + 1) + '_' + (featureItem + 1)).text(currentNumber);
                currentNumber++;
            }

            //flagValue += featuresActive[feature][featureItem];
        }

        if (currentNumber == 1)
            $('#Flag' + (feature + 1)).hide();
        else if (currentNumber == 2) // only 1 item is available
        {
            $('#FlagInformation' + (feature + 1) + ' .FeatureSection .MapItemSelector').hide();

            if (singleFlag >= 0)
                $('#Flag' + (feature + 1) + ' img').attr('src', flagImages[singleFlag]);
        }
        else if (currentNumber > 2) {
            if (singleFlag < 0)
                $('#Flag' + (feature + 1) + ' img').attr('src', multiFlagLocation);
            else
                $('#Flag' + (feature + 1) + ' img').attr('src', flagImages[singleFlag]);
        }

        currentNumber = 1;

        //if (flagValue == 0)
        //$('#Flag' + (feature + 1)).hide();
        //else if (flagValue == 1)
        //{
        // show single coloured flag
        //}
        //else
        //{
        // check if all the same colour or show yellow flag
        //}

        //flagValue = 0;
    }
}


function SetFilter(filter) {
    HideFeature(currentFeature);

    //var flagValue = 0;
    var filterValue = filter;
    var currentNumber = 1;
    var singleFlag = -1;

    if (filtersActive[filter] == 1) {
        filtersActive[filter] = 0;

        $('#Filterbox' + (filterValue + 1)).attr('src', '/style library/HIE/images/map/checkbox.png');

        for (var feature = 0; feature < featureFilters.length; feature++) {
            for (var featureItem = 0; featureItem < featureFilters[feature].length; featureItem++) {
                if (filterValue == featureFilters[feature][featureItem]) {
                    featuresActive[feature][featureItem] = 0;
                    $('#Feature' + (feature + 1) + '_' + (featureItem + 1)).hide();
                }
                if (featuresActive[feature][featureItem] != 0) {
                    if (currentNumber == 1) {
                        singleFlag = featureFilters[feature][featureItem];
                        //alert(feature + ' ' + featureItem);
                        ToggleFeatureItem(feature + 1, featureItem + 1); //, featureFilters[feature][featureItem] - 1);
                    }
                    else {
                        if (singleFlag != featureFilters[feature][featureItem])
                            singleFlag = -1;
                    }

                    //alert(currentNumber);
                    $('#Feature' + (feature + 1) + '_' + (featureItem + 1)).text(currentNumber);
                    currentNumber++;
                }

                //flagValue += featuresActive[feature][featureItem];
            }

            if (currentNumber == 1)
                $('#Flag' + (feature + 1)).hide();
            else if (currentNumber == 2) // only 1 item is available
            {
                $('#FlagInformation' + (feature + 1) + ' .FeatureSection .MapItemSelector').hide();

                if (singleFlag >= 0)
                    $('#Flag' + (feature + 1) + ' img').attr('src', flagImages[singleFlag]);
            }
            else if (currentNumber > 2) {
                if (singleFlag < 0)
                    $('#Flag' + (feature + 1) + ' img').attr('src', multiFlagLocation);
                else
                    $('#Flag' + (feature + 1) + ' img').attr('src', flagImages[singleFlag]);
            }

            currentNumber = 1;

            //if (flagValue == 0)
            //$('#Flag' + (feature + 1)).hide();
            //else if (flagValue == 1)
            //{
            // show single coloured flag
            //}
            //else
            //{
            // check if all the same colour or show yellow flag
            //}

            //flagValue = 0;
        }
    }
    else {
        filtersActive[filter] = 1;

        $('#Filterbox' + (filterValue + 1)).attr('src', '/style library/HIE/images/map/checkbox_checked.jpg');

        //		$(".FlagsContainer ." + filters[filter]).fadeIn('slow');
        for (var feature = 0; feature < featureFilters.length; feature++) {

            for (var featureItem = 0; featureItem < featureFilters[feature].length; featureItem++) {
                if (filterValue == featureFilters[feature][featureItem]) {
                    featuresActive[feature][featureItem] = 1;
                    $('#Feature' + (feature + 1) + '_' + (featureItem + 1)).show();
                }
                if (featuresActive[feature][featureItem] != 0) {
                    if (currentNumber == 1) {
                        singleFlag = featureFilters[feature][featureItem];
                        //alert(feature + ' ' + featureItem);
                        ToggleFeatureItem(feature + 1, featureItem + 1); //, featureFilters[feature][featureItem] - 1);
                    }
                    else {
                        if (singleFlag != featureFilters[feature][featureItem])
                            singleFlag = -1;
                    }


                    $('#Feature' + (feature + 1) + '_' + (featureItem + 1)).text(currentNumber);
                    currentNumber++;
                }
                //flagValue += featuresActive[feature][featureItem];
            }

            if (currentNumber > 1)
                $('#Flag' + (feature + 1)).show();

            if (currentNumber > 2) {
                if (singleFlag < 0)
                    $('#Flag' + (feature + 1) + ' img').attr('src', multiFlagLocation);
                else
                    $('#Flag' + (feature + 1) + ' img').attr('src', flagImages[singleFlag]);

                $('#FlagInformation' + (feature + 1) + ' .FeatureSection .MapItemSelector').show();
            }
            else if (currentNumber == 2) {
                if (singleFlag >= 0)
                    $('#Flag' + (feature + 1) + ' img').attr('src', flagImages[singleFlag]);
            }

            currentNumber = 1;

            //if (flagValue > 0)
            //{
            //alert('Feature ' + feature + ' should close.');
            //$('#Flag' + (feature + 1)).show();
            //}
            //else if (flagValue == 1)
            //{
            // show single coloured flag
            //}
            //else
            //{
            // check if all the same colour or show yellow flag
            //}

            //flagValue = 0;
        }
    }
}

function ToggleFeatureItem(flagItemIndex, featureItemIndex)//, classIndex)
{
    var classIndex = featureFilters[flagItemIndex - 1][featureItemIndex - 1];

    var endingId = flagItemIndex + '_' + featureItemIndex;
    var flagId = 'FlagInformation' + flagItemIndex;
    var headerId = 'FeatureHeader' + endingId;

    $('#' + flagId + ' .FeatureHeaderSection span').hide();
    $('#' + flagId + ' .FeatureSection img').hide();
    $('#' + flagId + ' .FeatureSection .FeatureHtml').hide();
    $('#' + flagId + ' .MapItemSelector a').removeClass();
    $('#' + flagId + ' .MapItemSelector a').css('background-image', 'none');

    $('#' + flagId + ' .FeatureHeaderSection').css('background-image', 'url("' + headerBgImages[classIndex][1] + '")');
    $('#' + flagId + ' #LeftCorner').attr('src', headerBgImages[classIndex][0]);
    $('#' + flagId + ' #RightCorner').attr('src', headerBgImages[classIndex][2]);
    $('#' + headerId).show();
    $('#FeatureImage' + endingId).show();
    $('#FeatureContent' + endingId).show();
    $('#Feature' + endingId).addClass('Selected');
    $('#Feature' + endingId).css('background-image', 'url("' + headerBgImages[classIndex][3] + '")');
}

function ShowFeature(featureId) {
    if (currentFeature > 0)
        $('#FlagInformation' + currentFeature).hide();

    currentFeature = featureId;
    $('#FlagInformation' + featureId).show();
}

function HideFeature(featureId) {
    $('#FlagInformation' + featureId).hide();
    currentFeature = 0;
}