;(function($){
  var accordion = function (obj,option){
    var self = this ;
    this.obj    = obj;
    this.option = option;
    this.lessthanie8 = /msie 6.0|msie 7.0|msie 8.0/gi.test(window.navigator.useragent);
    this.defaults = {
      imageobj      : [],
      arrangement   : "horizontal", //verticality
      fontcut       : 500,
      defaultwidth  : 100,
      defaultheight : 100,
      animatewidth  : 600,
      animateheight : 200,
      response      : true,
      stylecolor    : {"background":"#fff","font":"#333333","textshadow":"0px 0px 1px green"},
      animatetime   : "0.5s"
    };
    $.extend(this.defaults,this.option);

    this.defaultdom();
    self.eachimgwidth= 100;

    var img = new image();
    $.each(this.defaults.imageobj,function(i,src){
      img.src = self.defaults.imageobj[i];
      $(img).on('load error',function()
      {
        self.winwidth    = self.obj.find('ul[data-name="accordion"]').innerwidth();
      });
    })

    this.winwidth    = this.obj.find('ul[data-name="accordion"]').innerwidth();
    this.li          = this.obj.find('.accordion-li');
    this.icon        = this.obj.find('.accordion-icon');
    this.description = this.obj.find('.accordion-description');
    this.title       = this.obj.find('.accordion-title');
    this.content     = this.obj.find('.accordion-content');
    this.div         = this.obj.parents('.accordion-div');
    this.len         = this.defaults.imageobj.length;
    this.eachsmallimgwidth = this.defaults.defaultwidth;

    this.icon.css('color',this.defaults.stylecolor.font);
    this.description.css('backgroundcolor',this.defaults.stylecolor.background);
    this.title.css('textshadow',this.defaults.stylecolor.textshadow);
    this.content.css('textshadow',this.defaults.stylecolor.textshadow);

    this.responsedom();
    this.cutoverflowstring();
    // animate

    if(this.defaults.arrangement === "horizontal"){

      this.obj.hover(function() {
        $(this).find(".accordion-li").css("transition","width "+ self.defaults.animatetime +"");
      });
      var response =  (this.defaults.response)?self.eachimgwidth:self.defaults.defaultwidth;
      this.li.hover(function(e) {
        $(this).siblings('.accordion-li').width(self.eachsmallimgwidth);
        $(this).addclass('active').css("width",self.defaults.animatewidth);
        if(self.lessthanie8){
          $(this).find(".accordion-description").css("background",self.defaults.stylecolor.background).parents('.accordion-li').siblings()
          .find(".accordion-description").css("background",self.defaults.stylecolor.background);
        }else{
          $(this).find(".accordion-description").css("background","linear-gradient("+self.colormd5count(self.defaults.stylecolor.background,0).rgba+","+ self.defaults.stylecolor.background +")");
        }
      },function(e){

        $(this).removeclass('active');
        self.li.css("width",response);
        $(this).find(".accordion-description").css("background","linear-gradient("+self.defaults.stylecolor.background+","+ self.defaults.stylecolor.background +")");

      })
    }else if(this.defaults.arrangement === "verticality"){
        this.div.css('overflow','inherit');
        this.li.on('click',function(){
          if($(this).hasclass('active')){
            $(this).css("height",self.defaults.defaultheight).removeclass('active')
            $(this).find(".accordion-description").css({
              "background":"linear-gradient("+self.colormd5count(self.defaults.stylecolor.background,100).rgba+","+ self.defaults.stylecolor.background +")",
              "transition":"all "+self.defaults.animatetime
            });

          }else{
            $(this).addclass('active').siblings().css("height",self.defaults.defaultheight).removeclass('active');
            $(this).css('height', self.defaults.animateheight);
            $(this).find(".accordion-description").css({
              "background":"linear-gradient("+self.colormd5count(self.defaults.stylecolor.background,0).rgba+","+ self.defaults.stylecolor.background +")",
              "transition":"all "+self.defaults.animatetime
            });

          };
        });
    }

  };

  accordion.prototype = {
    defaultdom:function(){
      var imgarr = this.defaults.imageobj,
          lihtml = '';
      if(!imgarr) return;
      $.each( imgarr , function(index, val) {
        val.alt     = val.alt || null;
        val.icon    = val.icon || null;
        val.title   = val.title || null;
        val.content = val.content || null;
        val.url     = val.url || "javascript:void(0)";
        lihtml += 
        '<li class="accordion-li">'+
          '<h4 class="accordion-title2">'+ val.title +'</h4>'+
          '<h4 class="accordion-title">'+ val.title +'</h4>'+
          '<div class="accordion-mask"></div>'+
          '<a href="'+ val.url +'">'+
            '<img class="accordion-img" src="'+ val.src +'" alt="'+ val.alt +'"/>'+
          '</a>'+
          
        '</li>';
      });
      var ul = $("<ul data-name='accordion' class='accordion " + this.defaults.arrangement + "'></ul>");
      var i = this.obj.append(ul.append(lihtml));
      i.wrap('<div class="accordion-div" />');
    },
    cutoverflowstring:function(){
      var _this_ = this ; 
      this.content.each(function(index, el) {
        var len = $(el).text().length;
        if(len > _this_.defaults.fontcut){
          var sub = $(el).text().substring(0,_this_.defaults.fontcut);
          $(el).text(sub + '...');
        }
      });
    },
    responsedom:function(){
      if(this.defaults.arrangement === "verticality"){
        this.li.css({'width': '99.9%','height':this.defaults.defaultheight});
      }else if(this.defaults.response && this.defaults.arrangement === "horizontal"){
        var imgarr = this.defaults.imageobj,
            bigimgwidth = this.defaults.animatewidth,
            len    = imgarr.length;
        this.eachimgwidth =  this.winwidth / len; 
        this.li.width(this.eachimgwidth);
        this.eachsmallimgwidth = ( this.winwidth - bigimgwidth ) / (len-1);

        this.obj.find('ul[data-name="accordion"]').width(this.winwidth + this.winwidth/95);
      }else{
        this.li.css('width', this.defaults.defaultwidth);
        this.obj.find('ul[data-name="accordion"]').width(this.winwidth*2);
      }
    },
    //#fff 杞�涓� rgab()
    colormd5count:function(hex, al){
      var hexcolor = /^#/.test(hex) ? hex.slice(1) : hex,
          alp = hex === 'transparent' ? 0 : math.ceil(al),
          r, g, b;
      hexcolor = /^[0-9a-f]{3}|[0-9a-f]{6}$/i.test(hexcolor) ? hexcolor : 'fffff';
      if (hexcolor.length === 3) {
          hexcolor = hexcolor.replace(/(\w)(\w)(\w)/gi, '$1$1$2$2$3$3');
      }
      r = hexcolor.slice(0, 2);
      g = hexcolor.slice(2, 4);
      b = hexcolor.slice(4, 6);
      r = parseint(r, 16);
      g = parseint(g, 16);
      b = parseint(b, 16);
      return {
          hex: '#' + hexcolor,
          alpha: alp,
          rgba: 'rgba(' + r + ', ' + g + ', ' + b + ', ' + (alp / 100).tofixed(2) + ')'
      };
    }
  };

  $.fn.extend({
    accordion:function(option){
      new accordion(this,option);
    }
  })

})(jquery);