general.namespace('SW.Controls');

(function () {

    var AnimationSelectionControl = SW.Controls.AnimationSelectionControl = function () {        
        $id('map-control-subcontainer').appendChild(
            this.controlContainer = 
            $C('table', {borderCollapse: 'collapse'}, {id: 'map-controls', classes: 'no-select', cellpadding: 0, cellspacing: 2, border: 0},
                this.buttonContainer =
                $C('tr', {height: '39px'},
                    $C('td', {width: '50px', backgroundColor: '#8e8c7b'},
                        $C('img', {margin: '2px 4px 0px 4px'}, {id: 'map-thumper', src: '/assets/images/loading-map-still.gif', alt: '', width: '32', height: '32'})
                    ),
                    this.divisor =
                    $C('td', {width: '12px', backgroundColor: '#8e8c7b', cursor: 'default'}),
                    this.offButton = 
                    $C('td', {width: '44px'}, {title: 'Hide forecast imagery.'},
                        $C('div', null, {html: 'Off'})
                    ),
                    this.heightButton = 
                    $C('td', {width: '58px'}, {title: 'Show swell height forecast imagery.'},
                        $C('div', null, {html: 'Swell'})
                    ),
                    this.periodButton = 
                    $C('td', {width: '64px'}, {title: 'Show period forecast imagery.'},
                        $C('div', null, {html: 'Period'})
                    ),
                    this.windButton = 
                    $C('td', {width: '54px'}, {title: 'Show wind forecast imagery.'},
                        $C('div', {borderRight: '1px solid #524A3E'}, {html: 'Wind'})
                    ),
                    this.perspectiveButton = 
                    $C('td', {width: '42px'}, {title: 'Show 3D swell height forecast imagery.'},
                        $C('div',
                            $C('img', null, {src: '/assets/images/btn-3d-tab-off.gif'})
                        )
                    )
                )
            )
        );
        
        this.menuItemsByAnimType = {
            off: {
                element: this.offButton,
                selectAnim: function () { mapGeneral.centerAndZoomOnRegionAnimation(null, 'off'); }
            },
            height: {
                element: this.heightButton,
                selectAnim: function () { mapGeneral.centerAndZoomOnRegionAnimation(null, 'height'); }
            },
            period: {
                element: this.periodButton,
                selectAnim: function () { mapGeneral.centerAndZoomOnRegionAnimation(null, 'period'); }
            },
            wind: {
                element: this.windButton,
                selectAnim: function () { mapGeneral.centerAndZoomOnRegionAnimation(null, 'wind'); },
                rightmostButton: true
            },
            perspective: {
                element: this.perspectiveButton,
                selectAnim: function () {
                    SWMap.regionTrail.display3D();
                },
                click: function (item, clickedItem) {
                    if (item === clickedItem) {
                        item.selectAnim(); 
                    }
                },
                mouseover: function (item) { item.element.firstChild.firstChild.src = '/assets/images/btn-3d-tab-on.gif'},
                mouseout: function (item) { item.element.firstChild.firstChild.src = '/assets/images/btn-3d-tab-off.gif' },
                rightmostButton: false
            }
        };
        
        this.hide3DButton();        
    };
    AnimationSelectionControl.prototype.constructor = AnimationSelectionControl;

    /**/  
    AnimationSelectionControl.prototype.setButtonTooltips = function (regionName) {
        this.windButton.title = 'Show ' + regionName + ' wind imagery';
        this.periodButton.title = 'Show ' + regionName + ' wave period imagery';
        this.heightButton.title = 'Show ' + regionName + ' swell height imagery';
        this.perspectiveButton.title = 'Show ' + regionName + ' 3D swell height imagery';
    };    

    /**/  
    AnimationSelectionControl.prototype.setHighlightedButton = function (type) {
        var selectedItem = this.selectedItem = this.menuItemsByAnimType[type];
        if (selectedItem) {
            this.fancyMenu.selectedItem = selectedItem;
            for (var i in this.menuItemsByAnimType) {
                var item = this.menuItemsByAnimType[i];
                if (item === selectedItem) {
                    this.selected(item);
                }
                else {
                    this.unselected(item);
                }
            }     
        }
    };
    
    /**/  
    AnimationSelectionControl.prototype.display3DButton = function () {
        this.menuItemsByAnimType.perspective.rightmostButton = true;
        this.menuItemsByAnimType.wind.rightmostButton = false;
        var wind = this.menuItemsByAnimType.wind;
        if (this.selectedItem === wind) {
            this.selected(wind);
        }
        else {
            this.unselected(wind);
        }
        this.perspectiveButton.style.display = 'block';
        this.perspectiveButton.firstChild.style.borderRight = '1px solid #524A3E';
        this.divisor.style.width = '12px';
    };
    
    /**/  
    AnimationSelectionControl.prototype.hide3DButton = function () {
        this.menuItemsByAnimType.perspective.rightmostButton = false;
        this.menuItemsByAnimType.wind.rightmostButton = true;
        this.perspectiveButton.style.display = 'none';
        this.windButton.firstChild.style.borderRight = '1px solid #524A3E';
        this.divisor.style.width = '54px';
    };

    /**/
    AnimationSelectionControl.prototype.setupHandlers = function () {
        var me = this;
        
        var selected = this.selected = function (item) {
            var ele = item.element.firstChild;
            ele.style.color = '#FFCC66';
            ele.style.borderColor = '#665C4E rgb(82, 74, 62) rgb(82, 74, 62)';
            ele.style.background = '#665C4E url(/assets/images/background_map_nav.gif) repeat-x scroll center bottom';    
        }
        
        var unselected = this.unselected = function (item) {
            var ele = item.element.firstChild;
            ele.style.color = '';
            ele.style.borderColor = '';
            if (item.rightmostButton) {
                ele.style.borderRight = '1px solid #524A3E';
            }            
            ele.style.background = '';
        }
        
        function mouseout (outItem, selectedItem) {
            if (outItem === selectedItem) { // selected hover off
                selected(outItem);
            }
            else { // unselected hover off
                unselected(outItem);
            }
        }
        
        function mouseover (overItem, selectedItem) {
            var ele = overItem.element.firstChild;
            if (overItem === selectedItem) { // selected hover
                ele.style.background = '#757362 none repeat scroll 0%';
            }
            else {
                ele.style.background = '#757362 none repeat scroll 0%';
                ele.style.color = '#FFCC66';
            }
        }
        
        function click (item, clickedItem) {
            if (item === clickedItem) { // selected
                item.selectAnim();
            }
            else {  // unselected 
            
            }
        }        

        this.fancyMenu = new SW.FancyMenu(
            [
                this.menuItemsByAnimType.off,
                this.menuItemsByAnimType.height,
                this.menuItemsByAnimType.period,
                this.menuItemsByAnimType.wind,
                this.menuItemsByAnimType.perspective
            ],        
            this.controlContainer,
            click,
            mouseover,
            mouseout
        );
        
        SWMap.markerSelectionControl.setupHandlers();
        
    };

})();