//Utility functions for map info window
function mapit(latlontitle) {
    lat = parseFloat(latlontitle.split(',')[0]);
    lon = parseFloat(latlontitle.split(',')[1]);
    title= latlontitle.split(',')[2];
    centerCoord = new google.maps.LatLng(lat, lon);
    var mapitinit;
    if (mapitinit == true) {
        mapPanTo();
    } else {
        mapInit();
    }
    
    function mapInit()  {
        var mapOptions = {
            zoom: 8,
            center: centerCoord,
            disableDefaultUI: true,
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
        };
        map = new google.maps.Map(document.getElementById("map-wrapper"), mapOptions);
        var marker = new google.maps.Marker({
            position: centerCoord, 
            map: map, 
            title: title
        });   
        mapitinit = true;
    }
    function mapPanTo(){
        var marker = new google.maps.Marker({
            position: centerCoord, 
            map: map, 
            title: title
        });  
        map.panTo(centerCoord);
    }
}  

// utility functions to create/remove map container
function create_map(obj) {
    //create container divs
    $(obj).parent().parent().parent().append('<div id="map-container">');
    $('#map-container').append('<div id="map-wrapper">');
    //deal with the variable height of div.legend
    $('#map-container').css({
      bottom: function(index, value) {
        return parseFloat($(obj).parent().parent().height())-2;
      }
     });
    
    mapit(obj.title);
}
function remove_map() {
    $('#map-container').remove();
}
// utility functions to create/remove camera info container
function get_exif(obj,id) {
    $(obj).parents().eq(2).append('<div id="exif-container">');
    $(obj).parents().eq(2).children('.meta').clone().appendTo('#exif-container').css('display', 'block');
    //deal with the variable height of div.legend
    $('#exif-container').css({
        bottom: function(index, value) {
            return parseFloat($(obj).parent().parent().height())-14;
        }
     });
}
function remove_exif() {
    $("#exif-container").remove();
}


//
$(document).ready(function(){ 
    
    
    //Add navigation
    $('#breadcrumbs').after('<div id="slideshow-controls"><ul><li><a id="prev" title="you can also use the arrow keys to navigate" href="#"> &larr; Older</a></li><li><a id="play" title="Pause Slideshow" href="#">▐▐</a></li><li><a id="next" title="you can also use the arrow keys to navigate" href="#">Newer &rarr;</a></li></ul></div>');
    
    
    //activate pause button
    //state var
    var show_state = 'playing';
    $('#play').click(function() {
        if (show_state == 'playing') {
            $('#slides').cycle('pause');
            $(this).html('▶');
            $(this).attr('title','Play slideshow');
            show_state = 'paused';
        } else {
            $('#slides').cycle('resume', true);
            $(this).html('▐▐');
            $(this).attr('title','Pause slideshow');
            show_state= 'playing';
        }
        return false;
    });



    //set up click events for map button
    $('.map-link').click( function() {
        if ($("#exif-container").is(":visible")){
                remove_exif();
        }
        if ($('#map-container').is(":visible")) {
            remove_map();  
        } else {
            create_map(this);
        }
        return false;
    
    });
    
    //set up click events camera info button
    $('.exif-link').click( function() {
        if ($('#map-container').is(":visible")){
            remove_map();
        }
        if ($('#exif-container').is(":visible")) {
            remove_exif();
        } else {
            get_exif(this);
        }
        return false;
    });

    
    // create and hide nav buttons (needed for keyboard shortcuts
    $('#slides').append('<div class="slidenav"><a id="prev">< Prev&nbsp;</a><a id="next">&nbsp;Next ></a></div>');
    $('.slidenav').css("display","none");
    
    var is_permalink = false;
    //find out if we should display a specific slide
    var index = 0, hash = window.location.hash;
    if (hash) {
        index = /\d+/.exec(hash)[0];
        index = (parseInt(index) || 1) - 1; // slides are zero-based
        //if this is a permalink, then don't autoplay:
        is_permalink = true;
    }
    // initialize the cycle slideshow
    $('#slides .bigimg').wrapAll('<div class="bigimgs">').parents('#slides').append('<ul class="menu" id="feature_gallery_pager">').cycle({ 
        fx: 'fade',
        startingSlide: index,
        prev: $(this).find('#prev'),
        next: $(this).find('#next'),
        before:  onBefore,
        after: onAfter,
        slideExpr: '.bigimg', 
        pager:      '#feature_gallery_pager', 
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="'+slide.id+'" class="thumb"><span></span></a></li>';  
        }
    });
    
    //if this is a permalink, then pause:
    if(is_permalink == true) {
        $('#play').click()
    }
    //callback to delete map and camera info windows if they exist
    function onBefore() { 
        $('#map-container').remove(); 
        $('#exif-container').remove(); 
    } 
    
    //callback to change url for permalinks and scroll jcarousel
    function onAfter(curr,next,opts) { 
        if (opts.currSlide % 10 == 0) {
            if (opts.currSlide != 0) {
                $('#slides').trigger('image-loaded',[opts.currSlide+1]);
            } else {
                $('#slides').trigger('image-loaded',[1]);
            }
        }  
        window.location.hash = 'image'+(opts.currSlide + 1);
    } 
    
    //callback for jcarousel
    function initCallbackFunction(carousel) {
        // bind "image-loaded" event to the #slides container (trigger in onAfter function)
        $('#slides').bind('image-loaded', function(event, num) {
            // scroll carousel
            carousel.scroll(num);
            return false;
        });
    };
    
    //initialize the jcarousel plugin
    $(function() {
        $('#feature_gallery_pager').jcarousel({
            scroll:10,
            initCallback: initCallbackFunction
        });
    });
    
    //enable keyboard shortcuts:
    $(document.documentElement).keyup(function(event) {
        var direction = null;
        if (event.keyCode == 37) {
            direction = 'prev';
        } else if (event.keyCode == 39) {
            direction = 'next';
        }
        if (direction != null) {
            $('#slides').each(function(index) {
                $('#prev,#next', this)[direction]().click();
            });
        }
    });
    
     
  
});