function zoompop_viewer(code, target, face) {
    return '<object id="theMovie" width="500" height="500" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">' +
        '<param value="zoomifyImagePath=/mm5/zoomfiles/' + code + '_' + target + '_' + face + '" name="FlashVars"/>' +
        '<param value="FALSE" name="MENU"/>' +
        '<param value="zoomifyViewer.swf" name="SRC"/>' +
        '<embed width="500" height="500" name="theMovie" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" menu="false" src="zoomifyViewer.swf" flashvars="zoomifyImagePath=/mm5/zoomfiles/' + code + '_' + target + '_' + face + '"/>' +
        '</object>';
}

function zoompop_unzoom() {
    document.id('zoompop-background').tween('opacity', 0.0);
    document.id('zoompop-frame').tween('opacity', 0.0);
}

function zoompop_switch(code, target, face) {
    var display = document.id('zoompop-display');
    var faces = document.id('zoompop-faces');
    var img = null;

    display.set('html', zoompop_viewer(code, target, face));

    faces.empty();

    img = new Element('img', {src: '/mm5/zoomthumbnails/' + code + '_' + target + '_front.jpg'});
    img.addEvent('click', function() {zoompop_switch(code, target, 'front')});
    faces.grab(img);

    img = new Element('img', {src: '/mm5/zoomthumbnails/' + code + '_' + target + '_back.jpg'});
    img.addEvent('click', function() {zoompop_switch(code, target, 'back')});
    faces.grab(img);
}

function zoompop_zoom() {
    try {
        var target = $$('.attr_radio:checked')[0].value;
    }
    catch(x) {
        try {
            var target = $$('.attr_radio')[0].value;
        }
        catch(x) {
            var target = '';
        }
    }
    var code = $$('input[name=Product_Code]')[0].value;

    var background = document.id('zoompop-background');
    var frame = document.id('zoompop-frame');
    var colors = document.id('zoompop-colors');
    var close = document.id('zoompop-close');

    colors.empty();
    $$('.rb_tsw_cell').each(function(cell) {
        var img = cell.getElements('.rb_oll_label img')[0].clone();
        var new_target = cell.getElements('input.attr_radio')[0].value;

        img.setStyle('display', 'inline');
        img.setStyle('cursor', 'pointer');
        img.addEvent('click', function() {target = new_target; zoompop_switch(code, new_target, 'front');});
        colors.grab(img);
    });

    background.tween('opacity', 0.5);
    frame.tween('opacity', 1.0);

    zoompop_switch(code, target, 'front');
}

function zoompop_setup() {
    var background = new Element('div', {id: 'zoompop-background'});
    var frame = new Element('div', {id: 'zoompop-frame'});
    var bar = new Element('div', {id: 'zoompop-bar'});
    var faces = new Element('div', {id: 'zoompop-faces'});
    var display = new Element('div', {id: 'zoompop-display'});
    var close = new Element('img', {src: '/zoompop-close.gif'});
    var colors = new Element('div', {id: 'zoompop-colors'});

    background.setStyle('opacity', 0);
    background.setStyle('background-color', '#000');
    background.setStyle('position', 'absolute');
    background.setStyle('top', '0px');
    background.setStyle('left', '0px');
    background.setStyle('z-index', 99);
    background.addEvent('click', zoompop_unzoom);

    frame.setStyle('opacity', 0);
    frame.setStyle('position', 'absolute');
    frame.setStyle('width', '500px');
    frame.setStyle('height', '500px');
    frame.setStyle('z-index', 100);

    bar.setStyle('position', 'absolute');
    bar.setStyle('top', '20px');
    bar.setStyle('right', '-127px');
    bar.setStyle('width', '128px');

    //faces.setStyle('position', 'absolute');
    //faces.setStyle('width', '75px');
    //faces.setStyle('top', '20px');
    //faces.setStyle('left', '-75px');

    close.setStyle('position', 'absolute');
    close.setStyle('top', '-12px');
    close.setStyle('right', '0px');
    close.setStyle('cursor', 'pointer');
    close.addEvent('click', zoompop_unzoom);

    bar.grab(colors);
    bar.grab(faces);
    frame.grab(bar);
    frame.grab(close);
    frame.grab(display);

    $$('body').grab(background);
    $$('body').grab(frame);

    $$('.zoompop').each(function(trigger) {
        trigger.removeEvents('click');
        trigger.addEvent('click', zoompop_zoom);
        trigger.setStyle('cursor', 'pointer');
    });

    function resize() {
        var size = window.getSize();
        var fullsize = window.getScrollSize();

        background.setStyle('width', fullsize.x);
        background.setStyle('height', fullsize.y);
        frame.setStyle('top', (size.y - 500) / 2);
        frame.setStyle('left', (size.x - 500) / 2);
    }

    window.addEvent('resize', resize);
    resize();
}

window.addEvent('domready', zoompop_setup);