// Slider class
var Slider = Class.create();
Slider.prototype={
    initialize: function(el, options){
        this.el = $(el);
        this.setOptions(options);
    },
    setOptions: function(options) {
        this.options = {
            delay: 0.1,
            fps:   80,
            duration:0.3
        };
        Object.extend(this.options, options || {});
    },
    slide: function(){
        if (this.el.visible()) {
            new Effect.SlideUp(this.el.id, this.options);
        }
        else {
            new Effect.SlideDown(this.el.id, this.options );
        }
    }
}

// TicketClass extend Slider
var TicketSlider = Class.create();
Object.extend(TicketSlider.prototype, Slider.prototype);
Object.extend(TicketSlider.prototype, {
    initialize: function(id, options){
        this.el    = $('ticket-'+id+'-hide');
        this.btn_e = $('ticket-'+id+'-button');
        this.row   = 'ticket-'+id;
        this.setOptions(options);
    },
    setOptions: function(options) {
        this.options = {
            delay: 0.2,
            fps:   70,
            duration:0.7,
            color_start:'FFFFFF',
            color_end:'FFFF99',
            btn_image_src: '/images/ticket/button_ticket_',
            btn_image_ext: '.gif'
        };
        Object.extend(this.options, options || {});
    },
    changeForcus: function(){
      var btn_name     = (!this.el.visible()) ? 'close':'open';
      this.btn_e.src   = this.options.btn_image_src+btn_name+this.options.btn_image_ext;
      this.btn_e.title = btn_name;
      from  = (!this.el.visible()) ? this.options.color_start : this.options.color_end;
      to    = (!this.el.visible()) ? this.options.color_end : this.options.color_start;
      colorFade(this.row,'background',from,to);
      this.slide();
    }
});

// SwitchImage class
var SwitchImage = Class.create();
SwitchImage.prototype = {
    initialize: function(id, options){
        this.el = $(id);
        this.setOptions(options);
        this.onEvent     = this.on.bindAsEventListener(this);
        this.offEvenet   = this.off.bindAsEventListener(this);
        Event.observe(this.el, 'mouseover', this.onEvent);
        Event.observe(this.el, 'mouseout', this.offEvenet);
    },
    setOptions: function(options) {
        this.options = {
           keep_flag   : 0,
           on          : '_on',
           status      : 0
        };
        Object.extend(this.options, options || {});
    },
    keep: function(){
        this.options.keep_flag = 1;
        this.on();
    },
    release: function(){
        this.options.keep_flag = 0;
        this.off();
    },
    on: function(){
        if(!this.options.status){
          ext_point = this.el.src.lastIndexOf('.');
          this.el.src = this.el.src.substr(0, ext_point) + this.options.on + this.el.src.substr(ext_point);
          this.options.status = 1;
        }
    },
    off: function(){
        if(this.options.status && !this.options.keep_flag ){
          this.el.src = this.el.src.replace(this.options.on+'\.', '.');
          this.options.status = 0;
        }
    }
};

// SwitchImageHandler
var SwitchImageHandler = Class.create();
SwitchImageHandler.prototype = {
    initialize: function(category_list){
        this.category_list  = category_list;
    },
    set:function(){
        var category_list = this.category_list;
        var category_array   = {};
        for(var i=0; i < category_list.length; i++){
           category_array[category_list[i]] = new SwitchImage('category-'+category_list[i]);
        }
        for(var i=0; i < category_list.length; i++){
           Event.observe($('category-'+category_list[i]), 'click', function(e){ 
                for(var i=0; i < category_list.length; i++){
                   if(Event.element(e).id == 'category-'+category_list[i]){
                       category_array[category_list[i]].keep();
                   }else{
                       category_array[category_list[i]].release();
                   }
                }
           });
        }
        category_array[0].keep();
    }
};

// TicketListHandler
var TicketListHandler = Class.create();
TicketListHandler.prototype = {
    initialize: function(ticket_data){
        this.ticket_data  = ticket_data;
    },
    set:function(){
        Object.keys(this.ticket_data).each(function(v, k){
            Event.observe($('category-'+v), 'click', function(){
                this.setTicketList(v);
            }.bind(this));
        }.bind(this));
        this.setTicketList(0);
    },
    setTicketList: function (category_id){
        $('tickets').setStyle({'display':'none'});
        $('loader').setStyle({'display':'block'});
        $('tickets').innerHTML = '';
        Object.keys(this.ticket_data[category_id]).each(function(v, k){
            this.createTicket(this.ticket_data[category_id][v]);
        }.bind(this));
        Object.keys(this.ticket_data[category_id]).each(function(v, k){
            Event.observe($('ticket-'+v+'-button'), 'click', function(){
                Object.keys(this.ticket_data[category_id]).each(function(v2, k2){
                   if(v != v2 && $('ticket-'+v2+'-hide').visible() ){
                       var ticket = new TicketSlider(v2);
                       ticket.changeForcus();
                   }
                }.bind(this));
                var ticket = new TicketSlider(v);
                ticket.changeForcus();
            }.bind(this));
        }.bind(this));
        $('loader').setStyle({'display':'none'});
        $('tickets').setStyle({'display':'block'});
        $('tickets').visualEffect('Highlight');
    },
    createTicket: function (v){

        $('tickets').appendChild(
            Builder.node('div', {id:'ticket-'+v.ticket_id, className:'ticket_item'}, [
                // ticket_button
                Builder.node('div',{className:'ticket_button'},[
                    Builder.node('img', {id:'ticket-'+v.ticket_id+'-button', src:'/images/ticket/button_ticket_open.gif'})
                ]),
                // ticket_name
                Builder.node('div', {className:'ticket_name'},[
                     ((v.stock_num) ? [
                          ((v.new_flag) ? [Builder.node('span', {className:'new_icon_new'}, 'NEW'), '　']: [ ])
                          ]: [Builder.node('span', {className:'nothing_icon_new'}, '在庫切れ'), '　']),
                     Builder.node('a', {href:'ticket/spend/'+v.ticket_id}, v.ticket_name)
                ]),
                //ticket_pcoin
                Builder.node('div', {className:'ticket_pcoin'},[
                     Builder.node('img', {src:'/images/ticket/icon_pcoin.gif', 'alt':'交換ポイント数'}), 
                     Builder.node('b', {}, '　交換ポイント数') 
                ]),
                //ticket_value
                Builder.node('div', {className:'ticket_value'},[ 
                     Builder.node('b', {}, v.exchange_point),
                     'P　'
                ])
            ])
        );
        
        //guideの部分だけはエスケープされたくないので、innerHTMLで直接ぶちこむ
        var ticket_guide = Builder.node('div',{className:'ticket_guide'});
        ticket_guide.innerHTML= v.information_body+'<br /><br />'+ v.guide_body;

        $('tickets').appendChild( 
            Builder.node('div', {id:'ticket-'+v.ticket_id+'-hide', className:'ticket_info', style:'display:none;'}, [
                Builder.node('br'),
                // ticket_date
                Builder.node('div',{className:'ticket_date'},[
                    Builder.node('img', {src:'/images/ticket/icon_redstar.gif', alt:'Icon Redstar'}),
                    Builder.node('b', {}, '　使用有効期限' ),
                    '　'+ v.expire_date + '　　',
                    Builder.node('img', {src:'/images/ticket/icon_redstar.gif', alt:'Icon Redstar'}),
                    Builder.node('b', {}, '　申込み期限' ),
                    '　'+ v.start_date+' ～ '+v.end_date
                ]),
                // ticket_guide
                ticket_guide,
                // ticket_exhcange
                Builder.node("div", {className:'ticket_exchange'},[
                    Builder.node('a', {href:'ticket/spend/'+v.ticket_id},[
                         Builder.node('img', {src:'/images/ticket/button_ticket_exchange.gif', 'alt':'交換する'})
                    ])
                ]),
                //clear
                Builder.node('br', {className:'clear'}),
            ])
        );
    }
};