jQuery.fn.slider = function() {
    return this.each(function(i) {
        this.sliderInfo = {
            container: null,
            scrollWidth: 672,
            scrollSpeed: 'slow',
            windowWidth: 0,
            listWidth: 0,
            animating: false,
            init: function(node) {
                this.container = node;
                this.windowWidth = $('.window', this.container).outerWidth();
                this.listWidth = $('.list', this.container).outerWidth();
                $('.list', this.container).css('left', '0');
                this.updated();
                var self = this;
                $('.prev a', self.container).click(function() {
                    self.scroll(-self.scrollWidth);
                    return false;
                });
                $('.next a', self.container).click(function() {
                    self.scroll(self.scrollWidth);
                    return false;
                });
            },
            scroll: function(size) {
                var pos = -parseInt($('.list', this.container).css('left'));
                var newpos = pos + size;
                if (newpos < 0) {
                    newpos = 0;
                }
                if (newpos > this.listWidth - 100) {
                    newpos = pos;
                }
                if (newpos != pos && this.animating == false) {
                    var animation;
                    size = newpos - pos;
                    if (size < 0) {
                        animation = '+=' + (-size);
                    } else {
                        animation = '-=' + size;
                    }
                    var self = this;
                    self.animating = true;
                    $('.list', this.container).animate({left: animation}, self.scrollSpeed, function() {
                        self.updated();
                        self.animating = false;
                    });
                }
            },
            updated: function() {
                var pos = -parseInt($('.list', this.container).css('left'));
                if (pos > 0) {
                    $('.prev', this.container).addClass('enabled');
                } else {
                    $('.prev', this.container).removeClass('enabled');
                }
                if (pos + this.windowWidth < this.listWidth) {
                   $('.next', this.container).addClass('enabled');
                } else {
                   $('.next', this.container).removeClass('enabled');
                }
            }
        };
        this.sliderInfo.init(this);
    });
};

function loadThumbnail(url)
{
    d = document.documentElement;
    w = d.clientWidth;
    h = d.clientHeight;
    sx = d.scrollLeft;
    sy = d.scrollTop;
    x = (w - 320) / 2;
    y = (h - 240) / 2;
    tgtImage = document.getElementById('thumbnail');
    tgtImage.innerHTML = '<img alt="" src="' + url + '" />';
    tgtImage.style.top = y + 'px';
    tgtImage.style.left = x + 'px';
    tgtImage.style.display = 'block';
}

function unloadThumbnail()
{
    tgtImage = document.getElementById('thumbnail');
    tgtImage.style.display = 'none';
    tgtImage.innerHTML = '';
}

function showThumbnail() {
    tgtImage = document.getElementById('thumbnail');
    tgtImage.style.display = 'block';
}

function hideThumbnail() {
    tgtImage = document.getElementById('thumbnail');
    tgtImage.style.display = 'none';
}

$(function() {
  $('img.capture').parent('a').hover(
    function() {
      url = $('img.capture', this).get(0).src;
      if (url == 'http://cdn.temo.jp/res/img/thumb_white_s.jpg') {
        url = 'http://cdn.temo.jp/res/img/thumb_white_m.jpg';
      } else {
        url = url.replace(/\/s\//, '/m/');
        loadThumbnail(url);
      }
    },
    function() {
      hideThumbnail();
    }
  );
  $('.slider').slider();
});