var frame               = 0;
var numPictures         = 5;

var egFrame               = 0;
var egNumPictures         = 6;

var imagePath           = "/framing/_images/";
var installImageRoot    = imagePath + "installation/display_";
var egImageRoot         = imagePath + "examples/eg_";
var metalImageRoot      = imagePath + "metals/";
var hardwoodImageRoot   = imagePath + "hardwoods/";
var mountingImageRoot   = imagePath + "mounting/";

var imageTitles =   ['Private residence. Artwork by David Halliday (left) and Jack Leigh (right).',
                     'Yes Men headquarters, Artwork by Katherine Slingluff.',
                     'Private residence, Artwork by Katherine Slingluff.',
                     'Gallery opening.',
                     'Private residence, Artwork by Walter Anderson.'
                    ];

var egTitles =   ['The Yes Men Headquarters',
                  'The Half Moon',
                  'Boy with a Mask',
                  'Jerry Uelsmann Print',
                  'Blue Dog by George Rodrigue ',
                  'Platinum print by Lisa Silvestri'
                 ];

var egLHS =     ['Headquarters of Yes Men Worldwide. Artwork by Katherine Slingluff.',
                 'The art is raised about 1" from the backing and appears to "float" in its frame.',
                 '2" wide raven black Italian-made moulding with beaded pattern and matching fillet insert.',
                 'Gelatin silver print on fiber-base paper by Jerry Uelsmann.',
                 '',
                 ''
                ];

var egRHS =     ['Unfinished raw steel frame showing beading.',
                 'Note the deckled paper edges and the spline corners on the frame.',
                 '15x20 pigment print on digital RC paper.',
                 'Beveled moulding profile with 13.5K white gold rub.',
                 '"Blue Dog" silkscreen print by George Rodrigue.',
                 'Platinum print on watercolor paper by Lisa Silvestri, author of the John McDonogh Series.'
                ];

var egDescriptions =    ['<b>Handcrafted metal frame, no mat.<\/b><p>Pigment prints on hot-press watercolor paper of an 8-piece tree by Katherine Slingluff, museum-mounted, and framed in a 3/4" raw, unfinished stainless steel moulding with museum glass. Spacers keep the art away from the glass. Each piece 30"x30".<\/p>Arakawa hanging system.',
                         '<b>Premium hardwood frame, suspended floater mount.<\/b><p>Pigment print on deckled cold-press watercolor paper. Floated and framed in mahogany hardwood with graphite finish and museum glass. 36"x27".<\/p>',
                         '<b>Matching frame and fillet, single mat.<\/b><p>Pigment print on resin-coated paper. Matted with a fillet insert and framed in museum glass. The pattern on the frame and fillet echo that of the mask. 24"x30".<\/p>',
                         '<b>Premium hardwood frame, handcrafted mat.<\/b><p>Walnut hardwood frame with graphite finish, white gold gilding, accented bevel mat and museum glass. A beveled moulding profile combined with an accented bevel mat were chosen to echo the strong three-dimensionality of the perspective in the print. 20"x23".<\/p>',
                         '<b>Lacquered finish frame and double-mat.<\/b><p>Double-matted in 4-ply conservation board and framed with a high-gloss Italian-made moulding and museum glass. 31"x38".<\/p>',
                         '<b>Floater mount.<\/b><p>This presentation allows simultaneously the use of a thin moulding profile and shows the (deckled) edges of the paper. To preserve the organic quality of the presentation, the art is museum-mounted to the cotton rag backing with rice starch paste and japanese mulberry paper, and matted with 8-ply cotton rag board. It is framed with plexiglass.<\/p>'
                         ];

var hardwoodLegend = ['Canvas floater in natural maple.',
                      'Recessed frame in natural maple.',
                      'Double-sided frame.',
                      'Ash frame with ebony finish.',
                      'Cherry frame with natural finish.',
                      'Mahogany frame with natural finish.',
                      'Maple frame with ebony finish.',
                      'Birdseye maple frame with umber finish and 13.5K white gilding.',
                      'Tiger maple frame with umber finish.',
                      'Oak frame with natural finish.',
                      'Fishtail oak frame with rosewood finish.',
                      'Quartersawn oak frame with medium brown finish.',
                      'Paduak frame, rosewood finish.',
                      'Walnut frame, blackened oil finish.',
                      'Natural cherry frame. Attractive spline corners are crafted to join the miters (sides) of the frame instead of the commonly used v-nails.',
                      'Poplar frame with a recessed paduak hick with rosewood finish.',
                      'Mahogany frame with rosewood finish and rounded s-corners.',
                      'Mahogany canvas floater with rosewood finish and 23K yellow gilding.',
                      'Poplar frame with birdseye veneer and 13.5K  white gilding.'
                     ];
                     
var metalLegend =    ['Welded Steel frame: zirconia grinding pattern, satin finish.',
                      'Flat Iron frame with screws: zirconia grinding pattern, satin finish.',
                      'Flat Iron frame with no screws: etched grinding pattern, satin finish.',
                      'Brushed Welded Steel frame, satin finish.',
                      'Burnished Welded Steel frame, satin finish.',
                      'Etched Flat Iron frame, satin finish.',
                      'Ground Welded Steel frame, gunmetal finish.',
                      'Industrial Welded Steel frame, slate finish, showing beading.',
                      'Pitted Welded Steel frame, slate finish.',
                      'Zirconia Welded Steel frame, emerald finish.',
                      'Raw Welded Steel frame, no finish, showing beading.'
                     ];
                     
var mountingLegend = ['The face-mounting process permanently bonds a sheet of plexiglass to the face of a print. Because it seems to add a third dimension to the image and provides exceptional brilliance and intensity, it is one of the most impressive ways of presenting a photograph.',
                      '<b>Dibond<\/b><p>A double-sided archival 3mm thick aluminum mount filled with polyethylene core material for maximum stability. Dibond is more rigid, thinner, lighter and smoother than sintra.<\/p>',
                      '<b>Sintra<\/b><p>Rigid, lightweight, slightly textured and economical 3- or 6mm-thick PVC-based material. Sintra is a dent- and scratch-resistant backing materials. Available in white or black finish.<\/p>',
                      '<b>Gatorboard<\/b><p>A lightweight 3\/16" or 1\/2" thick polystyrene foam board bonded on both sides for uniformity and moisture-resistance. More rigid and durable than foamcore.<\/p>',
                      '<b>Museum board<\/b><p>Archival 100% cotton-rag board buffered for added protection. Suitable for portfolio presentations and framing but lacks the rigidity necessary for a stand-alone wall display. Available in 4-, 6- or 8-ply thickness.<\/p>',
                      '<b>Foam core<\/b><p>Economical and lightweight board with cotton outer layers and an inner layer of foamed plastic. Foam core is the most economical backing material available but it lacks the rigidity necessary for a stand-alone presentation.<\/p>',
                      '<b>Cleated aluminum braces<\/b><p>Our braces are made of 1" thick square tubular aluminum. The cleat system allows them to be easily mounted to the wall. In this example, the braces are mounted to 3mm dibond.<\/p>'
                      ];

function buildOverlays(){
    try {
        $(function() {
            $("#questions a[rel]").overlay({
                absolute: true,
                left: 0,
                expose: {
                    top: '250px',
                    color: '#333',
                    loadSpeed: 200,
                    opacity: 0.9
                }
            });
        });
    } catch(error){alert("Failed in buildOverlays " + error.message);}
}

function initializeNavigator() {
    $(document).ready(function(){
        $("img.next").hover(
            function(){ //over
              this.src = rightBlueImage;
              $("body").css("cursor", "pointer");
            },
            function(){ //out
              this.src = rightOrangeImage;
              $("body").css("cursor", "auto");
            }
        );
        $("img.previous").hover(
            function(){ //over
              this.src = leftBlueImage;
              $("body").css("cursor", "pointer");
            },
            function(){ //out
              this.src = leftOrangeImage;
              $("body").css("cursor", "auto");
            }
        );
        $("img.next").mouseup(function(){
            this.src = rightBlueImage;
        }).mousedown(function(){
            this.src = rightGreyImage;
        });
        $("img.previous").mouseup(function(){
            this.src = leftBlueImage;
        }).mousedown(function(){
            this.src = leftGreyImage;
        });

        $("img.next").click(
            function(){
                nextInstallImage();
                nextEgImage();
            }
        );
        $("img.previous").click(
            function(){
                previousInstallImage();
                previousEgImage();
            }
        );
    });
}

function nextInstallImage(){
    if(frame<(numPictures-1))frame++;
    else frame=0;
    var num = frame;
    loadInstallPic(frame);
}

function previousInstallImage(){
    if(frame>0)frame--;
    else frame=numPictures-1;
    var num = frame;
    loadInstallPic(num);
}

function nextEgImage(){
    if(egFrame<(egNumPictures-1))egFrame++;
    else egFrame=0;
    var num = egFrame;
    loadEg(num);
}

function previousEgImage(){
    if(egFrame>0)egFrame--;
    else egFrame=egNumPictures-1;
    var num = egFrame;
    loadEg(num);
}

function loadInstallPic(i) {
    var index = i;
    $('#slide > #installation-image img').attr("src",installImageRoot + i + ".jpg");
    $('#installation-legend > #image-title').html(imageTitles[i]);
    frame=i;
}

function loadEg(i) {
    $('#egFrame > img#lhseg').attr("src",egImageRoot + i + "0.jpg");
    $('#egFrame > img#rhseg').attr("src",egImageRoot + i + "1.jpg");
    $('#egFrame > #egTitle').html(egTitles[i]);
    $('#egFrame > #eglegends > #egleftlegend').html(egLHS[i]);
    $('#egFrame > #eglegends > #egrightlegend').html(egRHS[i]);
    $('#examples > #egDescription').html(egDescriptions[i]);
    egFrame=i;
}

function loadMetals(index){
    var src;
    if(index==0){
        src = metalImageRoot + "zirconia-satin.jpg";
    } else if(index==1){
        src = metalImageRoot + "zirconia-bronze.jpg";
    } else if(index==2){
        src = metalImageRoot + "etched_satin-no_screws.jpg";
    } else if(index==3){
        src = metalImageRoot + "brushed-satin.jpg";
    } else if(index==4){
        src = metalImageRoot + "burnished-satin.jpg";
    } else if(index==5){
        src = metalImageRoot + "etched-satin.jpg";
    } else if(index==6){
        src = metalImageRoot + "ground-gunmetal.jpg";
    } else if(index==7){
        src = metalImageRoot + "industrial-slate-with-bead.jpg";
    } else if(index==8){
        src = metalImageRoot + "pitted-slate.jpg";
    } else if(index==9){
        src = metalImageRoot + "zirconia-emerald.jpg";
    } else if(index==10){
        src = metalImageRoot + "raw-unfinished.jpg";
    }
    $('#metals > .horizontal_bottom_pane > #metals-image > img').attr("src",src);
    $('#metals > .horizontal_bottom_pane > #metals-legend').html(metalLegend[index]);
}

function loadHardwoods(index){
    var src;
    if(index==0){
        src = hardwoodImageRoot + "canvas-floater.jpg";
    } else if(index==1){
        src = hardwoodImageRoot + "recessed.jpg";
    } else if(index==2){
        src = hardwoodImageRoot + "double-sided.jpg";
    } else if(index==3){
        src = hardwoodImageRoot + "ash-ebony.jpg";
    } else if(index==4){
        src = hardwoodImageRoot + "cherry-natural.jpg";
    } else if(index==5){
        src = hardwoodImageRoot + "mahogany-natural.jpg";
    } else if(index==6){
        src = hardwoodImageRoot + "maple-ebony.jpg";
    } else if(index==7){
        src = hardwoodImageRoot + "birdseye_maple-umber-white_gold.jpg";
    } else if(index==8){
        src = hardwoodImageRoot + "tiger-maple.jpg";
    } else if(index==9){
        src = hardwoodImageRoot + "oak-natural.jpg";
    } else if(index==10){
        src = hardwoodImageRoot + "fishtail_oak-rosewood.jpg";
    } else if(index==11){
        src = hardwoodImageRoot + "quartersawn_oak-medium_brown.jpg";
    } else if(index==12){
        src = hardwoodImageRoot + "paduak-rosewood.jpg";
    } else if(index==13){
        src = hardwoodImageRoot + "walnut-blackened_oil.jpg";
    } else if(index==14){
        src = hardwoodImageRoot + "spline-corner.jpg";
    } else if(index==15){
        src = hardwoodImageRoot + "hick.jpg";
    } else if(index==16){
        src = hardwoodImageRoot + "s-corner.jpg";
    } else if(index==17){
        src = hardwoodImageRoot + "yellow-gilding.jpg";
    } else if(index==18){
        src = hardwoodImageRoot + "white-gilding.jpg";
    }
    $('#hardwoods > .horizontal_bottom_pane > #hardwoods-image > img').attr("src",src);
    $('#hardwoods > .horizontal_bottom_pane > #hardwoods-legend').html(hardwoodLegend[index]);
}

function loadMounting(index){
    var src;
    if(index==0){
        src = mountingImageRoot + "mounting-diagram-web.jpg";
    } else if(index==1){
        src = mountingImageRoot + "dibond-web.jpg";
    } else if(index==2){
        src = mountingImageRoot + "sintra-web.jpg";
    } else if(index==3){
        src = mountingImageRoot + "gatorboard-web.jpg";
    } else if(index==4){
        src = mountingImageRoot + "museumboard-web.jpg";
    } else if(index==5){
        src = mountingImageRoot + "foamcore-web.jpg";
    } else if(index==6){
        src = mountingImageRoot + "aluminum_braces-web.jpg";
    }
    $('#mounting > .horizontal_bottom_pane > #mounting-image > img').attr("src",src);
    $('#mounting > .horizontal_bottom_pane > #mounting-legend').html(mountingLegend[index]);
}