trendy_popup = new Extends(new mozz.boxSetup(), 
{
    init: function(bg, wrap, box)
    {
        // init the parent var
        this.parent.init(bg, wrap, box);
        
        // set up the new honeys
        document[this.uid].box = $('popup_contents');
        this.box.honeyH = new mozz.honey();
        this.box.honeyH.init(this.box);
        this.box.honeyW = new mozz.honey();
        this.box.honeyW.init(this.box);
        document[this.uid].currentBox = 'image';
        
        // set up the box clicks
        //eval('var func = function() {document.' + this.uid + '.showInternalBox("image"); return false}');
        //$('image_button').onclick = func;
        eval('var func = function() {document.' + this.uid + '.showInternalBox("chart"); return false}');
        $('chart_button').onclick = func;
        //eval('var func = function() {document.' + this.uid + '.showInternalBox("further"); return false}');
        //$('further_button').onclick = func;
        
        // set up the image box
        var count = 0;
        document[this.uid].currentImage = 0;
        /*var imgs = $('image_box').getElementsByTagName('img');
        for (var i = 0; i < imgs.length; i ++)
            if (imgs[i].parentNode.nodeName.toLowerCase() == 'li')
            {
                eval('var func = function() {document.' + this.uid + '.changeImage(' + (count++) + ', "' + imgs[i].src + '"); return false}');
                imgs[i].onclick = func;
            }
        */
        // set up the internal box
        this.currentBox = 'image';
        var dims = this.getDimensions($('chart_button').rel);
        this.box.style.height = dims.y + 'px';
        this.box.style.width = dims.x + 'px';
    },
    
    showBox: function()
    {
        // set up the bg to full height
        $(this.bg.name).style.height = this.pos.getHeight(true) + 'px';
        
        // hide all select boxes
        var selects = document.getElementsByTagName('select');
        for (var i = 0; i < selects.length; i ++)
            selects[i].style.display = 'none';
        
        // show the important stuff
        this.bg.honey.setChange({type: 'fade', max: '30', min: '0', direction: 'out', remove: true, frames: 2});
        this.wrap.honey.setChange({type: 'fade', max: '100', min: '0', direction: 'out', remove: true, frames: 2});
        
        // allow the close button to be clicked once loaded
        eval('var func = function() {document.' + this.uid + '.hideBox(); return false}');
        setTimeout(function() {$('closeButton').onclick = func}, 200);
        
        // return false
        return false;
    },
    
    hideBox: function(hideBg)
    {
        // make sure hideBg exists
        hideBg = (typeof(hideBg) == 'undefined') ? true : hideBg;
        
        // show the important stuff
        if (hideBg) this.bg.honey.setChange({type: 'fade', max: '30', min: '0', direction: 'in', remove: true, frames: 2});
        this.wrap.honey.setChange({type: 'fade', max: '100', min: '0', direction: 'in', remove: true, frames: 2});
        
        // hide all select boxes
        var selects = document.getElementsByTagName('select');
        for (var i = 0; i < selects.length; i ++)
            selects[i].style.display = 'block';
        
        // disable buttons
        if ($('closeButton')) $('closeButton').onclick = function() {return false};
    },
    
    showInternalBox: function(boxName)
    {
        // init vars
        var dims = this.getDimensions($(boxName + '_button').rel);
        var y = parseInt(this.box.style.height);
        var x = parseInt(this.box.style.width);
        var resX = {max: 0, min: 0, direction: 'in'};
        var resY = {max: 0, min: 0, direction: 'in'};
        var types = new Array('image', 'chart', 'further');
        // check for the same box
        if (boxName == this.currentBox) return false;
        this.currentBox = boxName;
        
        // change the box classes and panels
        for (tId in types)
        {
            $(types[tId] + '_button').className = types[tId] + '_button' + (boxName == types[tId] ? '_on' : '');
            if (boxName == types[tId])
            {
                eval('var func = function() {$("' + types[tId] + '_box").style.display = "block"}');
                setTimeout(func, 400);
            }
            else
                $(types[tId] + '_box').style.display = 'none';
        }
        
        // set the amounts to resize by
        resX = x < dims.x ? {max: dims.x, min: x, dir: 'out'} : {max: x, min: dims.x, dir: 'in'};
        resY = y < dims.y ? {max: dims.y, min: y, dir: 'out'} : {max: y, min: dims.y, dir: 'in'};
        
        // resize the box
        this.box.honeyH.setChange({type: 'size', orientation: 'height', max: resY.max, min: resY.min, direction: resY.dir, frames: 20});
        this.box.honeyW.setChange({type: 'size', orientation: 'width', max: resX.max, min: resX.min, direction: resX.dir, frames: 20});
    },

    getDimensions: function(relString)
    {
        var dims = relString.split('x');
        return {x: dims[0], y: dims[1]};
    },
    
    changeImage: function(id, img)
    {
        $('image_pointer').style.top = (40 + (id * 110)) + 'px';
        $('popup_big_image').src = img.replace('/dyn/product/', '/dyn/product/large_');
    }
});

// trendy popup
var popup = new trendy_popup();
var popup_events = new util.events();
popup.init({name: 'popup_background'}, {name: 'popup_wrap'}, {name: 'popup_box', height: 500, width: 600});
if ($('open_popup_link')) $('open_popup_link').onclick = function() {popup.showBox(); return false};
if ($('open_popup_image')) $('open_popup_image').onclick = function() {popup.showBox(); return false};