/*--------------------------------------
    Anchor Visual Effect
---------------------------------------*/
function anchor() {
    var list = $$('.bookmark-item-img');
    list.each(function(element) {
        
        //element.setStyle('z-index', 1000);
    	var fx = new Fx.Styles(element, {duration:200, wait:false});
        //var color = element.getStyle('color');
        var bgColor = element.getStyle('background-color');
        
    	element.addEvent('mouseenter', function(){
    		fx.start({
    			'background-color': '#191919'
    		});
    	});
     
    	element.addEvent('mouseleave', function(){
    		fx.start({
    			'background-color': bgColor
    		});
    	});
     
    });
    
    list = $$('.text-item');
    list.each(function(element) {
        
    	var fx = new Fx.Styles(element, {duration:100, wait:false});
        //var color = element.getStyle('color');
        var bgColor = element.getStyle('background-color');
        var paddingLeft = element.getStyle('padding-left').toInt();

    	element.addEvent('mouseenter', function(){
    		fx.start({
    			'background-color': '#951e5b',
    			'padding-left': paddingLeft + 5
    		});
    	});
     
    	element.addEvent('mouseleave', function(){
    		fx.start({
    			'background-color': bgColor,
    			'padding-left': paddingLeft
    		});
    	});
     
    });
}

window.addEvent('domready', anchor);

/*--------------------------------------
    Custom Label
---------------------------------------*/

function customLabel() {
    var labels = $$('label');
    labels.each(function(element) {
        var id = element.getProperty('for');
        var input = $(id);
        if (input && input.getProperty('type') == 'checkbox') {
        
            input.addEvent('change', function() {
                var element = $E('label[for=' + this.getProperty('id') + ']');
                if (this.getValue()) {
                    element.setStyles({
                        'background-color': '#fff'
                    });
                } else {
                    element.setStyles({
                        'background-color': 'transparent'
                    });
                
                }
            });
            
            if (input.getValue()) {
                element.setStyles({
                    color: '#fff',
                    'background-color': '#999'
                });
            }
        }
    });
}
window.addEvent('domready', customLabel);

/*--------------------------------------
    Tag Navigation
---------------------------------------*/

var TagNav = new Class({
    
    toggle: {
        element: null,
        openedClassName: 'tag-nav-opened',
        closedClassName: 'tag-nav-closed'
    },
    nav: {
        element: null
    },
    
    initialize: function() {
        this.toggle.element = $('search-nav-toggle');
        this.nav.element = $('search-nav');

        if (this.toggle.element) {
            this.toggle.element.setStyle('cursor', 'pointer');
            this.toggle.element.addClass(this.toggle.closedClassName);
            this.toggle.element.addEvent('click', function(e) { this.switchDisplay(e) }.bind(this));
            
            this.nav.element.setStyle('position', 'absolute');
            this.nav.element.setStyle('display', 'none');
            this.nav.element.setStyle('top', this.toggle.element.getTop() + this.toggle.element.getCoordinates().height);
        }
    },
    
    switchDisplay: function(evt) {
        if (this.nav.element.getStyle('display') == 'none') {
            this.toggle.element.removeClass(this.toggle.closedClassName);
            this.toggle.element.addClass(this.toggle.openedClassName);
            this.nav.element.setStyle('display', '');
        } else {
            this.toggle.element.removeClass(this.toggle.openedClassName);
            this.toggle.element.addClass(this.toggle.closedClassName);
            this.nav.element.setStyle('display', 'none');
        }
        
    }
});

window.addEvent('domready', function() { new TagNav });

/*--------------------------------------
    Ajax for favorite
---------------------------------------*/

var AjaxForFavorite = new Class({
    
    initialize: function() {
        var favorites = $$('.add-favorite');
        
        favorites.each(function(element) {
            var url = element.getElement('a').getProperty('href');
            element.addEvent('click', function(e) {
                new Event(e).stop();
                
    			element.setHTML('<span class="ajax-loader">waiting</span>');
                var ajax = new Ajax(
                    url + '?ajax=1', 
                    {
                        method: 'get',
                        onComplete: function() {
                			element.setHTML('added!');
                		}
                    }
                );
                ajax.request();
            });
        });
    }
});

window.addEvent('domready', function() { new AjaxForFavorite });

/*--------------------------------------
    Sidebar
---------------------------------------*/
var Sidebar = new Class({
    content: null,
    sidebar: null,
    defaultTop: 0,
    initialize: function(options) {
        this.content = $('content');
        
        if (this.content) {
            window.addEvent('scroll', function() { this.adjast() }.bind(this));
            this.content = $('content');
            
            if (!$('sidebar')) {
                this.sidebar = new Element('div', { 'id': 'sidebar' }).injectBefore(this.content);
                this.defaultTop = this.sidebar.getCoordinates().top;
                this.sidebar.setStyle('display', 'none');
            }
        }
    },
    
    adopt: function(text, widgetID) {
        if (!$(widgetID)) {
            new Element('div', { styles: { 'position': 'relative' }, 'id': widgetID, 'class': 'widget' }).injectInside(this.sidebar);
        }
        
        var top = window.getScrollTop() - this.defaultTop;
        if (top < 0) { top = 0; }
        this.content.setStyle('margin-left', 290);
        this.sidebar.setStyles({
            float: 'left',
            width: 280,
            display:'block',
            'margin-top': top
        });
        
        var closeWidget = new Element('div', { 'class': 'close-widget' }).adopt(
            new Element('img', {
                'class': 'rollover',
                'src': 'http://www.straightline.jp/html/common/static/image/icon_close.gif',
                'alt': 'close this widget',
                'styles': {
                    'cursor': 'pointer',
                    'position': 'absolute',
                    'top': '1em',
                    'right': '1em'
                },
                'events': {
                    'click': function(){
                        this.close(widgetID);
                    }.bind(this)
                }
            })
        );
        
        $(widgetID).setHTML(text);
        closeWidget.injectTop($(widgetID));
        rollOver();
    },
    
    adjast: function() {
        var sidebarTop = this.sidebar.getCoordinates().top;
        var sidebarBottom = this.sidebar.getCoordinates().bottom;
        var top = window.getScrollTop();
        var bottom = top + window.getHeight();
        
        if (top - sidebarTop < 0 || top > sidebarBottom) {
            var posTop = top - this.defaultTop;
            if (posTop < 0) { posTop = 0; }
            this.sidebar.setStyle('margin-top', posTop);
        }
    },
    
    close: function(widgetID) {
        $(widgetID).remove();
        if (!this.sidebar.getLast()) {
            this.sidebar.setStyle('display', 'none');
            this.content.setStyle('margin-left', 0);
        }
    }
    
});

/*--------------------------------------
    Ajax for detail
---------------------------------------*/

var AjaxForDetail = new Class({
    initialize: function() {
        var sidebar = new Sidebar();
        
        $$('.more-info').each(function(element) {
            var url = element.getElement('a').getProperty('href');
            
            element.addEvent('click', function(e) {
                new Event(e).stop();
                
                element.getElement('a').setStyle('display', 'none');
                var loader = new Element('span', { 'class': 'ajax-loader' });
                loader.setText('loading');
                element.adopt(loader);
                                                
                var ajax = new Ajax(
                    url + '?ajax=1', 
                    {
                        method: 'get',
                        //update: $('sidebar'),
                        onComplete: function() {
                            sidebar.adopt(ajax.response.text, 'ajax-for-detail');
                            loader.remove();
                            element.getElement('a').setStyle('display', 'inline');
                		}
                    }
                );
                ajax.request();
            });
            
        });
    }
    
});

window.addEvent('domready', function() { new AjaxForDetail });