/* $Id: f360_player-v3.js 552 2010-07-16 15:55:41Z dviner $ */
var F360 = window.F360 || {};
F360.player = false;
F360.funcs = {};
F360.btns = {};
F360.btns.tees = [];
F360.btns.callbacks = {};
F360.btns.callbacks.tees = [];
F360.btns.callbacks.greens = [];
F360.btns.callbacks.markers = [];

F360.funcs.augmentation = {};
F360.funcs.augmentation.root_id = false;
F360.funcs.augmentation.nodes = {};

F360.last_seen_tee = false;
F360.last_seen_tee_idx = false;
F360.hole_image_idx = false;
F360.hole_images_results = false;
F360.hole_image_idx = 0;

F360.funcs.autoplay = {};
F360.funcs.autoplay.timer_id = false;
F360.funcs.autoplay.delay = 5000;


F360.funcs.set_gui = function ()
{
    F360.funcs.set_gui_btns();
    F360.funcs.set_gui_callbacks();
};

F360.funcs.set_gui_callbacks = function ()
{
    // setup callbacks for the augmented images
    F360.player.onGeoNodeMouseClick = function(e)
    {
        console.log('got a geonode mouse click');
        if (F360.funcs.augmentation.nodes.backarrow && 
            e.id == F360.funcs.augmentation.nodes.backarrow)
        {
            F360.btns.callbacks.backarrow();
            return;
        }
        
        
        if (F360.funcs.augmentation.nodes.forwardarrow && 
            e.id == F360.funcs.augmentation.nodes.forwardarrow)
        {
            F360.btns.callbacks.forwardarrow();
            return;
        }
        
    };

    // setup callbacks for the static buttons
    F360.player.onScreenNodeMouseClick = function(e)
    {
        console.log('Got a click on screen node: ' + e.id);
        
        // first look for the tee clicks
        for (var i = 0; i < F360.btns.tees.length; i++)
        {
            if (e.id == F360.btns.tees[i])
            {
                console.log('got click on tee ' + i);
                F360.btns.callbacks.tees[e.id].call(null);
                return;
            }
        }

        // second, look for the green clicks
        for (var i = 0; i < F360.btns.greens.length; i++)
        {
            if (e.id == F360.btns.greens[i])
            {
                console.log('got click on green ' + i);
                F360.btns.callbacks.greens[e.id].call(null);
                return;
            }
        }

        // third, look for the marker clicks.
        for (var i = 0; i < F360.btns.markers.length; i++)
        {
            if (e.id == F360.btns.markers[i])
            {
                console.log('got click on marker ' + i);
                F360.btns.callbacks.markers[e.id].call(null);
                return;
            }
        }
        
        // big switch statement:
        switch(e.id)
        {
            case F360.btns.wmk:
                F360.btns.callbacks.wmk();
                break;
            case F360.btns.zoom_in:
                F360.btns.callbacks.zoom_in();
                break;
            case F360.btns.zoom_out:
                F360.btns.callbacks.zoom_out();
                break;
            case F360.btns.pan_right:
                F360.btns.callbacks.pan_right();
                break;
            case F360.btns.pan_left:
                F360.btns.callbacks.pan_left();
                break;
            case F360.btns.pan_up:
                F360.btns.callbacks.pan_up();
                break;
            case F360.btns.pan_down:
                F360.btns.callbacks.pan_down();
                break;
            case F360.btns.instructions:
                F360.btns.callbacks.instructions();
                break;
            case F360.btns.autoplay:
                F360.btns.callbacks.autoplay();
            default:
                console.log('no standard callback for id ' + e.id);
        }
    };
};

F360.funcs.remove_old_node = function (id)
{
    console.log('got node to remove: ' + id);
    if (id > 0)
    {
        F360.player.removeScreenNode(id);
    }
};

F360.funcs.set_gui_btns = function ()
{
    var tmp, tmp2;
    
    // the background of the circle for panning
    console.log('Loading background circle');
    F360.funcs.remove_old_node(F360.btns.nav_bg);
    F360.btns.nav_bg = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.nav_bg, 'x', 21);
    F360.player.setScreenNodeProperty(F360.btns.nav_bg, 'y', 20);
    tmp = '/images/f360_skin_2/pan-circle.png';
    F360.player.setScreenNodeProperty(F360.btns.nav_bg, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.nav_bg, 
        'materialHoverUrl', tmp);
    
    // the pan up image
    F360.funcs.remove_old_node(F360.btns.pan_up);
    F360.btns.pan_up = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.pan_up, 'useHandCursor', true);
    F360.player.setScreenNodeProperty(F360.btns.pan_up, 'x', 47);
    F360.player.setScreenNodeProperty(F360.btns.pan_up, 'y', 29);
    tmp = '/images/f360_skin_2/pan-up-off.png';
    tmp2 = '/images/f360_skin_2/pan-up-on.png';
    F360.player.setScreenNodeProperty(F360.btns.pan_up, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.pan_up, 
        'materialHoverUrl', tmp2);
    F360.btns.callbacks.pan_up = function () { return F360.add_pitch(); };

    // the pan down image
    F360.funcs.remove_old_node(F360.btns.pan_down);
    F360.btns.pan_down = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.pan_down, 'useHandCursor', true);
    F360.player.setScreenNodeProperty(F360.btns.pan_down, 'x', 47);
    F360.player.setScreenNodeProperty(F360.btns.pan_down, 'y', 69);
    tmp = '/images/f360_skin_2/pan-down-off.png';
    tmp2 = '/images/f360_skin_2/pan-down-on.png';
    F360.player.setScreenNodeProperty(F360.btns.pan_down, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.pan_down, 
        'materialHoverUrl', tmp2);
    F360.btns.callbacks.pan_down = function () { return F360.lower_pitch(); };
    
    // the pan left image
    F360.funcs.remove_old_node(F360.btns.pan_left);
    F360.btns.pan_left = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.pan_left, 'useHandCursor', true);
    F360.player.setScreenNodeProperty(F360.btns.pan_left, 'x', 30);
    F360.player.setScreenNodeProperty(F360.btns.pan_left, 'y', 46);
    tmp = '/images/f360_skin_2/pan-left-off.png';
    tmp2 = '/images/f360_skin_2/pan-left-on.png';
    F360.player.setScreenNodeProperty(F360.btns.pan_left, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.pan_left, 
        'materialHoverUrl', tmp2);
    F360.btns.callbacks.pan_left = function () { return F360.lower_yaw(); };
    
    // the pan right image
    F360.funcs.remove_old_node(F360.btns.pan_right);
    F360.btns.pan_right = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.pan_right, 'useHandCursor', true);
    F360.player.setScreenNodeProperty(F360.btns.pan_right, 'x', 70);
    F360.player.setScreenNodeProperty(F360.btns.pan_right, 'y', 46);
    tmp = '/images/f360_skin_2/pan-right-off.png';
    tmp2 = '/images/f360_skin_2/pan-right-on.png';
    F360.player.setScreenNodeProperty(F360.btns.pan_right, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.pan_right, 
        'materialHoverUrl', tmp2);
    F360.btns.callbacks.pan_right = function () { return F360.add_yaw(); };


    // the zoom in button
    F360.funcs.remove_old_node(F360.btns.zoom_in);
    F360.btns.zoom_in = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.zoom_in, 'useHandCursor', true);
    F360.player.setScreenNodeProperty(F360.btns.zoom_in, 'x', 23);
    F360.player.setScreenNodeProperty(F360.btns.zoom_in, 'y', 89);
    tmp = '/images/f360_skin_2/zoom-in-off.png';
    tmp2 = '/images/f360_skin_2/zoom-in-on.png';
    F360.player.setScreenNodeProperty(F360.btns.zoom_in, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.zoom_in, 
        'materialHoverUrl', tmp2);
    F360.btns.callbacks.zoom_in = function () { return F360.zoom_in(); };
    
    // the zoom out button
    F360.funcs.remove_old_node(F360.btns.zoom_out);
    F360.btns.zoom_out = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.zoom_out, 'useHandCursor', true);
    F360.player.setScreenNodeProperty(F360.btns.zoom_out, 'x', 58);
    F360.player.setScreenNodeProperty(F360.btns.zoom_out, 'y', 89);
    tmp = '/images/f360_skin_2/zoom-out-off.png';
    tmp2 = '/images/f360_skin_2/zoom-out-on.png';
    F360.player.setScreenNodeProperty(F360.btns.zoom_out, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.zoom_out, 
        'materialHoverUrl', tmp2);
    F360.btns.callbacks.zoom_out = function () { return F360.zoom_out(); };
    
    // the instructions icon
    F360.funcs.remove_old_node(F360.btns.instructions);
    F360.btns.instructions = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.instructions, 'useHandCursor', true);
    /* with full screen image
    F360.player.setScreenNodeProperty(F360.btns.instructions, 'x', 375);
    F360.player.setScreenNodeProperty(F360.btns.instructions, 'y', 7);
    */
    F360.player.setScreenNodeProperty(F360.btns.instructions, 'x', 405);
    F360.player.setScreenNodeProperty(F360.btns.instructions, 'y', 7);
    tmp = '/images/f360_skin_2/instructions-button-off.png';
    tmp2 = '/images/f360_skin_2/instructions-button-on.png';
    F360.player.setScreenNodeProperty(F360.btns.instructions, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.instructions, 
        'materialHoverUrl', tmp2);
    F360.btns.callbacks.instructions = function () {
        // show help image
        F360.btns.instructions_on = F360.player.addScreenNode(imNodeType.ScreenImage);
        F360.player.setScreenNodeProperty(F360.btns.instructions_on, 'useHandCursor', true);
        F360.player.setScreenNodeProperty(F360.btns.instructions_on, 'x', 0);
        F360.player.setScreenNodeProperty(F360.btns.instructions_on, 'y', 0);
        tmp = '/images/f360_skin_2/instructions.png';
        F360.player.setScreenNodeProperty(F360.btns.instructions_on, 
            'materialNormalUrl', tmp);
            
        // any clicks are hide help image
        F360.player.onScreenNodeMouseClick = function(e)
        {
            F360.player.removeScreenNode(F360.btns.instructions_on);
            F360.funcs.set_gui_callbacks();
        };
    };
    
    // the fast play button
    if (F360.funcs.autoplay.timer_id !== false)
    {
        F360.funcs.autoplay.display_mgr(false);
    }
    else
    {
        F360.funcs.autoplay.display_mgr(true);
    }
    
    // the full screen button
    /*
    F360.funcs.remove_old_node(F360.btns.fullscreen);
    F360.btns.fullscreen = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.fullscreen, 'useHandCursor', true);
    F360.player.setScreenNodeProperty(F360.btns.fullscreen, 'x', 510);
    F360.player.setScreenNodeProperty(F360.btns.fullscreen, 'y', 6);
    tmp = '/images/f360_skin_2/maximize-off.png';
    tmp2 = '/images/f360_skin_2/maximize-on.png';
    F360.player.setScreenNodeProperty(F360.btns.fullscreen, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.fullscreen, 
        'materialHoverUrl', tmp2);
    */
    
    // the main Tees/Green panel at bottom
    F360.funcs.remove_old_node(F360.btns.panel);
    F360.btns.panel = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.panel, 'x', 145);
    F360.player.setScreenNodeProperty(F360.btns.panel, 'y', 290);
    tmp = '/images/f360_skin_2/navigation-back.png';
    tmp2 = tmp;
    F360.player.setScreenNodeProperty(F360.btns.panel, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.panel, 
        'materialHoverUrl', tmp2);
        
    // the F360 watermark
    F360.funcs.remove_old_node(F360.btns.wmk);
    F360.btns.wmk = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.wmk, 'useHandCursor', true);
    F360.player.setScreenNodeProperty(F360.btns.wmk, 'x', 429);
    F360.player.setScreenNodeProperty(F360.btns.wmk, 'y', 295);
    tmp = '/images/f360_skin_2/powered.png';
    tmp2 = tmp;
    F360.player.setScreenNodeProperty(F360.btns.wmk, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.wmk, 
        'materialHoverUrl', tmp2);
    F360.btns.callbacks.wmk = function () {
        window.open('http://www.fairways360.com', 'f360win');
        return false;
    };
    
    
    // the yardage box
    F360.btns.yardage_dist = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.yardage_dist, 'x', 13);
    F360.player.setScreenNodeProperty(F360.btns.yardage_dist, 'y', 291);
    tmp = '/images/f360_skin_2/yards-to-pin-box.png';
    F360.player.setScreenNodeProperty(F360.btns.yardage_dist, 
        'materialNormalUrl', tmp);
};

/* ZOOM CONTROLS */
F360.zoom_in = function () 
{
    var fov;

    fov = parseInt(F360.player.getCameraProperty('fov'), 10);
    console.log('fov currently is: ' + fov);
    fov -= 10;
    F360.player.setCameraProperty('fov', fov);
    console.log('zoomed in fov is ' + fov);
};


F360.zoom_out = function () 
{
    var fov;

    fov = parseInt(F360.player.getCameraProperty('fov'), 10);
    console.log('fov currently is: ' + fov);
    fov += 10;
    F360.player.setCameraProperty('fov', fov);
    console.log('zoomed out fov is ' + fov);
};
/* END ZOOM CONTROLS */

/* PAN/YAW CONTROLS */

/* Yaw is left/right.  Increasing yaw is looking right.  */
F360.add_yaw = function () {
    var yaw;
    yaw = parseInt(F360.player.getCameraProperty('yaw'), 10);
    console.log('Current yaw is: ' + yaw);
    yaw += 10;
    if (yaw > 360) { yaw -= 360; }
    console.log('Resetting yaw to: ' + yaw)
    F360.player.setCameraProperty('yaw', yaw);
};

F360.lower_yaw = function () {
    var yaw;
    yaw = parseInt(F360.player.getCameraProperty('yaw'), 10);
    console.log('Current yaw is: ' + yaw);
    yaw -= 10;
    if (yaw > 360) { yaw -= 360; }
    if (yaw < 0) { yaw += 360; }
    console.log('Resetting yaw to: ' + yaw)
    F360.player.setCameraProperty('yaw', yaw);
};
/* END PAN/YAW CONTROLS */

/* PITCH/UP-DOWN CONTROLS */
/*
increasing pitch "looks" up
decreasing pitch "looks" down
*/
F360.add_pitch = function () {
    var pitch, p2;
    pitch = parseInt(F360.player.getCameraProperty('pitch'), 10);
    
    console.log('pitch currently is: ' + pitch);
    pitch += 10; 
    console.log('raw new pitch calculated: ' + pitch);
    
    if ((pitch > 90) || (pitch < -90))
    {
        console.warn('pitch is too great. ' + pitch);
        return false;
    }

    console.log('pitch will be: ' + pitch);
    F360.player.setCameraProperty('pitch', pitch);
};

F360.lower_pitch = function () {
    var pitch, p2;
    var pitch, p2;
    pitch = parseInt(F360.player.getCameraProperty('pitch'), 10);
    
    console.log('pitch currently is: ' + pitch);
    pitch -= 10; 
    console.log('raw new pitch calculated: ' + pitch);
    
    if ((pitch > 90) || (pitch < -90))
    {
        console.warn('pitch is too great. ' + pitch);
        return false;
    }

    console.log('pitch will be: ' + pitch);
    F360.player.setCameraProperty('pitch', pitch);
};
/* END PITCH/UP-DOWN CONTROLS */


/* F360 IMAGE LOADING */
F360.start = function (course, hole)
{
    base_domain = location.host;
    F360.fetch_hole_img_info('http://' + base_domain 
        + '/svc/holeimages.php/v1/' + course + '/' + hole + '?mversion=2&gversion=2');

};

F360.fetch_hole_img_info = function (url) {
    console.log('getting hole images from [' + url + ']');
    jQuery.ajax({
        "url": url,
        "dataType": "json",
        "error": function (xhr, text_status, err) {
            alert('Problem fetching url: [' + url + "]\ntext: " + text_status + "\nerr: " + err);
            return;
        },
        "success": function (obj, text_status) {
            if (obj.is_error == true)
            {
                console.log('PROBLEM getting the data from [' + url + ']' + obj.errmsg);
                alert("ERROR\n" + obj.errmsg);
            }
            else
            {
                F360.hole_image_idx = 1;
                console.log('GOT: ' + obj.results + ' images');
                if (obj.results.hole_images.length <= 0)
                {
                    //alert('No images!');
                    return false;
                }
                F360.hole_images_results = obj.results;
                // load in the green & tee information
                F360.load_tee_green_mkr();
                // show the first image
                F360.funcs.change_image(F360.hole_image_idx);
            }
        }
    });
};

F360.funcs.change_image = function (idx) {
    var rv;
    console.log('[change_image] load image at index: ' + idx);
    rv = F360.funcs.load_hole_img(idx);
    return false;
};

F360.funcs.change_image_forward = function (idx) {
    var rv;
    next_idx = idx;
    is_tee = F360.funcs.is_tee_image(next_idx);
    if (is_tee == true)
    {
        // we need to move forward to the next image that isn't a tee
        next_is_tee = true;
        while (next_is_tee == true)
        {
            console.log('next image [' + next_idx + '] is a tee image.. try next');
            next_idx++;
            next_is_tee = F360.funcs.is_tee_image(next_idx);
        }
    }
    return F360.funcs.load_hole_img(next_idx);

    //rv = F360.funcs.load_hole_img(idx);
    //return false;
};

F360.funcs.is_tee_image = function (idx_to_check)
{
    for (i = 0; i < F360.hole_images_results.hole.tees.length; i++)
    {
        idx = F360.hole_images_results.hole.tees[i].image_idx;
        if (idx == idx_to_check)
        {
            return true;
        }
    }
    return false;
};

F360.funcs.load_hole_img = function (idx) {
    var cur_img, num_imgs, yds_to_pin, pin, yd_img, on_tee, tee_to_pin, 
        dist_to_tee;
    
    console.log('[load_hole_img] looking to load image at index [' + idx + ']');
    on_tee = 0;
    dist_to_tee = null;
    
    // check to see if the index if beyond what we have
    num_imgs = F360.hole_images_results.hole_images.length;
    
    if ((idx >= num_imgs) || (idx < 0))
    {
        console.warn('Problem showing image from index [' + idx +'].  Only have [' + num_imgs + '] images from the hole');
        return false;
    }
    
    // this should be by "display_order"...
    cur_img = F360.hole_images_results.hole_images[idx].image_url;
    yds_to_pin = F360.hole_images_results.hole_images[idx].dist_to_pin;
    pin = F360.hole_images_results.hole_images[idx].pin_position;
    lat = F360.hole_images_results.hole_images[idx].latitude;
    lon = F360.hole_images_results.hole_images[idx].longitude;

    // we reset the global variable here 
    // since we need it for calculating the callbacks on the arrows.
    F360.hole_image_idx = idx;
    
    // set the lat/lon of the player
    console.log('[load_hole_img] setting image lat [' + lat + '] lon [' + lon + ']');

    F360.display_img(cur_img);

    // check to see if this is a TEE image.  If so, we need to 
    // reset F360.last_seen_tee to this color.
    console.log('[load_hole_img] Are we on a tee image?');
    for (i = 0; i < F360.hole_images_results.hole.tees.length; i++)
    {
        if (F360.hole_images_results.hole.tees[i].image_idx == idx)
        {
            // this is a tee image!!
            F360.last_seen_tee = 
                F360.hole_images_results.hole.tees[i].color;
            F360.last_seen_tee_idx = idx;
                
            on_tee = 1;
            console.log('[load_hole_img] Yes... tee image.');
            break;
        }
    }
    console.log('[load_hole_img] Done querying tee image.');
    
    // if we are NOT on a tee, we need to calculate the
    // yards back to the last tee
    if (on_tee == 0)
    {
        tee_to_pin = 
            F360.hole_images_results.hole_images[F360.last_seen_tee_idx].dist_to_pin;
        dist_to_tee = tee_to_pin - yds_to_pin;
    }

    // tdist= [DISTANCE-TO-TEE]
    // tee= [TEE-COLOR]
    // ontee= [0|1]
    // dist= [DISTANCE-TO-PIN]
    // pin= [PIN-POSITION]
    
    F360.player.onSceneTransitionCompleted = (function () {
        return function () {
            var lat2, lon2, idx2, dist_to_tee2, pin2;
            console.log('scene transition completed.');
            F360.funcs.augmentation.root_id = false;
            lat2 = lat;
            lon2 = lon;
            idx2 = idx;
            pin2 = pin;
            dist_to_tee2 = dist_to_tee;
            
            if (pin2 != null)
            {
                console.log('have a pin location of: ' + pin2);
                if (pin2 == 'middle')
                {
                    dist_to_tee2 += 10;
                }
                else if (pin2 == 'back')
                {
                    dist_to_tee2 += 20;
                }
            }
            else
            {
                console.log('do not have a pin location.');
            }
            F360.player.removeScreenNode(F360.btns.yardage_dist);
            F360.btns.yardage_dist = F360.player.addScreenNode(imNodeType.ScreenImage);
            F360.player.setScreenNodeProperty(F360.btns.yardage_dist, 'x', 13);
            F360.player.setScreenNodeProperty(F360.btns.yardage_dist, 'y', 291);
            tmp = '/svc/hole_ydge_im_v2.php?'
                + 'dist=' + yds_to_pin + '&'
                + 'pin=' + pin + '&'
                + 'tee=' + F360.last_seen_tee + '&'
                + 'ontee=' + on_tee + '&'
                + 'tdist=' + dist_to_tee2
                ;
            console.log('Using yardage box url: ' + tmp);
            F360.player.setScreenNodeProperty(F360.btns.yardage_dist, 
                'materialNormalUrl', tmp);
            
            // add the standard buttons
            F360.funcs.set_gui();
            
            // add the green/tee images
            F360.load_tee_green_mkr();

            // add the augmentation
            F360.funcs.augmentation.add_all(lat2, lon2, yds_to_pin, idx2, num_imgs);
        };
    })();
    


    return true;
};

F360.display_img = function (url) 
{
    var from, to, duration;

/*
    duration = 3.0;
    // create start state parameters
    from = new Object();
    from.alpha = 0;
    from.scaleX = 0;
    from.scaleY = 0;

    // create start state parameters
    to = new Object();
    to.alpha = 1;
    to.scaleX = 1;
    to.scaleY = 1;

*/
    duration = 2.0;
    
    // create start state parameters
    from = new Object();
    from.alpha = 0;
    from.scaleX = 1; // this squeezes/extends left/right sides
    from.scaleY = 1; // this squeezes/extends up/down sides
    //from.blurX = 10;

    // create start state parameters
    to = new Object();
    to.alpha = 1;
    to.scaleX = 1;
    to.scaleY = 1;
    //to.blurX = 0;

    // detatch the camera from the scene
    F360.player.setSceneProperty("attachCameraToScreen", false);
    
    var camTo = new Object();
    //camTo.x = F360.player.getCameraProperty('x');
    //camTo.y = F360.player.getCameraProperty('y');
    //camTo.z = F360.player.getCameraProperty('z') + 30000;
    camTo.fov = F360.player.getCameraProperty('fov') - 35;
    //camTo.z += 20;
    //camTo.x += 200;
    //camTo.y += 200;
    F360.player.transitionCamera(camTo, duration);

    // set new scene to load
    //F360.player.loadScene(imSceneType.Basic, null, false, from, to, duration);
    F360.player.loadScene(imSceneType.Geo, '/player-v3.0.12a/javascript/player/config-scene.xml', false, from, to, duration);

    console.log('loading still into player from url: ' + url + ' ....');
    F360.player.loadStill(url);
};


/* LOAD IN THE GREEN, TEES, AND MARKER ICONS */
F360.load_tee_green_mkr = function () {
    console.log('loading greens');
    F360.funcs.load_greens();
    console.log('loading tees');
    F360.funcs.load_tees();
    console.log('loading markers');
    F360.funcs.load_markers();
};


F360.funcs.load_tees = function () {
    var i, color, icon, icon_hover, idx, tmp, base_x, base_y, x, y;
    // F360.hole_images_results.hole.greens is the green info
    // F360.hole_images_results.hole.tees is the tee info
    
    base_x = 220;
    base_y = 322;
    width = 20;
    
    x = base_x;
    y = base_y;
    
    F360.btns.tees = [];
    F360.btns.callbacks.tees = [];
    F360.btns.spacing = {};
    F360.btns.spacing.start = base_x;
    
    for (i = 0; i < F360.hole_images_results.hole.tees.length; i++)
    {
        color = F360.hole_images_results.hole.tees[i].color;
        icon = F360.hole_images_results.hole.tees[i].icon;
        icon_hover = F360.hole_images_results.hole.tees[i].icon_hover;
        idx = F360.hole_images_results.hole.tees[i].image_idx;
        tmp = 'tee-' + color;
        console.log('Got tee color: ' + color + ' -- ' + icon + ' -- hover: ' + icon_hover + ' xpos: ' + x);

        F360.btns.tees[i] = F360.player.addScreenNode(imNodeType.ScreenImage);
        F360.player.setScreenNodeProperty(F360.btns.tees[i], 'useHandCursor', true);
        F360.player.setScreenNodeProperty(F360.btns.tees[i], 
            'x', x);
        F360.player.setScreenNodeProperty(F360.btns.tees[i], 
            'y', y);
        F360.player.setScreenNodeProperty(F360.btns.tees[i], 
            'materialNormalUrl', icon);
        F360.player.setScreenNodeProperty(F360.btns.tees[i], 
            'materialHoverUrl', icon_hover);

        console.log('setting callback on tee idx: ' + F360.btns.tees[i]);
        F360.btns.callbacks.tees[F360.btns.tees[i]] = 
            (function () {
                var image_idx = idx;
                return function () { 
                    console.log('clicking on the tee with image idx: ' + image_idx); 
                    F360.funcs.change_image(image_idx); };
            })();
        F360.btns.spacing.end = x + width;
        x += width;
    }
};

F360.funcs.load_greens = function () {
    var i, pos, icon, idx, tmp, icon_hover;
    // F360.hole_images_results.hole.greens is the green info
    // F360.hole_images_results.hole.tees is the tee info
    
    xpos = 378;
    
    F360.btns.greens = [];
    F360.btns.callbacks.greens = [];
    
    for (i = 0; i < F360.hole_images_results.hole.greens.length; i++)
    {
        pos = F360.hole_images_results.hole.greens[i].position;
        icon = F360.hole_images_results.hole.greens[i].icon;
        icon_hover = F360.hole_images_results.hole.greens[i].icon_hover;
        idx = F360.hole_images_results.hole.greens[i].image_idx;
        tmp = 'green-' + pos;
        console.log('Got green position: ' + pos + ' -- ' + icon);

        if (pos == 'front')
        {
            y = 321;
        }
        else if (pos == 'back')
        {
            y = 298;
        }
        else
        {
            y = 309;
        }

        F360.btns.greens[i] = F360.player.addScreenNode(imNodeType.ScreenImage);
        F360.player.setScreenNodeProperty(F360.btns.greens[i], 'useHandCursor', true);
        F360.player.setScreenNodeProperty(F360.btns.greens[i], 
            'x', xpos);
        F360.player.setScreenNodeProperty(F360.btns.greens[i], 
            'y', y);
        F360.player.setScreenNodeProperty(F360.btns.greens[i], 
            'materialNormalUrl', icon);
        F360.player.setScreenNodeProperty(F360.btns.greens[i], 
            'materialHoverUrl', icon_hover);

        F360.btns.callbacks.greens[F360.btns.greens[i]] = 
                (function () {
                var image_idx = idx;
                return function () { 
                    console.log('clicking on the green with image idx: ' + image_idx);
                    F360.funcs.change_image(image_idx); 
                };
            })();
    }
};


F360.funcs.load_markers = function () {
    var i, mkr, icon, idx, tmp, base_x, base_y, width, x, y, need_func, end_x, start_x_200, start_x_150, start_x_100, start_x_par3;
    // F360.hole_images_results.hole.greens is the green info
    // F360.hole_images_results.hole.tees is the tee info

    base_x = F360.btns.spacing.start;
    end_x = F360.btns.spacing.end - 11;
    
    start_x_200 = F360.btns.spacing.start;
    start_x_150 = F360.btns.spacing.start + Math.floor((end_x - base_x)/2) - 8;
    
    // the tee images are 9 pixels wide.
    // the "cushion"/spacing between tee images is 11 pixels wide.
    // F360.btns.spacing.end - 11 is the *right* edge of the right-most tee image
    // F360.btns.spacing.end - 20 is the *left* edge of the right-most tee image
    // The marker image is 25 pixels wide.

    // so, to make the 100 yd marker's right edge match the right edge of 
    // the right-most tee, we set the x value to the RIGHT edge x, then subtract the width of the marker image.

    start_x_100 = F360.btns.spacing.end - 11 - 15 ;

    start_x_par3 = F360.btns.spacing.start + Math.floor((end_x - base_x)/2) - 12;
    
    base_y = 297;
    base_y += 1; // adding 1 pixel more per JPS request on 7/15/2010
    
    width = 35;
    width = 25;

    F360.btns.markers = [];
    F360.btns.callbacks.markers = [];


    for (i = 0; i < F360.hole_images_results.hole.markers.length; i++)
    {
        mkr = F360.hole_images_results.hole.markers[i].marker;
        icon = F360.hole_images_results.hole.markers[i].icon;
        icon_hover = F360.hole_images_results.hole.markers[i].icon_hover;
        idx = F360.hole_images_results.hole.markers[i].image_idx;
        tmp = 'mkr-' + mkr;
        console.log('Got marker position: ' + mkr + ' [' + icon + '] hover [' + icon_hover + ']');

        if (mkr == '200yd')
        {
            x = start_x_200;
            x = base_x;
            console.log('x-pos: ' + x);
            y = base_y;
            need_func = true;
        }
        else if (mkr == '150yd')
        {
            y = base_y;
            x = start_x_150;
            x = base_x + width;
            console.log('x-pos: ' + x);
            need_func = true;
        }
        else if (mkr == '100yd')
        {
            y = base_y;
            x = start_x_100;
            x = base_x + width * 2;
            console.log('x-pos: ' + x);
            need_func = true;
        }
        else if (mkr == 'par3')
        {
            y = base_y;
            y += 4; // adding 4 pixels per JPS request on 7/15/2010
            x = start_x_par3;
            x = base_x; // + 35; aligned left per JPS request on 7/15/2010
            console.log('x-pos: ' + x);
            need_func = false;
        }
        
        F360.btns.markers[i] = F360.player.addScreenNode(imNodeType.ScreenImage);
        F360.player.setScreenNodeProperty(F360.btns.markers[i], 
            'x', x);
        F360.player.setScreenNodeProperty(F360.btns.markers[i], 
            'y', y);
        F360.player.setScreenNodeProperty(F360.btns.markers[i], 
            'materialNormalUrl', icon);
        F360.player.setScreenNodeProperty(F360.btns.markers[i], 
            'materialHoverUrl', icon_hover);

        if (need_func)
        {
            F360.player.setScreenNodeProperty(F360.btns.markers[i], 'useHandCursor', true);
            F360.btns.callbacks.markers[F360.btns.markers[i]] = 
                    (function () {
                    var image_idx = idx;
                    return function () { 
                        console.log('clicking on the marker with image idx: ' + image_idx); 
                        F360.funcs.change_image(image_idx); 
                    };
                })();
        }
    }
};
/* END LOAD IN THE GREEN, TEES, AND MARKER ICONS */

/* AUGMENTED LINES AND ARROWS */
F360.funcs.augmentation.add_all = function (lat, lon, yds, idx, num_imgs) 
{
    var line_y, line_z, barr_y, barr_z, farr_y, farr_z;
    
    console.log('Adding augmentation');
    //if (!F360.funcs.augmentation.root_id)
    //{
        console.log('Created new augmentation root id');
        F360.funcs.augmentation.root_id 
            = F360.player.addGeoNode(imNodeType.GeoNode);
    //}

    // remove any pre-existing arrows and lines
    if (F360.funcs.augmentation.nodes.line)
    {
        F360.player.removeGeoNode(F360.funcs.augmentation.nodes.line);
        F360.funcs.augmentation.nodes.line = false;
    }

    if (F360.funcs.augmentation.nodes.backarrow)
    {
        F360.player.removeGeoNode(F360.funcs.augmentation.nodes.backarrow);
        F360.funcs.augmentation.nodes.backarrow = false;
    }

    if (F360.funcs.augmentation.nodes.forwardarrow)
    {
        F360.player.removeGeoNode(F360.funcs.augmentation.nodes.forwardarrow);
        F360.funcs.augmentation.nodes.forwardarrow = false;
    }
    
    
    line_y = 2;
    line_z = 5;
    farr_y = 1.5;
    farr_z = 5.0;
    barr_y = 2.5;
    barr_z = 5.0;
    
    show_green_line = true;
    if (yds >= 75)
    {
        console.log('yds is enough to show line');
        //F360.funcs.augmentation.add_line(line_y, line_z);
    }
    else
    {
        console.log('yds is NOT enough to show line [' + yds + ']');
        show_green_line = false;
        //F360.funcs.augmentation.add_forward2(false);
    }
    

    console.log('[augmentation.add_all] This image index [' + idx + '] total number of images [' + num_imgs + '] -- current global: ' + F360.hole_image_idx);
    if (idx > 0)
    {
        //F360.funcs.augmentation.add_back(barr_y, barr_z);
        F360.funcs.augmentation.add_back2(show_green_line);
    }
    else
    {
        console.log('No need for a back button.');
        F360.funcs.augmentation.add_back_no_arrow();
    }
    

    if (idx < num_imgs-1)
    {
        //F360.funcs.augmentation.add_forward(farr_y, farr_z);
        F360.funcs.augmentation.add_forward2(show_green_line);
    }
    else
    {
        console.log('No need for a forward button.');
    }
};

F360.funcs.augmentation.add_forward2 = function (with_arrow)
{
    var line_url, line_url2;

    if (with_arrow == false)
    {
        line_url = '/images/f360_skin_2/arrow-noline-top-off.png';
        line_url2 = '/images/f360_skin_2/arrow-noline-top-on.png';
        
        line_url = 'http://f360player-cdn.fairways360.com/v3/arrow-noline-top-off.png';
        line_url2 = 'http://f360player-cdn.fairways360.com/v3/arrow-noline-top-on.png';
        line_url = 'http://f360-player.s3.amazonaws.com/v3/arrow-noline-top-off.png';
        line_url2 = 'http://f360-player.s3.amazonaws.com/v3/arrow-noline-top-on.png';

    }
    else
    {
        line_url = '/images/f360_skin_2/arrow-top-off.png';
        line_url2 = '/images/f360_skin_2/arrow-top-on.png';

        line_url2 ='http://f360player-cdn.fairways360.com/v3/arrow-top-on.png';
        line_url = 'http://f360player-cdn.fairways360.com/v3/arrow-top-off.png';
        line_url2 = 'http://f360-player.s3.amazonaws.com/v3/arrow-top-on.png';
        line_url =  'http://f360-player.s3.amazonaws.com/v3/arrow-top-off.png';

    }

    //line_url2 = 'http://f360player-cdn.fairways360.com/v3/arrow-top-on.png';
    //line_url = 'http://f360player-cdn.fairways360.com/v3/arrow-top-off.png';
    
    
    F360.funcs.augmentation.nodes.forwardarrow = 
        F360.player.addGeoNode(
        imNodeType.GeoImage, 
        F360.funcs.augmentation.root_id);

    console.log('Added forward arrow at: ' + F360.funcs.augmentation.nodes.forwardarrow);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow, 
        'materialNormalUrl', line_url);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow, 
        'materialHoverUrl', line_url2);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'useHandCursor', true);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'rotationX', 0);
/*
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'pitch', 15);
*/

    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'x', 0);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'y', 2);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'z', 5.4);
        //'z', 5.4);
/*
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'scaleX', 1.5);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'scaleY', 1.5);
*/
    F360.btns.callbacks.forwardarrow = 
            (function () {
            var image_idx = F360.hole_image_idx + 1;
            return function () { 
                console.log('clicking on the forward arrow with image idx: ' + image_idx); 
                F360.funcs.change_image_forward(image_idx); 
            };
        })();
    console.log('Added forward arrow');
};

F360.funcs.augmentation.add_back2 = function (with_green)
{
    var line_url, line_url2;

    if (with_green == false)
    {
        line_url = '/images/f360_skin_2/arrow-noline-bottom-off.png';
        line_url2 = '/images/f360_skin_2/arrow-noline-bottom-on.png';

        line_url = 'http://f360player-cdn.fairways360.com/v3/arrow-noline-bottom-off.png';
        line_url2 = 'http://f360player-cdn.fairways360.com/v3/arrow-noline-bottom-on.png';

        line_url = 'http://f360-player.s3.amazonaws.com/v3/arrow-noline-bottom-off.png';
        line_url2 = 'http://f360-player.s3.amazonaws.com/v3/arrow-noline-bottom-on.png';
        
    }
    else
    {
        line_url = '/images/f360_skin_2/arrow-bottom-off.png';
        line_url2 = '/images/f360_skin_2/arrow-bottom-on.png';
        // http://f360player-cdn.fairways360.com/v3

        line_url = 'http://f360player-cdn.fairways360.com/v3/arrow-bottom-off.png';
        line_url2 = 'http://f360player-cdn.fairways360.com/v3/arrow-bottom-on.png';
        line_url = 'http://f360-player.s3.amazonaws.com/v3/arrow-bottom-off.png';
        line_url2 = 'http://f360-player.s3.amazonaws.com/v3/arrow-bottom-on.png';

    }
    
    F360.funcs.augmentation.nodes.backarrow = 
        F360.player.addGeoNode(
        imNodeType.GeoImage, 
        F360.funcs.augmentation.root_id);

    console.log('Added back arrow at: ' + F360.funcs.augmentation.nodes.backarrow);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow, 
        'materialNormalUrl', line_url);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow, 
        'materialHoverUrl', line_url2);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'useHandCursor', true);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'rotationX', 0);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'x', 0);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'y', 2);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'z', 4.5);
        //'z', 4.4);
/*
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'scaleX', 1.5);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'scaleY', 1.5);
*/
/*
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'pitch', 15);
*/

    F360.btns.callbacks.backarrow = 
            (function () {
            var image_idx = F360.hole_image_idx - 1;
            return function () { 
                console.log('clicking on the back arrow with image idx: ' + image_idx); 
                F360.funcs.change_image(image_idx); 
            };
        })();
    console.log('Added back-2');
};

F360.funcs.augmentation.add_back_no_arrow = function ()
{
    var line_url, line_url2;

    line_url = '/images/f360_skin_2/arrow-bottom-nowhitearrow.png';
    // 
    line_url = 'http://f360player-cdn.fairways360.com/v3/arrow-bottom-nowhitearrow.png';
    line_url = 'http://f360-player.s3.amazonaws.com/v3/arrow-bottom-nowhitearrow.png';
    
    
    F360.funcs.augmentation.nodes.backarrow = 
        F360.player.addGeoNode(
        imNodeType.GeoImage, 
        F360.funcs.augmentation.root_id);

    console.log('Added back arrow at: ' + F360.funcs.augmentation.nodes.backarrow);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow, 
        'materialNormalUrl', line_url);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'rotationX', 0);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'x', 0);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'y', 2);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'z', 4.5);

/*
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'scaleX', 1.5);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'scaleY', 1.5);
*/
/*
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'pitch', 15);
*/
    console.log('Added back-2-no-arrow');
};

F360.funcs.augmentation.add_line = function (y, z)
{
    var line_url;

    line_url = '/images/f360_skin_2/green-arrow.png';
    
    F360.funcs.augmentation.nodes.line = 
        F360.player.addGeoNode(
        imNodeType.GeoImage, 
        F360.funcs.augmentation.root_id);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.line,
        'projectionType', imNodeProjectionType.ViewPlane);
        // 3, 1
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.line, 'z', z);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.line, 'y', y);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.line, 
        'materialNormalUrl', line_url);

    console.log('Added line');
};

F360.funcs.augmentation.add_back = function (y, z)
{
    var arrow_on, arrow_off;

    arrow_on = '/images/f360_skin_2/backward-on.png';
    arrow_off = '/images/f360_skin_2/backward-off.png';
    
    F360.funcs.augmentation.nodes.backarrow = F360.player.addGeoNode(
        imNodeType.GeoImage, F360.funcs.augmentation.root_id);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'projectionType', imNodeProjectionType.ViewPlane);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow, 'z', z);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow, 'y', y);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow, 
        'materialNormalUrl', arrow_off);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow, 
        'materialHoverUrl', arrow_on);

    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.backarrow,
        'useHandCursor', true);

    F360.btns.callbacks.backarrow = 
            (function () {
            var image_idx = F360.hole_image_idx - 1;
            return function () { 
                console.log('clicking on the back arrow with image idx: ' + image_idx); 
                F360.funcs.change_image(image_idx); 
            };
        })();

};

F360.funcs.augmentation.add_forward = function (y, z)
{
    var arrow_on, arrow_off;

    arrow_on = '/images/f360_skin_2/forward-on.png';
    arrow_off = '/images/f360_skin_2/forward-off.png';
    
    F360.funcs.augmentation.nodes.forwardarrow = F360.player.addGeoNode(
        imNodeType.GeoImage, F360.funcs.augmentation.root_id);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'projectionType', imNodeProjectionType.ViewPlane);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow, 'z', z);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow, 'y', y);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow, 
        'materialNormalUrl', arrow_off);
    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow, 
        'materialHoverUrl', arrow_on);

    F360.player.setGeoNodeProperty(F360.funcs.augmentation.nodes.forwardarrow,
        'useHandCursor', true);

    F360.btns.callbacks.forwardarrow = 
            (function () {
            var image_idx = F360.hole_image_idx + 1;
            return function () { 
                console.log('clicking on the forward arrow with image idx: ' + image_idx); 
                F360.funcs.change_image_forward(image_idx); 
            };
        })();

};
/* END AUGMENTED LINES AND ARROWS */

/* AUTOPLAY */
// pass "true" to show the "play" button and set the callback appropriately
// pass "false" to show the "pause" button and reset the callback.
F360.funcs.autoplay.display_mgr = function (is_paused)
{
    F360.funcs.remove_old_node(F360.btns.autoplay);
    F360.btns.autoplay = F360.player.addScreenNode(imNodeType.ScreenImage);
    F360.player.setScreenNodeProperty(F360.btns.autoplay, 'useHandCursor', true);
    /* with full screen button
    F360.player.setScreenNodeProperty(F360.btns.autoplay, 'x', 475);
    F360.player.setScreenNodeProperty(F360.btns.autoplay, 'y', 7);
    */
    F360.player.setScreenNodeProperty(F360.btns.autoplay, 'x', 505);
    F360.player.setScreenNodeProperty(F360.btns.autoplay, 'y', 7);

    
    if (is_paused)
    {
        tmp = '/images/f360_skin_2/autoplay-off.png';
        tmp2 = '/images/f360_skin_2/autoplay-on.png';
        F360.btns.callbacks.autoplay = function () { 
            F360.funcs.autoplay.start();
            return false;
        };
    }
    else
    {
        tmp = '/images/f360_skin_2/autoplay-pause-on.png';
        tmp2 = tmp;
        F360.btns.callbacks.autoplay = function () { 
            F360.funcs.autoplay.pause(); 
            return false;
        };
    }
    
    F360.player.setScreenNodeProperty(F360.btns.autoplay, 
        'materialNormalUrl', tmp);
    F360.player.setScreenNodeProperty(F360.btns.autoplay, 
        'materialHoverUrl', tmp2);
};

F360.funcs.autoplay.start = function () 
{
    // current image plus 1.
    var start_idx;
    start_idx = F360.hole_image_idx + 1;
    F360.funcs.autoplay.play(start_idx);
    
    // change the play-button to a pause button
    // and reset the callback.
    F360.funcs.autoplay.display_mgr(false);
}

F360.funcs.autoplay.pause = function () 
{
    clearTimeout(F360.funcs.autoplay.timer_id);
    F360.funcs.autoplay.timer_id = false;
    // change the pause-button to a play button
    // and reset the callback.
    F360.funcs.autoplay.display_mgr(true);
};

F360.funcs.autoplay.play = function (idx) 
{
    var rv;
    //rv = F360.funcs.load_hole_img(idx);
    rv = F360.funcs.change_image_forward(idx);
    if (rv == true)
    {
        console.log('keep playing...');
        //idx++;
        idx = F360.hole_image_idx + 2;
        F360.funcs.autoplay.timer_id = 
            setTimeout("F360.funcs.autoplay.play(" + idx + ");", 
                F360.funcs.autoplay.delay);
    }
    else
    {
        console.log('done playing all images... ' + idx);
        F360.funcs.autoplay.pause();
    }
};


/* END AUTOPLAY */