//********************************************************************************************//
//		scrollbar
//********************************************************************************************//

//初期設定--------------------------------------------------------------------------------------

var target;
var mask;

var sc;
var up;
var track;
var down;

var upBtn;
var trackBtn;
var downBtn;

var yOffset;
var yMax;
var yMin;
var scMax;
var scMin;
var pm; //plusminus
var scrollPar = 1/3;
var targetY = 0;
var arrowCount = 0;

var tm = 0;
var ts = 0;
var cs;

var c = 0;
var cp = 0;

var trackY = 0;
var ev = false;

//------------------------------------------------------------------------------------------------------

//スクロールバー処理--------------------------------------------------------------------------------------

var scrollbar = {
	init : function(_target, _mask) {
		target = document.getElementById(_target);
		mask = document.getElementById(_mask);
		//alert(target.id, mask.id);
		sc = createElm("DIV","sc_container",target);
		up = createElm("DIV", "btn_up", sc);
		track = createElm("DIV", "tracker", sc);
		down = createElm("DIV", "btn_down", sc);
		
		upBtn = createElm("IMG", "upBtn", up);
		upBtn.setAttribute("src", "images/scrollbar_up.jpg");
		upBtn.setAttribute("alt", "up");
		
		trackBtn = createElm("IMG", "trackBtn", track);
		trackBtn.setAttribute("src", "images/scrollbar_track.jpg");
		//trackBtn.style.height = track.offsetHeight * (mask.offsetHeight / target.offsetHeight) + "px";
		
		downBtn = createElm("IMG", "downBtn", down);
		downBtn.setAttribute("src", "images/scrollbar_down.jpg");
		downBtn.setAttribute("alt", "down");
		
		target.style.position = "relative";
		target.style.overflow = "hidden";
		
		scrollbar.setScroll();
		scrollbar.startScroll();	
	},
	setScroll : function() {
		setX(mask,0);
		setY(mask,0);
		
		sc.style.width = offW(upBtn) + "px";
		sc.style.height = parseInt(target.style.height) + "px";
		sc.style.backgroundImage = "url(images/scrollbar_bg.jpg)";
		sc.style.backgroundRepeat = "repeat-y";
		setY(sc,0);
		setX(sc, offW(target) - parseInt(sc.style.width));
		
		up.style.width = offW(upBtn) + "px";
		up.style.height = offH(upBtn) + "px";
		up.style.cursor = "pointer";
		setY(up,0);
		
		down.style.width = offW(downBtn) + "px";
		down.style.height = offH(downBtn) + "px";
		down.style.cursor = "pointer";
		setY(down,parseInt(sc.style.height) - parseInt(down.style.height));
		
		track.style.cursor = "pointer";
		
		yMin = offT(sc) + getH(up);
		yMax = getH(sc) - getH(down);
		
		scMin = getH(up) + offT(track);
		scMax = (getH(sc) - getH(up) + getH(down)) - offH(track);
		
		tm = down.offsetTop - (track.offsetHeight+(yMin+2));
		cs = mask.offsetHeight - target.offsetHeight;
		
		
		if ( (scMax - scMin) > 0 ) {
			
		}
		
	},
	startScroll : function() {
		dom.event.addEventListener(up, "click", scrollbar.upHandler);
		dom.event.addEventListener(down, "click", scrollbar.downHandler);
		
		dom.event.addEventListener(down, "mouseover", scrollbar.overHandler);
		dom.event.addEventListener(up, "mouseover", scrollbar.overHandler);
		dom.event.addEventListener(track, "mouseover", scrollbar.overHandler);
		dom.event.addEventListener(down, "mouseout", scrollbar.outHandler);
		dom.event.addEventListener(up, "mouseout", scrollbar.outHandler);
		dom.event.addEventListener(track, "mouseout", scrollbar.outHandler);
		//dom.event.addEventListener(track, "click", scrollbar.trackDown);
		scrollbar.drag(track,track,yMin,0,yMax,0);
	},
	
	overHandler : function(evt) {
		/*
		if(evt.target.id == "downBtn"){
			downBtn.setAttribute("src", "images/scrollbar_down_on.jpg");
		} else if (evt.target.id == "upBtn"){
			upBtn.setAttribute("src", "images/scrollbar_up_on.jpg");
		} else {
			trackBtn.setAttribute("src", "images/scrollbar_track_on.jpg");
		}
		*/
	},
	
	outHandler : function(evt) {
		/*
		if(evt.target.id == "downBtn"){
			downBtn.setAttribute("src", "images/scrollbar_down.jpg");
		} else if (evt.target.id == "upBtn"){
			upBtn.setAttribute("src", "images/scrollbar_up.jpg");
		} else {
			trackBtn.setAttribute("src", "images/scrollbar_track.jpg");
		}
		*/
	},
	
	upHandler : function(evt) {
		//alert(evt.target.id);
		//pm = (evt.target.id == "upBtn") ? 1 : -1;
		//targetY += (mask, track.offsetTop + (track.offsetHeight * pm ) * scrollPar);
		pm = 1;
		scrollbar.scrollArrow();
	},
	downHandler : function() {
		pm = -1;
		scrollbar.scrollArrow();
	},
	
	scrollArrow : function() {
		cp = tm / 5;
		if(pm == "1") {
			
			if(track.offsetTop > up.offsetHeight+up.offsetTop) {
				if(track.offsetTop < (up.offsetHeight+up.offsetTop)+cp) {
					setY(track,yMin+1);
					setY(mask,0);
				} else {
					setY(track,track.offsetTop-cp);
					setY(mask,mask.offsetTop+(cs/6));
				}
			} else {
				setY(mask, 0);
			}
		} else {
			if(track.offsetTop < down.offsetTop) {
				if(track.offsetHeight+track.offsetTop > down.offsetTop-cp) {
					setY(track,up.offsetTop+up.offsetHeight + tm+1);
					setY(mask,-cs);
				}else{
					setY(track,track.offsetTop+cp);
					setY(mask,mask.offsetTop-(cs/6));
				}
			} else {
				//setY(mask, yMax);
			}
		}
		//scrollbar.common();
	},
	
	trackDown : function() {
		
	},
	
	common : function() {
		
		if ( targetY >= yMin ) {
				targetY = yMin;
				setY(mask, 0);
		}
		if( targetY >= yMax) {
			targetY = yMax;
			setY(mask, yMax);
		}
	},
	
	drag : function(targetElm, dragableElm, dTop, dRight, dBottom, dLeft) {
		
		if( ! targetElm ) { return; }
  if( ! dragableElm ) { dragableElm = targetElm; }
  var mouseX, mouseY, targetX, targetY;
  var winSize = dom.misc.getWindowSize();
	
	targetElm.style.position = "absolute"; 
	targetElm.style.top = dTop+1 + "px";
	targetElm.style.left = dLeft + "px";
	
	var dWidth = targetElm.offsetWidth;
	var dHeight = targetElm.offsetHeight;
	
	var offH = parseInt(dTop) + dHeight;
	
  function dragEnd(evt) {
    dom.event.removeEventListener(document, 'mouseup', dragEnd, false);
    dom.event.stopPropagation(evt);
    dom.event.preventDefault(evt);
		
  };
	
	function endMove(evt) {
		dom.event.removeEventListener(document, 'mousemove', dragMove, false);
	}
	
 	function dragMove (evt) {
    var left = targetX - mouseX + evt.clientX;
    var top = targetY - mouseY + evt.clientY;
    var right = left + targetElm.offsetWidth;
    var bottom = top + targetElm.offsetHeight;
		//targetY += (mask, track.offsetTop + (track.offsetHeight * pm ) * scrollPar);
		
		ts = (track.offsetTop - (yMin+1));
		c = -Math.floor((ts/tm)*cs);
		setY(mask,c);
		
		if(dTop == null && dRight == null && dBottom == null && dLeft == null) {
			if( left > 0 &&  right < winSize.width && top > 0 && bottom < winSize.height ) {
				targetElm.style.top  = top + 'px';
			} else {
				dragEnd();
			}
		} else {
			if( top  > dTop && bottom < dBottom ) {
				targetElm.style.top  = top + 'px';
			} else {
				dragEnd();
			}
		}
    dom.event.stopPropagation(evt);
    dom.event.preventDefault(evt);
  };
  function dragStart(evt) {
    winSize = dom.misc.getWindowSize();
    mouseX = evt.clientX;
    mouseY = evt.clientY;
    targetX = targetElm.offsetLeft;
    targetY = targetElm.offsetTop;
    dom.event.addEvent(document, 'mousemove', dragMove, false);
    dom.event.addEvent(document, 'mouseup', endMove, false);
    dom.event.stopPropagation(evt);
   	dom.event.preventDefault(evt);
  };
  	dom.event.addEvent(dragableElm, 'mousedown', dragStart, false);
	}
	
};

//------------------------------------------------------------------------------------------------------

//スクロールバー実行--------------------------------------------------------------------------------------

dom.event.addEventListener(window, "load", init);
function init() {
	scrollbar.init("news","topic");
}