Cacher is the code snippet organizer for pro developers

function init_visited_attractions(){
    /*
    Visited Attractions.
    Displays the destinations that the current User has visited on the map.
    If the user has completed the map and chose to `restart` the visited
    attractions feature will stay populated with all the attractions on the
    map while the user continues to log activity.
    Displays each `screen` as three seperate photos/locations/attractions.
    See Redmine ticket #4449 for more information.
    */

    var photo_objects = new Array();
        photo_index_left = 0;
        photo_index_right = 3;

    (function(){
        /*
        Make a server request that gets all the JSON data
        regarding the users visited locations.
        This appends a new `photo object` to `photo_objects` 
        for every object returned from the controller.
        */
        $j.ajax({
            type: "GET",
            url: "user_destinations",
            success: function(data){
               for(var i = 0; i < data.length; i++){
                   var photo = JSON.parse(data[i].photos[0]);
                       photo_obj = {};
                   photo_obj.description = data[i].content;
                   photo_obj.photo_path = extract_image_path(photo.photo.current_file_path);
                   photo_obj.href = "/maps/" + data[i].map_id + "/destinations/" + data[i].id;
                   photo_obj.caption = data[i].name;
                   photo_objects.push(photo_obj);
               }
               photo_index_left = determine_left_index(photo_objects.length);
               photo_index_right = photo_index_left + 3;
               build_locations_visited(photo_index_left, photo_index_right);
            },
            failure: function(data){
                console.log("failure to reach app.controllers.destinations_controller.get_visited_destinations");
            }
        });
    })();
    
    function determine_left_index(len){
        /*
        If the number of locations doesn't divide equally
        into three perform a function on that number that
        will determine the index we should point to.
        Example:
            len = 20        // twenty photo objects
            len % 3 === 0    // returns false, 20 does not divide equally into 3
            len/3           // returns 6.666...
            (len/3)|0       // returns 6 which says we have six screens of three photos
            (((len/3)|0)*3) // returns 18 which says we should point our left index
                            // at 18 and the visited locations will display the photos
                            // at index 18 and 19.
        */
        if (len % 3 === 0){
            return photo_objects.length - 3;
        } else {
            return (((len/3)|0)*3); 
        }
    }

    function clear_selection() {
        /* 
        I use this to ensure the `next` and `prev` buttons don't
        stay highlighted when clicking quickly.
        */
        if(document.selection && document.selection.empty){
            document.selection.empty();
        } else if (window.getSelection){
            var sel = window.getSelection();
            sel.removeAllRanges();
        }
    }

    function locations_next(){
        /* 
        When user presses next determine if there are any objects
        left in `photo_objects` in that direction.
        Also, determine whether or not to hide or show the next 
        button.
        */
        clear_selection();
        if ((photo_index_right + 3) <= photo_objects.length ||
            (photo_index_right + 2) <= photo_objects.length ||
            (photo_index_right + 1) <= photo_objects.length) {
            photo_index_left += 3;
            photo_index_right += 3;
            build_locations_visited(photo_index_left, photo_index_right);
        }
        if (photo_index_right >= photo_objects.length){
            $j(".visited_locations_next").css("visibility", "hidden");
        } else {
            $j(".visited_locations_next").css("visibility", "visible");
        }
        if (photo_index_left > 0){
            $j(".visited_locations_prev").css("visibility", "visible");
        }
    }
 
    // "next page" button 
    $j(".visited_locations_next").live("click", locations_next);

    function locations_prev(){
        /* 
        When user presses prev determine if there are any objects in 
        that direction left in `photo_objects`. 
        Also, determine whether or not to hide or show the prev 
        button.
        */
        clear_selection();
        if (photo_index_left > 0){
            photo_index_left -= 3;
            photo_index_right -= 3;
            build_locations_visited(photo_index_left, photo_index_right);
        } 
        if (photo_index_left <= 0){
            $j(".visited_locations_prev").css("visibility", "hidden");
        } else {
            $j(".visited_locations_prev").css("visibility", "visible");
        }
        if (photo_index_left < photo_objects.length){
            $j(".visited_locations_next").css("visibility","visible");
        }
    }

    // "previous page" button
    $j(".visited_locations_prev").live("click", locations_prev);

    function extract_image_path(current_file_path){
        return current_file_path.substring(current_file_path.indexOf("system") - 1);
    }

    function build_locations_visited(pil, pir){
        $j("#img_container").html("");
        if ($j(".visited_locations_header").length > 0){
            $j(".visited_locations_header").remove();
        }
        /*
        This gets passed two params:
        photo_index_left and photo_index_right, these
        are used to determine which photos in 
        `photo_objects` should be built.
        */
        for(var i = pil; i < pir; i++){
            /* 
            Build the attraction element 
            along with its description and 
            caption. 
            */
            if (i <= photo_objects.length - 1){
                var img = document.createElement("img");
                    container = document.createElement("a");
                    description = document.createElement("div");
                    caption = document.createElement("div");
                    pointer = document.createElement("div");
                    desc_text = photo_objects[i].description.toString().replace("<p>", "<p style='width: 300px; word-wrap: break-all; white-space: normal; font-weight: normal;'>");
                $j(img).attr("src", photo_objects[i].photo_path);
                $j(img).attr("class", "visited_location_img");
                $j(container).attr("class", "visited_location_container");
                $j(container).attr("href", photo_objects[i].href);
                $j(caption).attr("class", "visited_location_img_caption");
                $j(caption).html(photo_objects[i].caption);
                $j(description).attr("class", "location_description");
                $j(description).html(desc_text);
                $j(pointer).attr("class", "location_desc_pointer");
                $j(container).html($j(img).add($j(description).add($j(pointer))));
                $j(caption).appendTo($j(container));
                $j(container).appendTo($j("#img_container"));
            }
        }
        /*
        This builds the Header, Previous and Next buttons
        while applying their respective attributes.
        */
        var header = document.createElement("div");
            prev = document.createElement("div");
            next = document.createElement("div");
        $j(header).html("Attractions Visited");
        $j(header).attr("class", "visited_locations_header");
        $j("#img_container").before($j(header));
        $j(next).html(">");
        $j(next).attr("class", "visited_locations_next");
        $j(next).attr("style", "visibility: hidden;");
        $j(next).attr("onclick", "locations_next();");
        $j(next).appendTo($j("#img_container"));
        prev.appendChild(document.createTextNode("<"));
        $j(prev).attr("class", "visited_locations_prev");
        if(photo_objects.length <= 3){
            $j(prev).attr("style", "visibility: hidden;");
        }
        $j(prev).prependTo($j("#img_container"));
    }
  
    $j(".visited_location_container").live("click", function(e){
        /*
        When clicking each image a colorbox will pop open
        with information regrading the location, with more images and descriptions.
        */
        e.preventDefault();
        var this_href = this.href; 
        $j.fn.colorbox({
            href: this_href,
            open: true,
            width: 550,
            scrolling: false,
        });
  });
 
}