function showChooseExperience() {
        $("#trip-planner-text").slideUp(600);
        $("#trip-planner-img").slideUp(600);
        $("#slideout").slideDown(700);
    }

    function hideChooseExperience() {
        $("#slideout").slideUp(700);
        $("#trip-planner-img").slideDown(600);
        $("#trip-planner-text").slideDown(600);
    }

    function addSelection(selectedId) {
        if (arrExperiences.length < 4) {
            arrExperiences.push(selectedId);
            $("#"+selectedId).parent().addClass('selected');
            addImage(selectedId); // show thumbnail image
        } else {
            // you already selected four options
        }
    }

    function removeSelection(selectedId, position) {
        arrExperiences.splice(position,1);
        $("#"+selectedId).parent().removeClass('selected');
        removeImage(selectedId); // remove thumbnail image
    }

    function addImage(selectedId) {
        var selData = getData(selectedId);
        if (selData !== false) {
            $("#slideout-thumbnails").append('<div id="thumb-' + selectedId + '"><img border="0" alt="" src="' + selData.thumb + '" alt="' + selData.title + '" /></div>');
        }
    }

    function removeImage(selectedId) {
        $("#thumb-" + selectedId).remove();
    }

    // this is the function that creates the slideout options using the content defined in data.js
    function loadSlideoutOptions() {        
        arrExperiencesIndex.sort();
        var numberOfColumns = 4;
        var optionsPerCoumn = Math.floor(arrExperiencesIndex.length / numberOfColumns);
        if ((arrExperiencesIndex.length % numberOfColumns) != 0) {
            optionsPerCoumn++;
        }
        $('li').eq(2);
        var addUl = true;
        var ulIndex = -1;
        var i=0;
        for (i=0;i<arrExperiencesIndex.length;i++) {
            //alert();
            if ((i % optionsPerCoumn) == 0) {
                addUl = true;
            }
            if (addUl) {
                $(".slideout-content").append('<ul></ul>');
                ulIndex++;
                addUl = false;
            }
            var optionData = getData(arrExperiencesIndex[i]);
            if (optionData) {
                $(".slideout-content ul").eq(ulIndex).append('<li><a id="' + optionData.code + '" href="#" title="' + optionData.title + '">' + optionData.title + '</a></li>');
            }
        }
    }

    function loadSelectedOptions() {
        var selection = getCookie('selectedExperiences');
        var arrExperiencesTemp = new Array();
        if ((selection != null) && (selection != "")) {
            arrExperiencesTemp = selection.split(',');
        }
        for (var i=0;i<arrExperiencesTemp.length;i++) {
            addSelection(arrExperiencesTemp[i]);
        }
        setSubmitButtonStatus();
    }

    // shows the details of the selected options. This is used in the page custom.html
    function showSelectedOptions() {
        var arrExperiencesTemp = new Array();

        var urlParams = getUrlParameters();
        var selection = urlParams.p; // the parameter p contains all the options that should be displayed in this page        
        if ((selection != null) && (selection != "")) {
            arrExperiencesTemp = selection.split(',');
        } else {
            selection = getCookie('selectedExperiences');
            if ((selection != null) && (selection != "")) {
                arrExperiencesTemp = selection.split(',');
            }
        }
        
        if (arrExperiencesTemp.length == 0) {
            window.location.href = 'index.html'; // redirect to the home page because there is nothing to show
        } else {
            var lastSeparator = '';
            for (var i=0;i<arrExperiencesTemp.length;i++) {
                if (i == (arrExperiencesTemp.length - 1)) {
                    lastSeparator = ' last'; // this is the CSS class that must be applied to the last separator
                }
                var optionData = getData(arrExperiencesTemp[i]);
                if (optionData) {                    
                    var optionBlock = '';
                    optionBlock += '<div class="page-block">';
                    optionBlock += '<div class="page-block-title"><a title="' + optionData.title + '" href="' + optionData.page + '">' + optionData.title + '</a></div>';
                    optionBlock += '<div class="page-block-image"><img alt="' + optionData.title + '" src="' + optionData.image + '" /></div>';
                    optionBlock += '<div class="page-block-headline">' + optionData.headline + '</div>';
                    optionBlock += '<div class="page-block-text">' + optionData.html + '</div>';
                    //optionBlock += '<div class="page-block-links"><a title="RSS" href="#"><img width="15" height="16" alt="RSS" src="images/rss-icon.gif"></a> <a title="RSS" href="#">RSS</a> <a title="View All" href="#">View All</a></div>';
                    optionBlock += '<div class="page-block-separator clear' + lastSeparator + '"></div>';
                    optionBlock += '</div>';
                    document.write(optionBlock)
                }
            }
        }
    }

    function createPageContent(page) {
        var optionData = getData(page);
        if (optionData) {
            var optionBlock = '';
            optionBlock += '<div class="page-block">';
            optionBlock += '<div class="page-block-title">' + optionData.title + '</div>';
            optionBlock += '<div class="page-block-image"><img alt="' + optionData.title + '" src="' + optionData.image + '" /></div>';
            optionBlock += '<div class="page-block-headline">' + optionData.headline + '</div>';
            optionBlock += '<div class="page-block-text">' + optionData.html + '</div>';
            //optionBlock += '<div class="page-block-links"><a title="RSS" href="#"><img width="15" height="16" alt="RSS" src="images/rss-icon.gif"></a> <a title="RSS" href="#">RSS</a> <a title="View All" href="#">View All</a></div>';
            optionBlock += '<div class="page-block-separator clear last"></div>';
            optionBlock += '</div>';
            document.write(optionBlock)
        }
    }

    // shows the slider with the selected pages. The pages must match the keys in the data.js file
    // slidePages is a string with comma delimited values. Ex: animals,shows,events
    // it should have 3 pages in the slidePages parameter
    function createSlide(elementId, slidePages) {
        var arrExperiencesTemp = new Array();
        var slideContent = '';
        
        if ((slidePages != null) && (slidePages != "")) {
            arrExperiencesTemp = slidePages.split(',');
        }

        if (arrExperiencesTemp.length > 0) {
            slideContent += createSlideBlock(arrExperiencesTemp[0]);
            slideContent += '<div class="slide-separator"></div>';
            slideContent += createSlideBlock(arrExperiencesTemp[1]);
            slideContent += '<div class="slide-separator"></div>';
            slideContent += createSlideBlock(arrExperiencesTemp[2]);           
        }
        $("#"+elementId).prepend(slideContent);
    }

    // this function creates one block for the slider
    function createSlideBlock(page) {
        var optionBlock = '';
        var optionData = getData(page);
        if (optionData) {
            optionBlock += '<div class="slide-block">';
            optionBlock += '<a href="' + optionData.code + '.html" title="' + optionData.headline + '"><img class="thumbnail" src="' + optionData.thumb + '" width="87" height="87" alt="' + optionData.headline + '" border="0"/></a>';
            optionBlock += '<div class="title"><a href="' + optionData.page + '" title="' + optionData.headline + '">' + optionData.headline + '</a></div>';
            optionBlock += '<div class="text">' + optionData.shortHtml + '</div>';
            optionBlock += '<div class="more"><a href="' + optionData.code + '.html" title="More"><img src="images/slider-more.png" width="45" height="9" alt="More" border="0" /></a></div>';
            optionBlock += '</div>';
        }
        return optionBlock;
    }

    function getData(selectedId) {
        for (var i=0;i<arrExperiencesData.length;i++) {
            if (arrExperiencesData[i].code == selectedId) {
                return arrExperiencesData[i];
            }
        }
        return false;
    }

    function setSubmitButtonStatus() {
        if (arrExperiences.length > 0) {
            $("#submit-button").addClass('active');
        } else {
            $("#submit-button").removeClass('active');
        }
    }

    function setCookie(c_name,value,expiredays) {
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie=c_name+ "=" +escape(value)+
        ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
    }

    function getCookie(c_name)
    {
        if (document.cookie.length>0) {
            c_start=document.cookie.indexOf(c_name + "=");
            if (c_start!=-1) {
                c_start=c_start + c_name.length+1;
                c_end=document.cookie.indexOf(";",c_start);
                if (c_end==-1) {
                    c_end=document.cookie.length;
                }
                return unescape(document.cookie.substring(c_start,c_end));
            }
        }
        return "";
    }

    function getUrlParameters() {
        var map = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            map[key] = value;
        });
        return map;
    }