var domHelper = {
	// Add event handler
	addEvent : function(elm, evType, fn, useCapture, obj, override) {
		if (typeof elm == 'string') elm = document.getElementById(elm);
		var scope = elm;
		if (override) {
			if (override === true) scope = obj;
			else scope = override;
		}
		var wrappedFn = function(e) { return fn.call(scope, domHelper.getEvent(e), obj); };

		if (elm.addEventListener)
			elm.addEventListener(evType, wrappedFn, useCapture);
		else if (elm.attachEvent)
			elm.attachEvent('on' + evType, wrappedFn);
		else
			elm['on' + evType] = wrappedFn;
		return true;
	},
	removeEvent : function(elm, evType, fn) {

	},
	// getEvent
	getEvent: function(e, boundEl) {
		var ev = e || window.event;
		if (!ev) {
			var c = this.getEvent.caller;
			while (c) {
				ev = c.arguments[0];
				if (ev && Event == ev.constructor) break;
				c = c.caller;
			}
		}
		return ev;
	},
	// Get key
	getKey : function(e) {
		if (window.event)
			return window.event.keyCode;
		else if (e)
			return e.which;
		else
			return 0;
	},
	// Stop event propagation
	stopBubble : function(e) {
		if (window.event && window.event.cancelBubble) {
			window.event.cancelBubble = true;
		}
		if (e && e.stopPropagation) {
			e.stopPropagation();
		}
	},

	// Prevent event default action
	stopDefault : function(e){
		if(window.event && window.event.returnValue){
			window.event.returnValue = false;
		}
		if (e && e.preventDefault){
			e.preventDefault();
		}
	},

	// Stop event propagation + Prevent event default action
	cancelClick : function(e) {
		if (window.event) {
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}
		if (e && e.stopPropagation && e.preventDefault) {
			e.stopPropagation();
			e.preventDefault();
		}
	},
	// Get event target
	getTarget : function(e) {
		var target = window.event ? window.event.srcElement : e ? e.target : null;
		if (!target) { return false; }
		while (target.nodeType != 1 && target.nodeName.toLowerCase() != 'body') {
			target = target.parentNode;
		}
		return target;
	},
	// Get related event target
	getRelatedTarget : function(e) {
		var target = window.event ? window.event.fromElement : e ? e.relatedTarget : null;
		if (!target) { return false; }
		/*
		while (target.nodeType != 1 && target.nodeName.toLowerCase() != 'body') {
			target = target.parentNode;
		}
		*/
		return target;
	},
	// Key related
	isPrintable : function(key) {
		return (key >= 32 && key < 127);
	},

	// Dom Element navigation method
	lastSibling:function(node) {
		var tempObj=node.parentNode.lastChild;
		while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
			tempObj=tempObj.previousSibling;
		}
		return (tempObj.nodeType==1)?tempObj:false;
	},
	firstSibling:function(node) {
		var tempObj=node.parentNode.firstChild;
		while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
			tempObj=tempObj.nextSibling;
		}
		return (tempObj.nodeType==1)?tempObj:false;
	},
	getText:function(node){
		if(!node.hasChildNodes()){return false;}
		var reg=/^\s+$/;
		var tempObj=node.firstChild;
		while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
			tempObj=tempObj.nextSibling;
		}
		return tempObj.nodeType==3||tempObj.nodeType==4?tempObj.nodeValue:false;
	},
	setText:function(node,txt){
		if(!node.hasChildNodes()){return false;}
		var reg=/^\s+$/;
		var tempObj=node.firstChild;
		while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
			tempObj=tempObj.nextSibling;
		}
		if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}
	},
	createLink:function(to,txt){
		var tempObj=document.createElement('a');
		tempObj.appendChild(document.createTextNode(txt));
		tempObj.setAttribute('href',to);
		return tempObj;
	},
	createTextElm:function(elm,txt){
		var tempObj=document.createElement(elm);
		tempObj.appendChild(document.createTextNode(txt));
		return tempObj;
	},
	closestSibling:function(node,direction){
		var tempObj;
		if(direction==-1 && node.previousSibling!=null){
			tempObj=node.previousSibling;
			while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
				 tempObj=tempObj.previousSibling;
			}
		}else if(direction==1 && node.nextSibling!=null){
			tempObj=node.nextSibling;
			while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
				 tempObj=tempObj.nextSibling;
			}
		}
		return tempObj.nodeType==1?tempObj:false;
	},
	// class management
	cssjs:function(a,o,c1,c2) {
		switch (a){
			case 'swap':
				o.className=!domHelper.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
			break;
			case 'add':
				if(!domHelper.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
			break;
			case 'remove':
				var rep=o.className.match(' '+c1)?' '+c1:c1;
				o.className=o.className.replace(rep,'');
			break;
			case 'check':
				var found=false;
				var temparray=o.className.split(' ');
				for(var i=0;i<temparray.length;i++){
					if(temparray[i]==c1){found=true;}
				}
				return found;
			break;
		}
	},
	// get computed style value and set style - from http://www.elektronaut.no/articles/2006/06/07/computed-styles require test!
	getComputedStyle : function(element,cssRule) {
		if (document.defaultView && document.defaultView.getComputedStyle) {
	    	var value = document.defaultView.getComputedStyle(element, '').getPropertyValue(
	    		cssRule.replace(/[A-Z]/g, function(c) { return "-" + c.toLowerCase(); }));
	  	} else if (element.currentStyle)
	  		var value = element.currentStyle[cssRule];
	  	else
	  		var value = false;
		return value;
	},
	setStyle : function(element,cssRule,value) {
  		element.style[cssRule] = value;
		return element;
	},
	getElementsByClassName : function(element, className, tag) {
		tag = tag ? tag.toUpperCase() : '*';
		if (element.getElementsByClassName) {
			var elms = element.getElementsByClassName(className);
			if (tag === '*') {
				return elms;
			} else {
				var res = [];
				for (var i=0; i < elms.length; i++) {
					if (elms[i].nodeName.toUpperCase() === tag) {
						res[res.length] = elms[i];
					}
				}
				return res;
			}
		} else {
			var elms = element.getElementsByTagName(tag);
			var nodes = [];
			for (var i = 0; i < elms.length; i++) {
				if (domHelper.cssjs('check', elms[i], className)) nodes[nodes.length] = elms[i];
			}
		}
		return nodes;
	},

	// set & get acitve titled stylesheet(LINK)
	setActiveTitledCss : function(t) {
		var ls=document.getElementsByTagName("link");
		for(var i=0;i<ls.length,l=ls[i];i++) {
			if (l.getAttribute("rel").indexOf("style")!=-1 && l.getAttribute("title")) {
				l.disabled = true;
				if (l.getAttribute("title")==t) l.disabled=false;
			}
		}
	},
	getActiveTitledCss : function() {
		var ls=document.getElementsByTagName("link"),t;
		for(var i=0;i<ls.length,l=ls[i];i++) {
			t=l.getAttribute("title");
			if (l.getAttribute("rel").indexOf("style")!=-1 && t && !l.disabled) return t;
		}
		return null;
	},
	getPreferredCss : function() {
		var ls=document.getElementsByTagName("link"),t;
		for (var i=0;i<ls.length,l=ls[i];i++) {
			t=l.getAttribute("title");
			if (l.getAttribute("rel").indexOf("style")!=-1 && l.getAttribute("rel").indexOf("alt")==-1 && t) return t;
		}
		return null;
	},
	// inheritance from yui
	extend : function(subc, superc, overrides) {
        if (!superc||!subc) return;
        var F = function() {};
        F.prototype=superc.prototype;
        subc.prototype=new F();
        subc.prototype.constructor=subc;
        subc.superclass=superc.prototype;
        if (superc.prototype.constructor == Object.prototype.constructor)
            superc.prototype.constructor=superc;
        if (overrides) {
            for (var i in overrides)
            	subc.prototype[i]=overrides[i];
        }
    },

    // get pageXOffset
    getPageXOffset : function() {
    	if (window.innerWidth) {
	    	return window.pageXOffset;
    	} else if (document.documentElement && document.documentElement.clientWidth) {
    		return document.documentElement.scrollLeft;
    	} else if (document.body.clientWidth) {
    		return document.body.scrollLeft;
    	}
    },
    // get pageYOffset
    getPageYOffset : function() {
    	if (window.innerWidth) {
	    	return window.pageYOffset;
    	} else if (document.documentElement && document.documentElement.clientWidth) {
    		return document.documentElement.scrollTop;
    	} else if (document.body.clientWidth) {
    		return document.body.scrollTop;
    	}
    },
    // get [pageXOffset,pageYOffset]
    getPageOffset : function() {
    	return [domHelper.getPageXOffset(), domHelper.getPageYOffset()];
    }
}
domHelper.customEvent = function(type, scope) {
	this.type = type;
	this.scope = scope || window;
	this.subscribers = [];
}
domHelper.customEvent.prototype = {
	subscribe : function(f,o,s) {
		this.subscribers[this.subscribers.length] = {fn:f,obj:o,scope:s};
	},
	fire : function() {
		var args=[].slice.call(arguments, 0);
		var subs=this.subscribers.slice();
		for (var i=0;i<subs.length;i++) {
			if (subs[i]) {
				var s=this.scope;
				if (subs[i].scope) s=subs[i].scope;
				subs[i].fn.call(s,this.type,args,subs[i].obj);
			}
		}
	}
}


var Easing = {
    easeNone: function (t, b, c, d) { return c*t/d + b; },
    easeIn: function (t, b, c, d) { return c*(t/=d)*t + b; },
    easeOut: function (t, b, c, d) { return -c *(t/=d)*(t-2) + b; },
    easeBoth: function (t, b, c, d) {
    	if ((t/=d/2) < 1) return c/2*t*t + b;
    	return -c/2 * ((--t)*(t-2) - 1) + b; },
    easeInStrong: function (t, b, c, d) { return c*(t/=d)*t*t*t + b; },
    easeOutStrong: function (t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; },
    easeBothStrong: function (t, b, c, d) {
    	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    	return -c/2 * ((t-=2)*t*t*t - 2) + b; },
    elasticIn: function (t, b, c, d, a, p) {
    	if (t == 0) return b;
        if ( (t /= d) == 1 ) return b+c;
        if (!p) p=d*.3;
    	if (!a || a < Math.abs(c)) { a = c; var s = p/4; }
    	else var s = p/(2*Math.PI) * Math.asin (c/a);
    	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; },
    elasticOut: function (t, b, c, d, a, p) {
    	if (t == 0) return b;
        if ( (t /= d) == 1 ) return b+c;
        if (!p) p=d*.3;
    	if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
    	else var s = p/(2*Math.PI) * Math.asin (c/a);
    	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; },
    elasticBoth: function (t, b, c, d, a, p) {
    	if (t == 0) return b;
        if ( (t /= d/2) == 2 ) return b+c;
        if (!p) p = d*(.3*1.5);
    	if ( !a || a < Math.abs(c) ) { a = c; var s = p/4; }
    	else var s = p/(2*Math.PI) * Math.asin (c/a);
    	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; },
    backIn: function (t, b, c, d, s) {
    	if (typeof s == 'undefined') s = 1.70158;
    	return c*(t/=d)*t*((s+1)*t - s) + b; },
    backOut: function (t, b, c, d, s) {
    	if (typeof s == 'undefined') s = 1.70158;
    	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; },
    backBoth: function (t, b, c, d, s) {
    	if (typeof s == 'undefined') s = 1.70158;
    	if ((t /= d/2 ) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; },
    bounceIn: function (t, b, c, d) { return c - YAHOO.util.Easing.bounceOut(d-t, 0, c, d) + b; },
    bounceOut: function (t, b, c, d) {
    	if ((t/=d) < (1/2.75)) return c*(7.5625*t*t) + b;
    	else if (t < (2/2.75)) return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    	else if (t < (2.5/2.75)) return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; },
    bounceBoth: function (t, b, c, d) {
    	if (t < d/2) return YAHOO.util.Easing.bounceIn(t*2, 0, c, d) * .5 + b;
    	return YAHOO.util.Easing.bounceOut(t*2-d, 0, c, d) * .5 + c*.5 + b; }
};


var Motion = function(elm, attrs, duration, method) {
	this.init(elm, attrs, duration, method);
}

Motion.prototype = {
	init : function(elm, attrs, duration, method) {
		this.elm = elm;
		this.duration = duration || 1000;
		this.method = method || Easing.easeNone;
		this.attribute = attrs || {};

		this.currentFrame = 0;
		this.totalFrames = MotionMgr.fps;
		this.useSeconds = true;

		this._startTime = null;
		this._isAnimated = false;

		// {points: {by: [deltaX, deltaY]}} Çü½Ä¸¸ Áö¿ø
		var offset = attrs.points.by;
		this.start = [parseInt(elm.style.left), parseInt(elm.style.top)];
		this.end = [this.start[0] + offset[0], this.start[1] + offset[1]];

		var onStart=function() {
			this.onStart.fire();
			this._isAnimated = true;
			this._startTime = new Date();
		};
		var onTween=function() {
			var pt = this.doMethod(this.start, this.end);
			this.elm.style.left = parseInt(pt[0]) + 'px';
			this.elm.style.top = parseInt(pt[1]) + 'px';
		};
		var onComplete=function() {
			this._isAnimated = false;
			this.onComplete.fire();
		};

		this.onStart = new domHelper.customEvent('start', this);
		this._onStart = new domHelper.customEvent('_start', this);

		this._onTween = new domHelper.customEvent('_tween', this);

		this.onComplete = new domHelper.customEvent('complete', this);
		this._onComplete = new domHelper.customEvent('_complete', this);

		this._onStart.subscribe(onStart);
		this._onTween.subscribe(onTween);
		this._onComplete.subscribe(onComplete);
	},

	animate : function() {
		if (this._isAnimated) return false;
		MotionMgr.addMotion(this);
	},
	isAnimated : function() {
		return this._isAnimated;
	},
	getStartTime : function() {
		return this._startTime;
	},
	doMethod : function(start, end) {
		return [this.method(this.currentFrame, start[0], end[0]-start[0], this.totalFrames),
			this.method(this.currentFrame, start[1], end[1]-start[1], this.totalFrames)];
	}
}

var MotionMgr = new function() {
	this.delay = 1;
	this.fps = 1000;
	var queue = [];
	var thread = null;
	this.addMotion = function(tween) {
		queue[queue.length] = tween;
		tween._onStart.fire();
		this.start();
	};
	this.removeMotion = function(tween, i) {
		i = i || getIndex(tween);
		if (i === -1) return false;

		tween._onComplete.fire();
		queue.splice(i, 1);

		if (queue.length == 0) this.stop();
		return true;
	};
	this.start = function() {
		if (thread === null)
			thread = window.setInterval(this.run, this.delay);
	};
	this.stop = function(tween) {
		if (tween)
			MotionMgr.removeMotion(tween);
		else {
			window.clearInterval(thread);
			for (var i = 0; i < queue.length; i++) this.removeMotion(queue[0], 0);
			queue = [];
			thread = null;
		}
	};
	this.run = function(e) {
		for (var i = 0; i < queue.length; i++) {
			var t = queue[i];
			if (t.currentFrame < t.totalFrames || t.totalFrames === null) {
				t.currentFrame++;
				if (t.useSeconds) correctFrame(t);
				t._onTween.fire();
			} else
				MotionMgr.stop(t);
		}
	};
	var getIndex = function(t) {
		for (var i = 0; i < queue.length; i++) {
			if (queue[i] == t) return i;
		}
		return -1;
	};
	var correctFrame = function(tween) {
		var frames = tween.totalFrames;
        var frame = tween.currentFrame;
        var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
        var elapsed = (new Date() - tween.getStartTime());
        var tweak = 0;
        if (elapsed < tween.duration * 1000) tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
        else tweak = frames - (frame + 1);
        if (tweak > 0 && isFinite(tweak)) {
            if (tween.currentFrame + tweak >= frames) tweak = frames - (frame + 1);
            tween.currentFrame += tweak;
        }
	};
}

// options
//   className : item clasname, default:box_item
//   container : box container element id, default:parent node
//   slideWidth : visible slide width, default:container width
//   leftButton : left sliding button element id, default:slideLeft
//   rightButton : left sliding button element id, default:slideRight
var SlidingBox = function(box, options) {

	options = options || {};

	this.box = box;
	this.boxEl = document.getElementById(box);

	this.boxEl.style.position = 'absolute';
	this.boxEl.style.left = '0';
	this.boxEl.style.top = '0';

	this.className = options.className || 'box_item';
	this.container = document.getElementById(options.container) || this.boxEl.parentNode;
	var items = domHelper.getElementsByClassName(this.boxEl, this.className, 'span');
    if(items=='')
        return;
	this.itemWidth = items[0].offsetWidth; // marginÀº °í·Á¾ÈµÊ
	this.maxWidth = 0;
	var selected = -1; // ¼±Åõȳð
	for (var i = 0; i < items.length; i++) {
		this.maxWidth += items[i].offsetWidth; // 7 dvi °ø¹é
		if (domHelper.cssjs('check', items[i], 'selected')) selected = i;
	}
	this.boxEl.style.width = this.maxWidth + 'px';

    this.movedBy = 0;
	this.containerSize = Math.floor(this.container.offsetWidth / this.itemWidth); // ¿µ¿ª ³» Ãâ·Â °³¼ö
    this.slideWidth = 1; // ½½¶óÀ̵ù °³¼ö ¼±ÅÃ

	// selected
	if (selected > 0) {
		var n = parseInt(selected / this.slideWidth);
		this.boxEl.style.left = -n * this.slideWidth * this.itemWidth + 'px'; //this.slideBy();
		this.movedBy += n * this.slideWidth * this.itemWidth;
	}

	// event registration
	var left = options.leftButton ? document.getElementById(options.leftButton) : document.getElementById('slideLeft');
	var right = options.rightButton ? document.getElementById(options.rightButton) : document.getElementById('slideRight');
	if (left && right) {
		domHelper.addEvent(left, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.slideLeft()) {
				domHelper.cssjs('add', left, 'off');
				left.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', right, 'off');
			right.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
		domHelper.addEvent(right, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.slideRight()) {
				domHelper.cssjs('add', right, 'off');
				right.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', left, 'off');
			left.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
	}


	var Bleft = options.BleftButton ? document.getElementById(options.BleftButton) : document.getElementById('slideBleft');
	var Bright = options.BrightButton ? document.getElementById(options.BrightButton) : document.getElementById('slideBright');
	if (Bleft && Bright) {
		domHelper.addEvent(Bleft, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.slideBleft()) {
				domHelper.cssjs('add', Bleft, 'off');
				Bleft.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', Bright, 'off');
			Bright.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
		domHelper.addEvent(Bright, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.slideBright()) {
				domHelper.cssjs('add', Bright, 'off');
				Bright.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', Bleft, 'off');
			Bleft.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
	}


	var Hleft = options.HleftButton ? document.getElementById(options.HleftButton) : document.getElementById('slideHleft');
	var Hright = options.HrightButton ? document.getElementById(options.HrightButton) : document.getElementById('slideHright');
	if (Hleft && Hright) {
		domHelper.addEvent(Hleft, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.slideHleft()) {
				domHelper.cssjs('add', Hleft, 'off');
				Hleft.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', Hright, 'off');
			Hright.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
		domHelper.addEvent(Hright, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.slideHright()) {
				domHelper.cssjs('add', Hright, 'off');
				Hright.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', Hleft, 'off');
			Hleft.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
	}


	// button initialize
	if (this.movedBy >= this.slideWidth * this.itemWidth) {
		domHelper.cssjs('remove', left, 'off');
		left.removeAttribute('disabled');
	} else {
		domHelper.cssjs('add', left, 'off');
		left.setAttribute('disabled', 'disabled');
	}
	if (this.movedBy < this.maxWidth - this.slideWidth * this.itemWidth) {
		domHelper.cssjs('remove', right, 'off');
		right.removeAttribute('disabled');
	} else {
		domHelper.cssjs('add', right, 'off');
		right.setAttribute('disabled', 'disabled');
	}
}
SlidingBox.prototype = {
	slideBy: function(delta) {
		this.anim = new Motion(this.boxEl, {points: {by: [delta, 0]}}, 0.5, Easing.easeBoth);
		this.anim.animate();
	},
	slideLeft : function() {
		if (this.movedBy >= this.slideWidth * this.itemWidth) {
			this.slideBy(this.slideWidth * this.itemWidth);
			this.movedBy -= this.slideWidth * this.itemWidth;
		}
		return (this.movedBy >= this.slideWidth * this.itemWidth);
	},
	slideRight : function() {
		if (this.movedBy < this.maxWidth - this.slideWidth * this.itemWidth) {
			this.slideBy(-this.slideWidth * this.itemWidth);
			this.movedBy += this.slideWidth * this.itemWidth;
		}
		return (this.movedBy < this.maxWidth - this.slideWidth * this.itemWidth);
	}
}
window.onload=function (){
    var slide = new SlidingBox('seriesList');
    var Bslide = new BSlidingBox('BseriesList');
    var Hslide = new HSlidingBox('HseriesList');
}



var BSlidingBox = function(box, options) {

	options = options || {};

	this.box = box;
	this.boxEl = document.getElementById(box);

	this.boxEl.style.position = 'absolute';
	this.boxEl.style.left = '0';
	this.boxEl.style.top = '0';

	this.className = options.className || 'box_item';
	this.container = document.getElementById(options.container) || this.boxEl.parentNode;
	var items = domHelper.getElementsByClassName(this.boxEl, this.className, 'span');
    if(items=='')
        return;
	this.itemWidth = items[0].offsetWidth; // marginÀº °í·Á¾ÈµÊ
	this.maxWidth = 0;
	var selected = -1; // ¼±Åõȳð
	for (var i = 0; i < items.length; i++) {
		this.maxWidth += items[i].offsetWidth; // 7 dvi °ø¹é
		if (domHelper.cssjs('check', items[i], 'selected')) selected = i;
	}
	this.boxEl.style.width = this.maxWidth + 'px';

    this.movedBy = 0;
	this.containerSize = Math.floor(this.container.offsetWidth / this.itemWidth); // ¿µ¿ª ³» Ãâ·Â °³¼ö
    this.BslideWidth = 1; // ½½¶óÀ̵ù °³¼ö ¼±ÅÃ

	// selected
	if (selected > 0) {
		var n = parseInt(selected / this.BslideWidth);
		this.boxEl.style.left = -n * this.BslideWidth * this.itemWidth + 'px'; //this.BslideBy();
		this.movedBy += n * this.BslideWidth * this.itemWidth;
	}

	// event registration
	var left = options.leftButton ? document.getElementById(options.leftButton) : document.getElementById('BslideLeft');
	var right = options.rightButton ? document.getElementById(options.rightButton) : document.getElementById('BslideRight');
	if (left && right) {
		domHelper.addEvent(left, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.BslideLeft()) {
				domHelper.cssjs('add', left, 'off');
				left.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', right, 'off');
			right.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
		domHelper.addEvent(right, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.BslideRight()) {
				domHelper.cssjs('add', right, 'off');
				right.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', left, 'off');
			left.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
	}


	var Bleft = options.BleftButton ? document.getElementById(options.BleftButton) : document.getElementById('BslideBleft');
	var Bright = options.BrightButton ? document.getElementById(options.BrightButton) : document.getElementById('BslideBright');
	if (Bleft && Bright) {
		domHelper.addEvent(Bleft, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.BslideBleft()) {
				domHelper.cssjs('add', Bleft, 'off');
				Bleft.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', Bright, 'off');
			Bright.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
		domHelper.addEvent(Bright, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.BslideBright()) {
				domHelper.cssjs('add', Bright, 'off');
				Bright.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', Bleft, 'off');
			Bleft.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
	}



	// button initialize
	if (this.movedBy >= this.BslideWidth * this.itemWidth) {
		domHelper.cssjs('remove', left, 'off');
		left.removeAttribute('disabled');
	} else {
		domHelper.cssjs('add', left, 'off');
		left.setAttribute('disabled', 'disabled');
	}
	if (this.movedBy < this.maxWidth - this.BslideWidth * this.itemWidth) {
		domHelper.cssjs('remove', right, 'off');
		right.removeAttribute('disabled');
	} else {
		domHelper.cssjs('add', right, 'off');
		right.setAttribute('disabled', 'disabled');
	}
}
BSlidingBox.prototype = {
	BslideBy: function(delta) {
		this.anim = new Motion(this.boxEl, {points: {by: [delta, 0]}}, 0.5, Easing.easeBoth);
		this.anim.animate();
	},
	BslideLeft : function() {
		if (this.movedBy >= this.BslideWidth * this.itemWidth) {
			this.BslideBy(this.BslideWidth * this.itemWidth);
			this.movedBy -= this.BslideWidth * this.itemWidth;
		}
		return (this.movedBy >= this.BslideWidth * this.itemWidth);
	},
	BslideRight : function() {
		if (this.movedBy < this.maxWidth - this.BslideWidth * this.itemWidth) {
			this.BslideBy(-this.BslideWidth * this.itemWidth);
			this.movedBy += this.BslideWidth * this.itemWidth;
		}
		return (this.movedBy < this.maxWidth - this.BslideWidth * this.itemWidth);
	}
}

var HSlidingBox = function(box, options) {

	options = options || {};

	this.box = box;
	this.boxEl = document.getElementById(box);

	this.boxEl.style.position = 'absolute';
	this.boxEl.style.left = '0';
	this.boxEl.style.top = '0';

	this.className = options.className || 'box_item';
	this.container = document.getElementById(options.container) || this.boxEl.parentNode;
	var items = domHelper.getElementsByClassName(this.boxEl, this.className, 'span');
    if(items=='')
        return;
	this.itemWidth = items[0].offsetWidth; // marginÀº °í·Á¾ÈµÊ
	this.maxWidth = 0;
	var selected = -1; // ¼±Åõȳð
	for (var i = 0; i < items.length; i++) {
		this.maxWidth += items[i].offsetWidth; // 7 dvi °ø¹é
		if (domHelper.cssjs('check', items[i], 'selected')) selected = i;
	}
	this.boxEl.style.width = this.maxWidth + 'px';

    this.movedBy = 0;
	this.containerSize = Math.floor(this.container.offsetWidth / this.itemWidth); // ¿µ¿ª ³» Ãâ·Â °³¼ö
    this.HslideWidth = 1; // ½½¶óÀ̵ù °³¼ö ¼±ÅÃ

	// selected
	if (selected > 0) {
		var n = parseInt(selected / this.HslideWidth);
		this.boxEl.style.left = -n * this.HslideWidth * this.itemWidth + 'px'; //this.HslideBy();
		this.movedBy += n * this.HslideWidth * this.itemWidth;
	}

	// event registration
	var left = options.leftButton ? document.getElementById(options.leftButton) : document.getElementById('HslideLeft');
	var right = options.rightButton ? document.getElementById(options.rightButton) : document.getElementById('HslideRight');
	if (left && right) {
		domHelper.addEvent(left, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.HslideLeft()) {
				domHelper.cssjs('add', left, 'off');
				left.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', right, 'off');
			right.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
		domHelper.addEvent(right, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.HslideRight()) {
				domHelper.cssjs('add', right, 'off');
				right.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', left, 'off');
			left.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
	}


	var Bleft = options.BleftButton ? document.getElementById(options.BleftButton) : document.getElementById('HslideBleft');
	var Bright = options.BrightButton ? document.getElementById(options.BrightButton) : document.getElementById('HslideBright');
	if (Bleft && Bright) {
		domHelper.addEvent(Bleft, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.HslideBleft()) {
				domHelper.cssjs('add', Bleft, 'off');
				Bleft.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', Bright, 'off');
			Bright.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
		domHelper.addEvent(Bright, 'click', function(e) {
			if (this.anim && this.anim.isAnimated()) {
				domHelper.cancelClick(e);
				return;
			}
			if (!this.HslideBright()) {
				domHelper.cssjs('add', Bright, 'off');
				Bright.setAttribute('abled', 'disabled');
			}
			domHelper.cssjs('remove', Bleft, 'off');
			Bleft.removeAttribute('disabled');
			domHelper.cancelClick(e);
		}, false, null, this);
	}



	// button initialize
	if (this.movedBy >= this.HslideWidth * this.itemWidth) {
		domHelper.cssjs('remove', left, 'off');
		left.removeAttribute('disabled');
	} else {
		domHelper.cssjs('add', left, 'off');
		left.setAttribute('disabled', 'disabled');
	}
	if (this.movedBy < this.maxWidth - this.HslideWidth * this.itemWidth) {
		domHelper.cssjs('remove', right, 'off');
		right.removeAttribute('disabled');
	} else {
		domHelper.cssjs('add', right, 'off');
		right.setAttribute('disabled', 'disabled');
	}
}
HSlidingBox.prototype = {
	HslideBy: function(delta) {
		this.anim = new Motion(this.boxEl, {points: {by: [delta, 0]}}, 0.5, Easing.easeBoth);
		this.anim.animate();
	},
	HslideLeft : function() {
		if (this.movedBy >= this.HslideWidth * this.itemWidth) {
			this.HslideBy(this.HslideWidth * this.itemWidth);
			this.movedBy -= this.HslideWidth * this.itemWidth;
		}
		return (this.movedBy >= this.HslideWidth * this.itemWidth);
	},
	HslideRight : function() {
		if (this.movedBy < this.maxWidth - this.HslideWidth * this.itemWidth) {
			this.HslideBy(-this.HslideWidth * this.itemWidth);
			this.movedBy += this.HslideWidth * this.itemWidth;
		}
		return (this.movedBy < this.maxWidth - this.HslideWidth * this.itemWidth);
	}
}