Mantels = {};
Mantels.PPI = 5; // Pixels per inch

Mantels.instances = new Hash();

VillaStone.BaseMantel = Class.create({
    builder: false,

    divFrontView: false,
    divTop: false,
    divPainting: false,
    divLintel: false,
    divInlay: false,
    divLegLeft: false,
    divLegRight: false,
    divPlinthLeft: false,
    divPlinthRight: false,
    divBody: false,
    divFiller: false,
    divTopFiller: false,
    divLeftFiller: false,
    divRightFiller: false,
    divBottomFiller: false,
    divFireBox: false,
    divFireBoxLeft: false,
    divFireBoxRight: false,
    divHearth: false,
    divRiser: false,
    
    divSideView: false,
    divSidePainting: false,
    divLintelSide: false,
    divInlaySide: false,
    divLegSide: false,
    divPlinthSide: false,
    divHearthSide: false,
    divRiserSide: false,
    
    showInlay: false,
    
    roomHeight: 9,
    
    fireBoxHeight: 24,
    fireBoxWidth: 43,
    fireBoxWidthMax: 48,
    bottomFillerHeight: 6.75,
        
    legHeight: 30,
    maxLegHeight: 40,
    legWidthPx: 46,
    legTopOffsetPx: 0,
    legSideOffsetPx: 15,
    
    riserHeight: 0,
    hearthDepth: 20,
    
    plinthHeightPx: 40, 
    plinthWidthPx: 56,
    plinthOffsetPx: 5,
    
    bodyWidthPx: 237,
    
    lintelWidthPx: 359,
    lintelHeightPx: 73,
    lintelSideWidthPx: 70,
    
    includeRiser: true,  
    riserWidthPx: 360,
    
    imgLintel:  '/monaco_lintel.jpg',
    imgLintelSide: '/monaco_lintel_side.jpg',
    imgLegLeft:  '/monaco_leg_a.jpg',
    imgLegRight:  '/monaco_leg_a.jpg',
    imgLegSide: '/monaco_leg_a_side.jpg',
    imgPlinthLeft:  '/monaco_plinth_a.gif',
    imgPlinthRight:  '/monaco_plinth_a.gif',
    imgPlinthSide: '/monaco_plinth_a_side.jpg',
    imgTopFiller: '/texture.jpg',
    
    sliderLegHeight: false,
    sliderRiserHeight: false,
    sliderHearthDepth: false,
    
    partCode: 'XX',
    partFamily: 'Monaco',
    partFamilyPrefix: 'MC',
   
    initialize: function(builder) {
        this.builder = builder;
        
        this.divFrontView = $('frontView');
        this.divTop = this.divFrontView.down('div.top');
        this.divPainting = this.divFrontView.down('div.painting');
        this.divLintel = this.divFrontView.down('div.lintel');
        this.divInlay = this.divLintel.down('div.inlay');
        this.divLegLeft = this.divLintel.down('div.legLeft');
        this.divLegRight = this.divLintel.down('div.legRight');
        this.divPlinthLeft = this.divLegLeft.down('div.plinth');
        this.divPlinthRight = this.divLegRight.down('div.plinth');
        this.divBody = this.divLintel.next('div.body');
        this.divFiller = this.divBody.down('div.filler');
        this.divTopFiller = this.divFiller.down('div.topfiller');
        this.divLeftFiller = this.divFiller.down('div.left');
        this.divRightFiller = this.divFiller.down('div.right');
        this.divFireBox = this.divFiller.down('div.firebox');
        this.divFireBoxLeft = this.divFireBox.down('div.fireboxLeft');
        this.divFireBoxRight = this.divFireBox.down('div.fireboxRight');
        this.divBottomFiller = this.divFiller.down('div.bottomFiller');
        this.divHearth = this.divBody.next('div.hearth');
        this.divRiser = this.divHearth.next('div.riser');
        
        this.divSideView = $('sideView');
        this.divSidePainting = this.divSideView.down('div.painting');
        this.divLintelSide = this.divSideView.down('div.lintel');
        this.divInlaySide = this.divLintelSide.down('div.inlay');
        this.divLegSide = this.divLintelSide.next('div.leg');
        this.divPlinthSide = this.divLegSide.next('div.plinth');
        this.divHearthSide = this.divPlinthSide.next('div.hearth');
        this.divRiserSide = this.divHearthSide.next('div.riser');
    },
    
    refresh: function() {
        this.fireBoxWidth = Math.min(this.fireBoxWidth, this.fireBoxWidthMax);
        
        if (this.showInlay) {
            this.divInlay.show();
            this.divInlaySide.show();
        } else {
            this.divInlay.hide();
            this.divInlaySide.hide();
        }
    
        var newLegHeightPx = this.legHeight * Mantels.PPI;
        var totalLegHeightPx = newLegHeightPx + this.plinthHeightPx;
        var fireBoxHeightPx = this.fireBoxHeight * Mantels.PPI;
        var fireBoxWidthPx = this.fireBoxWidth * Mantels.PPI;
        var bottomFillerHeightPx = this.bottomFillerHeight * Mantels.PPI;
        var topFillerHeightPx = totalLegHeightPx - fireBoxHeightPx - bottomFillerHeightPx - 3;
        var sideFillerWidthPx = Math.floor((this.bodyWidthPx - fireBoxWidthPx) / 2) + 1;
        var adjustedBodyWidthPx = (this.bodyWidthPx + 20);
        var roomHeightPx = this.roomHeight * 12 * Mantels.PPI;
        var hearthHeightPx = 11;
        var newRiserHeightPx = this.riserHeight * Mantels.PPI;
        
        // Determine how much of the firebox will fit - if there is not enough room, automatically size down the firebox
        var roomLeftForFireBoxPx = totalLegHeightPx - bottomFillerHeightPx;
        var roomLeftForFireBoxIn = Math.floor(roomLeftForFireBoxPx / Mantels.PPI);
        if (roomLeftForFireBoxIn < this.fireBoxHeight) {
            fireBoxHeightPx = roomLeftForFireBoxIn * Mantels.PPI;
            this.fireBoxHeight = roomLeftForFireBoxIn;
            mantelBuilder.sliderValueFireBoxHeight.innerHTML = roomLeftForFireBoxIn + '"';
            new Effect.Highlight(mantelBuilder.sliderValueFireBoxHeight, { duration: 1.0, startcolor: '#ffff99', endcolor: '#ffffff', restorecolor: '#ffffff' });
            mantelBuilder.sliderFireBoxHeight.setValue(roomLeftForFireBoxIn);
        }
        
        var spaceAboveLintelPx = roomHeightPx - totalLegHeightPx - this.lintelHeightPx - hearthHeightPx - newRiserHeightPx;
        
        this.divLegLeft.setStyle({backgroundImage: 'url(/images/mantel' + this.imgLegLeft + ')'});
        this.divLegRight.setStyle({backgroundImage: 'url(/images/mantel' + this.imgLegRight + ')'});
        this.divLegSide.setStyle({backgroundImage: 'url(/images/mantel' + this.imgLegSide + ')'});
        this.divTopFiller.setStyle({backgroundImage: 'url(/images/mantel' + this.imgTopFiller + ')'});
        
        // Adjust painting
        new Effect.Morph(this.divPainting, { style: 'height: ' + spaceAboveLintelPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divSidePainting, { style: 'height: ' + spaceAboveLintelPx + 'px', duration: 0.5 });
        
        // Adjust fire box
        new Effect.Morph(this.divFireBox, { style: 'height: ' + fireBoxHeightPx + 'px; width: ' + fireBoxWidthPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divFireBoxLeft, { style: 'height: ' + fireBoxHeightPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divFireBoxRight, { style: 'height: ' + fireBoxHeightPx + 'px', duration: 0.5 });
        
        new Effect.Morph(this.divLeftFiller, { style: 'width: ' + sideFillerWidthPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divRightFiller, { style: 'width: ' + sideFillerWidthPx + 'px', duration: 0.5 });
        
        // Adjust lintel
        this.divLintel.setStyle({backgroundImage: 'url(/images/mantel' + this.imgLintel + ')', width: this.lintelWidthPx + 'px'});
        this.divLintelSide.setStyle({backgroundImage: 'url(/images/mantel' + this.imgLintelSide + ')'});
        new Effect.Morph(this.divLintel, { style: 'height: ' + this.lintelHeightPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divLintelSide, { style: 'height: ' + this.lintelHeightPx + 'px', duration: 0.5 });
        
        
        new Effect.Morph(this.divLegLeft, { style: 'height: ' + (newLegHeightPx + this.legTopOffsetPx) + 'px; width: ' + this.legWidthPx + 'px; top: ' + (this.lintelHeightPx - this.legTopOffsetPx)  + 'px; left: ' + this.legSideOffsetPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divLegRight, { style: 'height: ' + (newLegHeightPx + this.legTopOffsetPx) + 'px; width: ' + this.legWidthPx + 'px; top: ' + (this.lintelHeightPx - this.legTopOffsetPx) + 'px; right: ' + this.legSideOffsetPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divLegSide, { style: 'height: ' + newLegHeightPx + 'px; margin-top: -' + this.legTopOffsetPx + 'px', duration: 0.5 });
        
        new Effect.Morph(this.divBody, { style: 'height: ' + totalLegHeightPx + 'px; width: ' + adjustedBodyWidthPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divFiller, { style: 'height: ' + totalLegHeightPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divTopFiller, { style: 'height: ' + topFillerHeightPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divBottomFiller, { style: 'height: ' + bottomFillerHeightPx + 'px; width: ' + adjustedBodyWidthPx + 'px', duration: 0.5 });
        
        if (topFillerHeightPx < 1) { this.divTopFiller.hide(); } else { this.divTopFiller.show(); }
        
        // Adjust plinths
        this.divPlinthLeft.setStyle({backgroundImage: 'url(/images/mantel' + this.imgPlinthLeft + ')'})
        this.divPlinthRight.setStyle({backgroundImage: 'url(/images/mantel' + this.imgPlinthRight + ')'})
        this.divPlinthSide.setStyle({backgroundImage: 'url(/images/mantel' + this.imgPlinthSide + ')'});
        new Effect.Morph(this.divPlinthLeft, { style: 'top: ' + (newLegHeightPx + this.legTopOffsetPx) + 'px; width: ' + this.plinthWidthPx + 'px; height: ' + this.plinthHeightPx + 'px; left: -' + this.plinthOffsetPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divPlinthRight, { style: 'top: ' + (newLegHeightPx + this.legTopOffsetPx) + 'px; width: ' + this.plinthWidthPx + 'px; height: ' + this.plinthHeightPx + 'px; right: -' + this.plinthOffsetPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divPlinthSide, { style: 'height: ' + this.plinthHeightPx + 'px', duration: 0.5 });
        
        new Effect.Morph(this.divHearth, { style: 'width: ' + this.riserWidthPx + 'px', duration: 0.5 });
             
        
        if (newRiserHeightPx == 0) {
            this.divRiser.hide();
            this.divRiserSide.hide();
        } else {
            this.divRiser.show();
            this.divRiserSide.show();
        }
        new Effect.Morph(this.divRiser, { style: 'height: ' + newRiserHeightPx + 'px; width: ' + (this.riserWidthPx - 2) + 'px', duration: 0.5 });
        new Effect.Morph(this.divRiserSide, { style: 'height: ' + newRiserHeightPx + 'px', duration: 0.5 });
        
        var newHearthDepthPx = this.hearthDepth * Mantels.PPI;
        new Effect.Morph(this.divHearthSide, { style: 'width: ' + newHearthDepthPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divRiserSide, { style: 'width: ' + newHearthDepthPx + 'px', duration: 0.5 });
        
        
        new Effect.Morph(this.divFrontView, { style: 'height: ' + roomHeightPx + 'px', duration: 0.5 });
        new Effect.Morph(this.divSideView, { style: 'height: ' + roomHeightPx + 'px', duration: 0.5 });
        
        this.adjustSidePlinth();
        this.refreshPartsList();
        
        if (mantelBuilder && mantelBuilder.divMeasurements.visible()) {
            var totalMantelHeightPx = this.lintelHeightPx + totalLegHeightPx + hearthHeightPx + newRiserHeightPx;
            var mantelTopOffset = roomHeightPx - totalMantelHeightPx;
            
            // Lintel width           
            var mantelWidthPx = this.lintelWidthPx;
            var mantelWidthIn = Math.round(mantelWidthPx / Mantels.PPI);
            mantelBuilder.rulerMantelWidth.down('.text').innerHTML = mantelWidthIn + "&rdquo;";
            new Effect.Morph(mantelBuilder.rulerMantelWidth, { style: 'margin-top:' + (mantelTopOffset-11) + 'px; width: ' + mantelWidthPx + 'px; opacity: 1.0;', duration: 0.5 });
            
            // Riser width           
            var riserWidthIn = Math.round(this.riserWidthPx / Mantels.PPI);
            var riserRulerOffset = roomHeightPx - (this.riserHeight * Mantels.PPI) - hearthHeightPx;
            mantelBuilder.rulerRiserWidth.down('.text').innerHTML = riserWidthIn + "&rdquo;";
            new Effect.Morph(mantelBuilder.rulerRiserWidth, { style: 'margin-top:' + (riserRulerOffset-9) + 'px; width: ' + this.riserWidthPx + 'px; opacity: 1.0;', duration: 0.5 });
            
            // Leg spacing
            var legSpacingIn = this.fireBoxWidthMax;
            var legSpacingPx = legSpacingIn * Mantels.PPI;
            var legSpacingRulerOffset = roomHeightPx - (this.riserHeight * Mantels.PPI) - hearthHeightPx - (totalLegHeightPx / 2);
            mantelBuilder.rulerLegSpacing.down('.text').innerHTML = legSpacingIn + "&rdquo;";
            new Effect.Morph(mantelBuilder.rulerLegSpacing, { style: 'margin-top:' + (legSpacingRulerOffset-9) + 'px; width: ' + legSpacingPx + 'px; opacity: 1.0;', duration: 0.5 });
            
            // Whole system height
            var mantelHeightText = mantelBuilder.rulerMantelHeight.down('.text');
            var mantelHeightIn = Math.round(totalMantelHeightPx / Mantels.PPI);
            var systemHeightRulerOffsetPx = Math.round((this.divFrontView.getWidth() - mantelWidthPx) / 2);
            mantelHeightText.innerHTML = mantelHeightIn + "&rdquo;";
            new Effect.Morph(mantelBuilder.rulerMantelHeight, { style: 'margin-top:' + (mantelTopOffset) + 'px; margin-left: ' + (systemHeightRulerOffsetPx - 8) + 'px; height: ' + totalMantelHeightPx + 'px; opacity: 1.0;', duration: 0.5 });
            new Effect.Morph(mantelHeightText, { style: 'margin-top:' + (totalMantelHeightPx/3) + 'px;', duration: 0.5 });
            
            // Side lintel depth
            var lintelDepthIn = Math.round(this.lintelSideWidthPx / Mantels.PPI);
            mantelBuilder.rulerSideLintel.down('.text').innerHTML = lintelDepthIn + "&rdquo;";
            new Effect.Morph(mantelBuilder.rulerSideLintel, { style: 'margin-top:' + (mantelTopOffset-11) + 'px; width: ' + this.lintelSideWidthPx + 'px; opacity: 1.0;', duration: 0.5 });
            
        }
        
        
    },
    
    adjustSidePlinth: function() {
        new Effect.Morph(this.divPlinthSide, { style: 'width: ' + 156 + 'px', duration: 0.5 });
    },
    
    getRoomLeftForFireBox: function() {
        var newLegHeightPx = this.legHeight * Mantels.PPI;
        var totalLegHeightPx = newLegHeightPx + this.plinthHeightPx;
        var bottomFillerHeightPx = this.bottomFillerHeight * Mantels.PPI;
        var roomLeftForFireBoxPx = totalLegHeightPx - bottomFillerHeightPx;
        var roomLeftForFireBoxIn = Math.floor(roomLeftForFireBoxPx / Mantels.PPI);
        return roomLeftForFireBoxIn;       
    },
    
    getLegRoomForFireBox: function() {
        var roomLeftWithoutExpansion = this.getRoomLeftForFireBox();
        var legRoomLeft = roomLeftWithoutExpansion + (this.maxLegHeight - this.legHeight);
        return legRoomLeft;
    },
      
    makeRoomForFireBox: function(wantedFireBoxHeight) {
        var spaceLeftForFireBoxWithoutLegExpansion = this.getRoomLeftForFireBox();
        var spaceAvailableForFireBoxWithLegExpasion = this.getLegRoomForFireBox();
        
        if (wantedFireBoxHeight > spaceAvailableForFireBoxWithLegExpasion) {
            wantedFireBoxHeight = spaceAvailableForFireBoxWithLegExpasion;
        }
        
        var legInchesHidden = this.maxLegHeight - this.legHeight;
        if (wantedFireBoxHeight > spaceLeftForFireBoxWithoutLegExpansion && legInchesHidden > 0) {
            var raiseLegBy = wantedFireBoxHeight - spaceLeftForFireBoxWithoutLegExpansion;
            this.legHeight += raiseLegBy;
            
            mantelBuilder.sliderValueMantelHeight.innerHTML = this.legHeight + '"';
            new Effect.Highlight(mantelBuilder.sliderValueMantelHeight, { duration: 1.0, startcolor: '#ffff99', endcolor: '#ffffff', restorecolor: '#ffffff' });
            mantelBuilder.sliderLegHeight.setValue(this.legHeight);
        }
    },
    
    refreshPartsList: function() {
        var noteNum = 1;
    
        this.alt = false;  
        var partsTable = '<table><caption>Part list</caption><tr><th scope="col" style="width:3%;">Qty</th><th scope="col" style="width: 17%;">Part #</th><th scope="col" style="width:80%;">Description</th><th scope="col" style="width:5%; text-align:center;">Notes</th><th scope="col" style="width:5%;">Misc</th></tr>';
        var notesList = '';
        
        // Main system
        partsTable += this.formPartRow(1, this.partCode, this.partFamily + ' fireplace mantel system', 'Included');
        
        // Legs
        partsTable += this.formPartRow(2, this.partCode + '200', 'Legs', 'Included');
        
        // Plinth blocks
        partsTable += this.formPartRow(1, this.partCode + '600', 'Left plinth block', 'Included');
        partsTable += this.formPartRow(1, this.partCode + '625', 'Right plinth block', 'Included');
        
        // Fillers
        partsTable += this.formPartRow(3, 'FL06X49', '6" x 49" Fillers', 'Included');
        partsTable += this.formPartRow(1, 'FL12X49', '12" x 49" Filler', 'Included');
        
        // Hearth
        partsTable += this.formPartRow(1, 'H1OG020', 'Hearth', 'Included');
        
        if (this.riserHeight > 0) {
            partsTable += this.formPartRow(1, 'MC44814', '5pc. Riser Package', 'Optional', noteNum);
            notesList += '<li><sup>' + noteNum + '</sup> Includes 8pc. 12 1/8"H x 72 1/4"W x 18 5/8"D finished raised hearth box (unassembled).</li>';
            noteNum++;
        }
        
        var attachmentList = '<ul>';
        var attachments = this.attachments;
        if (attachments) {
            for (var i=0; i<attachments.files.length; i++) {
                var attachment = attachments.files[i];
                attachmentList += '<li><a href="' + attachment + '">Specifications (' + surroundCode + ')</a></li>';
            }
        }
        attachmentList += '<li><a href="/Files/VillaStone - Fireplace Mantel Measurement Sheet.pdf">Measurement Sheet</a></li>';
        attachmentList += '</ul>';
        $('attachmentList').innerHTML = attachmentList;
        
        partsTable += '</table>';
        $('partTable').innerHTML = partsTable;
        
        if (notesList != '') {
            notesList = '<ul>' + notesList + '</ul>';
        }
        $('noteList').innerHTML = notesList;
    },
    
    formPartRow: function(qty, part, description, notes, other) {
        if (notes == 'Optional') {
            notes = '<span class="optional">' + notes + '</span>';
        }
    
        notes = notes || '';
        var altClass = this.alt ? ' class="alt"' : '';
        this.alt = !this.alt;
        return '<tr' + altClass + '><td class="center">1</td><td>' + part + '</td><td>' + description + '</td><td class="center notes">' + notes + '</td><td class="center"><sup>' + (other ? other : '') + '</sup></td></tr>';    
    }
});

VillaStone.MonacoMantel = Class.create(VillaStone.BaseMantel, {
    initialize: function($super) {
        this.showInlay = true;
        this.partCode = 'MC44200'; 
        this.partFamily = 'Monaco';
        this.partFamilyPrefix = 'MC';
        $super();
    }    
});

VillaStone.Monaco1Mantel = Class.create(VillaStone.MonacoMantel, {
    initialize: function($super) {
        $super();
        
        this.imgTopFiller = '/monaco_top_filler_a.jpg';
    }    
});

VillaStone.Monaco2Mantel = Class.create(VillaStone.MonacoMantel, {
    initialize: function($super) {
        $super();
        
        this.imgLegLeft = '/monaco_leg_b.jpg';
        this.imgLegRight = '/monaco_leg_b.jpg';
        this.imgLegSide = '/monaco_leg_b_side.jpg';
        this.imgPlinthSide = '/monaco_plinth_b_side.jpg';
    },
    
    adjustSidePlinth: function() {
        var map = { 20: 175, 21: 175, 22: 175, 23: 175, 24: 175, 25: 175, 26: 175, 27: 174, 28: 174, 29: 174, 30: 173, 31: 173, 32: 172, 33: 171, 34: 171, 35: 170, 36: 169, 37: 168, 38: 168, 39: 167, 40: 166  };
        var plinthWidthPx = map[this.legHeight] || 156;
        new Effect.Morph(this.divPlinthSide, { style: 'width: ' + plinthWidthPx + 'px', duration: 0.5 });
    }
});

VillaStone.FairmontMantel = Class.create(VillaStone.BaseMantel, {
    initialize: function($super) {
        $super();
        
        this.partFamily = 'Fairmont';
        this.partFamilyPrefix = 'FA';
        
        
        this.bodyWidthPx = 215;
        
        this.legWidthPx = 41;
        this.imgLegLeft = '/fairmont_leg_left.jpg';
        this.imgLegRight = '/fairmont_leg_right.jpg';
        this.imgLegSide = '/fairmont_leg_side.jpg';
        
        // Plinth
        this.imgPlinthLeft = '/fairmont_plinth.jpg',
        this.imgPlinthRight = '/fairmont_plinth.jpg',
        this.imgPlinthSide = '/fairmont_plinth_side.jpg',
        this.plinthHeightPx = 31;
        this.plinthWidthPx = 44;
        this.plinthOffsetPx = 3;
        
        // Lintel
        this.imgLintel = '/fairmont_43_lintel.jpg';
        this.imgLintelSide = '/fairmont_lintel_side.jpg';
        this.lintelWidthPx = 327;
        this.lintelHeightPx = 66;
        this.lintelSideWidthPx = 34;
        
        this.riserWidthPx = 329;
        
        this.bottomFillerHeight = 6.25;
    }    
});

VillaStone.Fairmont43Mantel = Class.create(VillaStone.FairmontMantel, {
    initialize: function($super) {
        this.partCode = 'FA43800'; 
        
        this.fireBoxWidthMax = 43;
        
        $super();
    }    
});

VillaStone.Fairmont38Mantel = Class.create(VillaStone.FairmontMantel, {
    initialize: function($super) {
        $super();
        
        this.partCode = 'FA38800'; 
        
        this.bodyWidthPx = 191;
        this.imgLintel = '/fairmont_38_lintel.jpg';
        this.lintelWidthPx = 303;
        this.riserWidthPx = 299;
        
        this.fireBoxWidthMax = 38;
    }    
});

VillaStone.ArabesqueMantel = Class.create(VillaStone.BaseMantel, {
    initialize: function($super) {
        $super();
        
        this.partFamily = 'Arabesque';
        this.partFamilyPrefix = 'AR';
        
        this.bodyWidthPx = 235;
        
        this.legWidthPx = 53;
        this.imgLegLeft = '/arabesque_44_leg.gif';
        this.imgLegRight = '/arabesque_44_leg.gif';
        this.imgLegSide = '/arabesque_44_leg_side.jpg';
        
        // Plinth
        this.imgPlinthLeft = '/arabesque_44_plinth.gif',
        this.imgPlinthRight = '/arabesque_44_plinth.gif',
        this.imgPlinthSide = '/arabesque_44_plinth_side.jpg',
        this.plinthHeightPx = 41;
        this.plinthWidthPx = 57;
        this.plinthOffsetPx = 3;
        
        // Lintel
        this.imgLintel = '/arabesque_44_lintel.jpg';
        this.imgLintelSide = '/arabesque_44_lintel_side.jpg';
        this.lintelWidthPx = 357;
        this.lintelHeightPx = 57;
        this.lintelSideWidthPx = 44;
        
        this.riserWidthPx = 358;
    }    
});

VillaStone.Arabesque38Mantel = Class.create(VillaStone.ArabesqueMantel, {
    initialize: function($super) {
        $super();
        
        this.partCode = 'AR38'; 
        
        this.bodyWidthPx = 203;
        
        this.legWidthPx = 47;
        this.imgLegLeft = '/arabesque_38_leg.gif';
        this.imgLegRight = '/arabesque_38_leg.gif';
        this.imgLegSide = '/arabesque_38_leg_side.jpg';
        
        this.legTopOffsetPx = 1;
        this.legSideOffsetPx = 12;
        
        // Plinth
        this.imgPlinthLeft = '/arabesque_38_plinth.gif',
        this.imgPlinthRight = '/arabesque_38_plinth.gif',
        this.imgPlinthSide = '/arabesque_38_plinth_side.jpg',
        this.plinthHeightPx = 34;
        this.plinthWidthPx = 49;
        this.plinthOffsetPx = 1;
        
        // Lintel
        this.imgLintel = '/arabesque_38_lintel.jpg';
        this.imgLintelSide = '/arabesque_38_lintel_side.jpg';
        this.lintelWidthPx = 307;
        this.lintelHeightPx = 57;
        
        this.riserWidthPx = 298;
        
        this.fireBoxWidthMax = 40;
    }    
});

VillaStone.Arabesque44Mantel = Class.create(VillaStone.ArabesqueMantel, {
    initialize: function($super) {
        $super();
        
        this.partCode = 'AR44'; 
        
        this.fireBoxWidthMax = 47;
        this.legSideOffsetPx = 14;
    }    
});

VillaStone.MantelBuilder = Class.create({
    divMeasurements: false,
    divSideMeasurements: false,
    allRulers: false,
    
    rulerMantelWidth: false,
    rulerMantelHeight: false,
    rulerRiserWidth: false,
    rulerLegSpacing: false,
    
    rulerSideLintel: false,
    
    mantels: false,
    activeMantel: false,
    
    inlayInfo: {
        'flatstock':            { part: 'ILFS',     name: 'Flat Stock Inlay',                           gallery: [] },
        'arabesque':            { part: 'ILAR',     name: 'Arabesque Inlay',                            gallery: [] },                  
        'grape':                { part: 'ILGV',     name: 'Grape Vine Inlay',                           gallery: ['01.jpg', '11.jpg'] },
        'floral':               { part: 'ILFL',     name: 'Floral Inlay',                               gallery: ['06.jpg', '10.jpg'] },
        'floral_shell':         { part: 'ILSK-FL',  name: 'Shell Keystone - Floral Inlay',              gallery: ['03.jpg', '04.jpg', '08.jpg', '09.jpg' ] },
        'fleurdelis':           { part: 'ILFK-FS',  name: 'Fleur-de-lis Keystone - Flat Stock Inlay',   gallery: ['05.jpg'] },
        'arabesque_keystone':   { part: 'ILFK-AR',  name: 'Fleur-de-lis Keystone - Arabesque Inlay',    gallery: ['07.jpg'] }
    },
    
    initialize: function() {
        this.monacoMantel = new VillaStone.MonacoMantel(this);
        this.activeMantel = this.monacoMantel;
        
        var choices = $('mantelStyleChoices').select('li a');
        for (var i=0; i<choices.length; i++) {
            choices[i].observe('click', function(e) { e.stop(); this.chooseStyle(e.element()); }.bind(this));
        }
        
        this.mantels = new Hash();
        
        this.sliderValueFireBoxHeight = $('sliderValueFireBoxHeight');
        this.sliderValueFireBoxWidth = $('sliderValueFireBoxWidth');
        this.sliderValueFireBoxElevation = $('sliderValueFireBoxElevation');
        this.sliderValueMantelHeight = $('sliderValueLegHeight');
        this.sliderValueRiserHeight = $('sliderValueRiserHeight');
        this.sliderValueHearthDepth = $('sliderValueHearthDepth');
        this.sliderValueRoomHeight = $('sliderValueRoomHeight');
        
        this.sliderRoomHeight = new Control.Slider('handleRoomHeight', 'sliderRoomHeight', { 
            sliderValue: this.activeMantel.roomHeight,
            values: $R(8,12),
            range: $R(8,12),
            onSlide: function(heightInFeet){
                this.sliderValueRoomHeight.innerHTML = heightInFeet + '\'';
            }.bind(this),
            onChange: function(heightInFeet){
                this.sliderValueRoomHeight.innerHTML = heightInFeet + '\'';
                
                if (heightInFeet != this.activeMantel.roomHeight) {
                    this.activeMantel.roomHeight = heightInFeet;
                    this.activeMantel.refresh();
                }
            }.bind(this)
        });
        
        this.sliderFireBoxHeight = new Control.Slider('handleFireBoxHeight', 'sliderFireBoxHeight', { 
            sliderValue: this.activeMantel.fireBoxHeight,
            values: $R(20,48),
            range: $R(20,48),
            onSlide: function(heightInInches){
                var roomLeftForFireBoxIn = this.activeMantel.getLegRoomForFireBox();
              
                // If the firebox won't fit, show an error
                if (roomLeftForFireBoxIn < heightInInches) {
                    this.sliderValueFireBoxHeight.addClassName('invalid');
                } else {
                    this.sliderValueFireBoxHeight.removeClassName('invalid');
                }
                
                this.sliderValueFireBoxHeight.innerHTML = heightInInches + '"';
            }.bind(this),
            onChange: function(heightInInches){
                var spaceAvailableForFireBoxWithLegExpasion = this.activeMantel.getLegRoomForFireBox();
                
                if (heightInInches > spaceAvailableForFireBoxWithLegExpasion) {
                    heightInInches = spaceAvailableForFireBoxWithLegExpasion;
                    this.sliderFireBoxHeight.setValue(heightInInches);
                }
                
                this.activeMantel.makeRoomForFireBox(heightInInches);
                
                if (heightInInches != this.activeMantel.fireBoxHeight) {
                    this.activeMantel.fireBoxHeight = heightInInches;
                }
                
                this.activeMantel.refresh();
                this.sliderValueFireBoxHeight.removeClassName('invalid');
            }.bind(this)
        });
        
        this.sliderFireBoxWidth = new Control.Slider('handleFireBoxWidth', 'sliderFireBoxWidth', { 
            sliderValue: this.activeMantel.fireBoxWidth,
            values: $R(30,50),
            range: $R(30,50),
            onSlide: function(widthInInches){
                this.sliderValueFireBoxWidth.innerHTML = widthInInches + '"';
            
                if (widthInInches <= this.activeMantel.fireBoxWidthMax) {
                    this.sliderValueFireBoxWidth.removeClassName('invalid');    
                } else {
                    this.sliderValueFireBoxWidth.addClassName('invalid');
                    //this.sliderFireBoxWidth.setValue(this.activeMantel.fireBoxWidthMax);
                }
            }.bind(this),
            onChange: function(widthInInches){
                if (widthInInches > this.activeMantel.fireBoxWidthMax) {
                    widthInInches = this.activeMantel.fireBoxWidthMax;
                    this.sliderFireBoxWidth.setValue(widthInInches);
                }
                
                this.sliderValueFireBoxWidth.innerHTML = widthInInches + '"';
                this.sliderValueFireBoxWidth.removeClassName('invalid');
            
                if (widthInInches != this.activeMantel.fireBoxWidth) {
                    this.activeMantel.fireBoxWidth = widthInInches;
                    this.activeMantel.refresh();
                    
                }
            }.bind(this)
        });
        
        var minElevation = 0.0;
        var maxElevation = 10;
        var increment = 0.25;
        var elevationValues = [];
        for (var i=minElevation; i<=maxElevation; i+=increment) {
            elevationValues.push(i);
        }
        
        this.sliderFireBoxElevation = new Control.Slider('handleFireBoxElevation', 'sliderFireBoxElevation', { 
            sliderValue: this.activeMantel.bottomFillerHeight,
            values: elevationValues,
            range: $R(minElevation,maxElevation),
            onSlide: function(heightInInches){
                this.sliderValueFireBoxElevation.innerHTML = this.convertToFraction(heightInInches) + '"';
            }.bind(this),
            onChange: function(heightInInches){
                this.sliderValueFireBoxElevation.innerHTML = this.convertToFraction(heightInInches) + '"';
            
                if (heightInInches != this.activeMantel.bottomFillerHeight) {
                    this.activeMantel.bottomFillerHeight = heightInInches;    
                }
                
                var spaceAvailableForFireBoxWithLegExpasion = this.activeMantel.getLegRoomForFireBox();
                if (this.activeMantel.fireBoxHeight > spaceAvailableForFireBoxWithLegExpasion) {
                    this.activeMantel.fireBoxHeight = spaceAvailableForFireBoxWithLegExpasion;
                }
                this.activeMantel.makeRoomForFireBox(this.activeMantel.fireBoxHeight);
                
                //var roomLeftForFireBoxIn = this.activeMantel.getRoomLeftForFireBox();
                //if (roomLeftForFireBoxIn < this.activeMantel.fireBoxHeight) {
                //    this.activeMantel.fireBoxHeight = roomLeftForFireBoxIn;
                //    this.sliderFireBoxHeight.setValue(roomLeftForFireBoxIn);
                //    new Effect.Highlight(this.sliderValueFireBoxHeight, { duration: 1.0 });
                //}
                
                this.activeMantel.refresh();    
            }.bind(this)
        });
        
        this.sliderLegHeight = new Control.Slider('handleMantelHeight', 'sliderMantelHeight', { 
            sliderValue: this.activeMantel.legHeight,
            values: $R(20,40),
            range: $R(20,40),
            onSlide: function(heightInInches){
                this.sliderValueMantelHeight.innerHTML = heightInInches + '"';
            }.bind(this),
            onChange: function(heightInInches){
                if (heightInInches != this.activeMantel.legHeight) {
                    this.sliderValueMantelHeight.innerHTML = heightInInches + '"';
                    this.activeMantel.legHeight = heightInInches;
                    this.activeMantel.refresh();
                }
            }.bind(this)
        });
        
        this.sliderRiserHeight = new Control.Slider('handleRiserHeight','sliderRiserHeight', { 
            sliderValue: this.activeMantel.riserHeight,
            minimum: 0,
            maximum: 16,
            values: $R(0,16),
            range: $R(0,16),
            onSlide: function(heightInInches){
                this.sliderValueRiserHeight.innerHTML = heightInInches + '"';
            }.bind(this),
            onChange: function(heightInInches){
                if (heightInInches != this.activeMantel.riserHeight) {
                    this.sliderValueRiserHeight.innerHTML = heightInInches + '"';
                    this.activeMantel.riserHeight = heightInInches;
                    this.activeMantel.refresh();
                }
            }.bind(this)
        });
        
        this.sliderHearthDepth = new Control.Slider('handleHearthDepth','sliderHearthDepth', { 
            sliderValue: this.activeMantel.hearthDepth,
            minimum: 16,
            maximum: 20,
            values: $R(16,20),
            range: $R(16,20),
            onSlide: function(depthInInches){
                this.sliderValueHearthDepth.innerHTML = depthInInches + '"';
            }.bind(this),
            onChange: function(depthInInches){
                if (depthInInches != this.activeMantel.hearthDepth) {
                    this.sliderValueHearthDepth.innerHTML = depthInInches + '"';
                    this.activeMantel.hearthDepth = depthInInches;
                    this.activeMantel.refresh();
                }
            }.bind(this)
        });
        
        // Build inlay selector and select default
        var inlaySelect = $('inlay_select');
        var inlayChoices = inlaySelect.select('.inlay a');
        for (var i = 0; i<inlayChoices.length; i++) {
            inlayChoices[i].observe('click', function(e) {
                e.stop()
                this.selectInlay(e.element());
            }.bind(this));
        }
        this.selectInlay($('defaultInlay'));
        
        // Specify defautl style
        this.chooseStyle($('defaultStyle'));
        
        // Bind 'Crown Moulding' checkbox events
        var checkPainting = $('checkPainting');
        checkPainting.checked = true;
        checkPainting.observe('click', function(e) {
            this.togglePainting(e.element());
        }.bind(this));
        this.togglePainting(checkPainting);
        
        this.divMeasurements = $('measurements');
        this.divSideMeasurements = $('sideMeasurements');
        this.allRulers = this.divMeasurements.up('div.builderPage').select('div.ruler');
        this.rulerMantelWidth = $('rulerMantelWidth');
        this.rulerMantelHeight = $('rulerMantelHeight');
        this.rulerRiserWidth = $('rulerRiserWidth');
        this.rulerLegSpacing = $('rulerLegSpacing');
        
        this.rulerSideLintel = $('rulerSideLintel');
        
        // Bind 'Show Measurements' checkbox events
        var linkMeasurements = $('linkShowMeasurements');
        linkMeasurements.observe('click', function(e) {
            this.toggleMeasurements(e.element());
        }.bind(this));
    },
    
    convertToFraction: function(dec) {
        return dec.toFixed(2);
    
        var wholeNum = Math.floor(dec);
        var fraction = dec - wholeNum;
        
        var val = wholeNum + '';
        
        if (fraction == 0.25) val += '&frac14;';
        else if (fraction = 0.5) val += '&frac12;';
        else if (fraction == 0.75) val += '&frac34;';
        
        return val;
    },
    
    chooseStyle: function(linkClicked) {
        var list = linkClicked.up('ul');
        list.select('li a.selected').each(function(link) { link.removeClassName('selected'); });
        linkClicked.addClassName('selected');
        
        var styleKey = linkClicked.rel;
        var typeName = styleKey + 'Mantel';
        var existingInstance = this.mantels.get(typeName);
        if (!existingInstance) {
            existingInstance = new VillaStone[typeName]();
            this.mantels.set(typeName, existingInstance);
        }
        
        this.activeMantel = existingInstance;        
        
        var inlaySelect = $('inlay_select');
        if (this.activeMantel.showInlay && !inlaySelect.visible()) {
            Effect.BlindDown(inlaySelect, { duration: 0.75 });
        } else if (!this.activeMantel.showInlay && inlaySelect.visible()) {
            Effect.BlindUp(inlaySelect, { duration: 0.75 });
        }
        
        this.activeMantel.refresh();
    },
    
    selectInlay: function(link) {
        if (link.tagName != 'A') link = link.up();
        var div = link.up();
        
        div.up().select('div.inlay').each(function(d) { d.removeClassName('sel'); });
        div.addClassName('sel');
        
        $('inlayName').innerHTML = link.title;
        
        [this.activeMantel.divInlay, this.activeMantel.divInlaySide].each(function(div) {
            div.setStyle({
                backgroundImage: 'url(/images/inlays/' + link.rel + '.jpg)',
                opacity: 0.5
            });    
        });
        
        Effect.multiple([this.activeMantel.divInlay,this.activeMantel.divInlaySide], Effect.Appear, { duration: 0.5 });
    },
    
    togglePainting: function(checkbox) {
        var showPainting = checkbox.checked;
        var paintingDivs = [this.activeMantel.divPainting, this.activeMantel.divSidePainting];
        
        if (showPainting) {
            Effect.multiple(paintingDivs, Effect.Appear, { duration: 0.5, from: 0.0, to: 1.0 });
        } else {
            Effect.multiple(paintingDivs, Effect.Fade, { duration: 0.5, from: 1.0, to: 0.0 });
        }
    },
    
    toggleMeasurements: function(link) {
        if (!link.hasClassName('enabled')) {
            this.divMeasurements.show();
            this.divSideMeasurements.show();
            link.addClassName('enabled');
            link.innerHTML = 'Hide Measurements';
            Effect.Appear(this.divMeasurements.down('.overlay'), {from: 0.0, to: 0.4});
            Effect.Appear(this.divSideMeasurements.down('.overlay'), {from: 0.0, to: 0.4});
            
            this.activeMantel.refresh();
        } else {
            link.removeClassName('enabled');
            link.innerHTML = 'Show Measurements';
            
            for (var i=0; i<this.allRulers.length; i++) { 
                var ruler = this.allRulers[i];
                if (ruler.hasClassName('measure_x'))
                    new Effect.Morph(ruler, { style: 'margin-top: 0px; width: 30px; opacity: 0.0;', duration: 0.5 });
                else if (ruler.hasClassName('measure_y')) {
                    new Effect.Morph(ruler, { style: 'margin-right:0px; margin-left:0px; margin-top:0px; height: 30px; opacity: 0.0;', duration: 0.5 });
                    new Effect.Morph(ruler.down('.text'), { style: 'margin-top:10px;', duration: 0.5 });
                }
            }
            
            Effect.Fade(this.divMeasurements.down('.overlay'), {from:0.4, to: 0.0, duration: 0.5, afterFinish: function() { this.divMeasurements.hide(); }.bind(this)});
            Effect.Fade(this.divSideMeasurements.down('.overlay'), {from:0.4, to: 0.0, duration: 0.5});
        }
    }
});