var curScrollPanel=null
var scrollPanelArr=new Array()

var default_text_color="#000"
var default_text_font="Verdana"
var default_text_size=10
var default_bg_color="transparent"


function scrollablePanel(name,xpos,ypos,wid,hgt,the_text,text_color,text_size,text_font,bg_color,vhgt) {

	this.owner=main
	this.name=name
	this.xpos=xpos
	this.ypos=ypos
	
	
	this.width=wid
	this.height=hgt	
	this.is_combobox=false
	
	if(vhgt) {
		this.is_combobox=true
		this.vhgt=vhgt
		
	}
	else {
		this.vhgt=hgt
	}

	
	this.the_text=the_text
	


	this.text_color=default_text_color
	if(text_color) {
		this.text_color=text_color
	}
	
	this.text_size=default_text_size
	if(text_size) {
		this.text_size=text_size
	}
	
	this.text_font=default_text_font
	if(text_font) {
		this.text_font=text_font
	}	

	this.bg_color=default_bg_color
	if(bg_color) {
		this.bg_color=bg_color
	}
	
	this.container=name+"_contentContainer"
	this.textBlock_name=name+"_textBlock"
	this.scrubber_name=name+"_scrubber"
	this.trackBar_name=name+"_trackBar"
	this.scrollerContainer_name=name+"_scrollerContainer"
	
	
	this.local_offset=12 //12px from top, 10 px for top arrow + 2px for spacing
	this.world_offset=ypos+this.local_offset 
	this.track_length=hgt-24 //24 because scroll arrows are 10px tall * 2 + 2px spacing for each
	this.start_scroll=this.local_offset 
	this.scroll_amount=3
	this.scrollbar_content_spacing=1
	this.scrollTween=null
	this.padding=6
	
	this.scrubber_color="#000"
	this.trackbar_color="#AAA"
	this.arrow_color="#EEE"
	this.arrow_button_color="#777"
	
	this.mask_length=this.height
	this.content_length=0


	scrollPanelArr[this.name]=this
		
	//this.createPanel=createPanel
	//this.createScroller=createScroller
	
	this.createPanelHolder()
	
	this.createPanel()
	this.createScroller()
	
	
	
	this.scrubberRef.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.startDrag))
	this.scrubberRef.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.endDrag))
	this.owner.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.mainCanvasMouseLeave))
	this.owner.addEventListener("mouseMove", Silverlight.createDelegate(this, this.whenMouseMoves))
	
	this.trackBarRef.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.pressTrackBar))
	
	this.upBtnRef.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.scrollerArrowPress))
	this.upBtnRef.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.scrollerArrowRelease))
	
	this.downBtnRef.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.scrollerArrowPress))
	this.downBtnRef.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.scrollerArrowRelease))
	
	this.contentHolderRef.addEventListener("mouseEnter", Silverlight.createDelegate(this, this.scrollPanelOver))
	this.contentHolderRef.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.scrollPanelOut))

}





scrollablePanel.prototype.scrollerArrowPress=function(s) {

	if(this.scrollTween) {
		this.scrollTween.stop()
	}	
	
	this.which_arrow=s.name
	
	this.scrollUpDownInt=setInterval(Silverlight.createDelegate(this, this.scrollUpDown),10)
	s.captureMouse()
}

scrollablePanel.prototype.scrollerArrowRelease=function(s,e) {
	clearInterval(this.scrollUpDownInt)	
	s.releaseMouseCapture()
}

scrollablePanel.prototype.scrollUpDown=function() {

	var scrubber=this.scrubberRef
	var scroll_amount=this.scroll_amount
	var btn_name=this.which_arrow.split("_")[1]
	if(btn_name=="Up") {
	
		var pre_check=scrubber["Canvas.Top"]-scroll_amount
		
		if(pre_check>this.local_offset) {
			scrubber["Canvas.Top"]=scrubber["Canvas.Top"]-scroll_amount
		}
		else {
			scrubber["Canvas.Top"]=this.local_offset
		}
	}
	else {
		
		var calc_bottom_edge=this.track_length+this.local_offset-scrubber.height
		
		var pre_check=scrubber["Canvas.Top"]+scroll_amount
		
		if(pre_check<calc_bottom_edge) {
			scrubber["Canvas.Top"]=scrubber["Canvas.Top"]+scroll_amount
		}
		else {
			scrubber["Canvas.Top"]=calc_bottom_edge
		}
	}
	
	this.updatePanel(scrubber["Canvas.Top"])	
}


scrollablePanel.prototype.updatePanel=function(new_val) {
	var val=((new_val-this.start_scroll)/(this.track_length-this.scrubberRef.height))*100
	var canvas_prop="Canvas.Top"
	var per=val/100
	this.contentContainerRef[canvas_prop]=((this.content_length - this.mask_length)*per)*-1
}







scrollablePanel.prototype.startDrag=function(s,e) {
	
	this.scrubber_down=1
	this.click_x=e.getPosition(s).x	
	this.click_y=e.getPosition(s).y
	
	if(this.scrollTween) {
		this.scrollTween.stop()
	}	

	this.mouseCheckInt=setInterval(Silverlight.createDelegate(this, this.mouseChecker),10)	
	s.captureMouse()
}

scrollablePanel.prototype.endDrag=function(s,e) {
	this.scrubber_down=0
	clearInterval(this.mouseCheckInt)
	s.releaseMouseCapture()
}

scrollablePanel.prototype.mainCanvasMouseLeave=function(s) {
	this.scrubber_down=0
	clearInterval(this.mouseCheckInt)
	s.releaseMouseCapture()
}

scrollablePanel.prototype.mouseChecker=function() {

	if(this.scrubber_down) {

		var new_val=this._root_ymouse-this.world_offset+this.local_offset-this.click_y
		var calc_scroll_end=this.track_length+this.local_offset-this.scrubberRef.height
		var val=((new_val-this.start_scroll)/(this.track_length-this.scrubberRef.height))*100
		var per=val/100
		var canvas_prop="Canvas.Top"			
		
		if(new_val>this.start_scroll && new_val<calc_scroll_end) {
			this.scrubberRef[canvas_prop]=new_val
			this.contentContainerRef[canvas_prop]=((this.content_length - this.mask_length)*per)*-1
		}
		else if(new_val<=this.start_scroll) {
			this.scrubberRef[canvas_prop]=this.start_scroll
			this.contentContainerRef[canvas_prop]=0
		}
		else if(new_val>=calc_scroll_end) {
			this.scrubberRef[canvas_prop]=calc_scroll_end
			this.contentContainerRef[canvas_prop]=-this.content_length+this.mask_length
		}
	}
	else {
		clearInterval(this.mouseCheckInt)
		this.scrubberRef.releaseMouseCapture()
	}
}

scrollablePanel.prototype.whenMouseMoves=function(s, e) {
    this._root_xmouse = e.getPosition(null).x
    this._root_ymouse = e.getPosition(null).y
}









scrollablePanel.prototype.pressTrackBar=function(s,e,diff) {

	var time_to_scroll
	var click_x
	var click_y
	var click_prop
	var scrubber_prop
	var new_val
	
	var	scrubber=this.scrubberRef
	
	if(e) { // if event came from trackbar press
		click_x=e.getPosition(s).x
		click_y=e.getPosition(s).y
	
		time_to_scroll = 2.0  //on track bar press - time for scroll bar animation
	}
	else { //else event came from mouse wheel
	
		time_to_scroll = 0.0001  //on mouse wheel scroll - time for scroll bar animation
		
		var scroll_amount=6
		
		if(diff>0) {
			click_y=(scrubber["Canvas.Top"]-this.local_offset)-scroll_amount
		}
		else {	
			click_y=(scrubber["Canvas.Top"]-this.local_offset+scrubber.height)+scroll_amount
		}
		
		if(click_y<0) {
			click_y=0
		}
		else if(click_y>this.track_length) {
			click_y=this.track_length
		}
	}
	
	
	click_prop=click_y
	canvas_prop="Canvas.Top"
	scrubber_prop=scrubber.height
	me=this
	
	
	//handles muliptle trackbar clicks
	if(this.scrollTween) {
		this.scrollTween.stop()
	}
	
	if(click_prop < scrubber[canvas_prop]) {
		this.scrollTween = new Tween(new Object(),'st',Tween.strongEaseOut,scrubber[canvas_prop],(click_prop+this.local_offset),time_to_scroll)
	}
	else {
		this.scrollTween = new Tween(new Object(),'st',Tween.strongEaseOut,scrubber[canvas_prop],(click_prop-scrubber_prop+this.local_offset),time_to_scroll)
	}
	
	var obj=scrollPanelArr[this.name] //needed for internal onMotionChanged access of propeties
	
	this.scrollTween.onMotionChanged = function(event){
		scrubber[canvas_prop] = event.target._pos		
		new_val=event.target._pos
		val=((new_val-obj.start_scroll)/(obj.track_length-scrubber.height))*100	
		var per=val/100
		s.findName(obj.container)[canvas_prop]=((obj.content_length - obj.mask_length)*per)*-1	
	}

	this.scrollTween.start()
}










scrollablePanel.prototype.updateMyText=function(new_text) {
		
	this.textBlockRef.text=new_text
	
	if(this.scrollTween) {
		this.scrollTween.stop()
	}
	
	this.content_length=this.textBlockRef.actualHeight
	
	this.reDraw()
}

scrollablePanel.prototype.reDraw=function() {

	//hide scroll bar if content isnt big enough to scroll
	
	if(this.content_length<=this.mask_length) {
		
		this.scrollerContainerRef.visibility="Collapsed"
	}
	else {
		this.scrollerContainerRef.visibility="Visible"		
		this.scrubberRef.height=Math.ceil( (this.mask_length/this.content_length) * this.track_length)
		if(this.scrubberRef.height<12) {
			this.scrubberRef.height=13
		}
	}
	//reset scrubber bar and canvas to inital spots	
	this.scrubberRef["Canvas.Top"]=this.local_offset
	this.contentContainerRef["Canvas.Top"]=0
	
	
}










scrollablePanel.prototype.setPanelVisibility=function(val) {
	if(val) {
		this.panelHolderRef.visibility="Visible"
	}
	else {
		this.panelHolderRef.visibility="Collapsed"
	}
}

scrollablePanel.prototype.createPanelHolder=function() {

	var xaml_str='<Canvas Name="'+this.name+'_panelHolder" Canvas.Top="'+this.ypos+'" Canvas.Left="'+this.xpos+'" /> '
	
	xamlTags=plugin.content.createFromXaml(xaml_str)
	main.children.add(xamlTags)
	
	this.panelHolderRef=this.owner.findName(this.name+"_panelHolder")

}


scrollablePanel.prototype.createPanel=function() {

	//var xaml_str='<Canvas Name="'+this.name+'_contentHolder" Canvas.Top="'+this.ypos+'" Canvas.Left="'+this.xpos+'" > '
	var xaml_str='<Canvas Name="'+this.name+'_contentHolder" Canvas.Top="0" Canvas.Left="0" > '
	xaml_str+=' <Rectangle Fill="'+this.bg_color+'" Height="'+this.height+'" Width="'+this.width+'"></Rectangle>'
	xaml_str+=' <Canvas.Clip>'
	xaml_str+='   <RectangleGeometry Name="'+this.name+'_contentHolderClip" Rect="0,0,'+this.width+','+this.height+'" />'
	xaml_str+=' </Canvas.Clip>'
	xaml_str+=' <Canvas Name="'+this.container+'" Canvas.Top="0" Canvas.Left="0" > '
	
	if(this.is_combobox) {
		xaml_str+=this.the_text
	}
	else {
		xaml_str+='  <TextBlock Canvas.Left="'+this.padding+'" Name="'+this.textBlock_name+'" TextWrapping="Wrap" Foreground="'+this.text_color+'" FontSize="'+this.text_size+'" FontFamily="'+this.text_font+'" Width="'+(this.width-(this.padding*2))+'"></TextBlock>'
	}
	
	xaml_str+=' </Canvas>'
	xaml_str+='</Canvas>'

	xamlTags=plugin.content.createFromXaml(xaml_str)
	this.panelHolderRef.children.add(xamlTags)		
	
	
	this.contentContainerRef=this.owner.findName(this.container)
	this.contentHolderRef=this.owner.findName(this.name+"_contentHolder")
	
	if(this.is_combobox) {
		this.content_length=this.vhgt
	}
	else {
		this.textBlockRef=this.owner.findName(this.textBlock_name)
		this.textBlockRef.text=this.the_text
		this.content_length=Math.ceil(this.textBlockRef.actualHeight)
	}
	
	
}


scrollablePanel.prototype.createScroller=function() {

	var left_pos
	if(this.is_combobox) {
		left_pos=this.width-10
	}
	else {
		left_pos=this.width+this.scrollbar_content_spacing
	}
	
	var xaml_str='<Canvas Name="'+this.scrollerContainer_name+'" Canvas.Top="0" Canvas.Left="'+left_pos+'">'
		xaml_str+=' <Canvas Name="'+this.name+'_Up" MouseLeftButtonDown="scrollerArrowPress" MouseLeftButtonUp="scrollerArrowRelease"> '
		xaml_str+='   <Rectangle Fill="'+this.arrow_button_color+'" Width="10" Height="10" />'
		xaml_str+='   <Path Data="M 0,0 L4,4 -4,4z" Fill="'+this.arrow_color+'" Canvas.Left="5" Canvas.Top="3" />'
		xaml_str+=' </Canvas>'
		xaml_str+=' <Canvas Name="'+this.name+'_Down" Canvas.Top="'+(this.height-10)+'"> '
		xaml_str+='  <Rectangle Fill="'+this.arrow_button_color+'" Width="10" Height="10" /> '
		xaml_str+='  <Path Data="M 0,0 L4,-4 -4,-4z" Fill="'+this.arrow_color+'" Canvas.Left="5" Canvas.Top="7" />'
		xaml_str+=' </Canvas>'
		xaml_str+=' <Rectangle Name="'+this.name+'_TrackBarVisual" Fill="'+this.trackbar_color+'" Height="'+(this.height-22)+'" Width="10" Canvas.Top="11" /> '
		xaml_str+=' <Rectangle Name="'+this.trackBar_name+'" Fill="transparent" Height="'+(this.height-23)+'" Width="10" Canvas.Top="12" /> '
		xaml_str+=' <Rectangle Name="'+this.scrubber_name+'" Fill="'+this.scrubber_color+'" Height="50" Width="8" Canvas.Top="12" Canvas.Left="1" /> '
		//xaml_str+=''
		xaml_str+='</Canvas>'
		

	xamlTags=plugin.content.createFromXaml(xaml_str)
	this.panelHolderRef.children.add(xamlTags)	
	
	this.scrubberRef=this.owner.findName(this.scrubber_name)
	this.scrollerContainerRef=this.owner.findName(this.scrollerContainer_name)
	this.trackBarRef=this.owner.findName(this.trackBar_name)
	this.upBtnRef=this.owner.findName(this.name+"_Up")
	this.downBtnRef=this.owner.findName(this.name+"_Down")
	
	this.reDraw()
}







scrollablePanel.prototype.scrollPanelOver=function(s,e) {
	curScrollPanel=this.name
}





scrollablePanel.prototype.scrollPanelOver=function(s,e) {
	curScrollPanel=this.name
}

scrollablePanel.prototype.scrollPanelOut=function(s,e) {
	curScrollPanel=null
}



// MouseWheel code from http://adomas.org/javascript-mouse-wheel/
if (window.addEventListener) {
    // DOMMouseScroll is for mozilla.
	window.addEventListener('DOMMouseScroll', mouseWheelChange,true)
}
// IE/Opera.
window.onmousewheel = document.onmousewheel = mouseWheelChange


function mouseWheelChange(event) {

    var delta = 0;
    
    if (!event) { // For IE.
        event = window.event;
    }

    if (event.wheelDelta) { //IE/Opera.
        delta = event.wheelDelta
        // In Opera 9, delta differs in sign as compared to IE.
        if (window.opera) {
            delta = -delta;
        }
    }
    else if (event.detail) { // Mozilla case.
        // In Mozilla, sign of delta is different than in IE.
        delta = -event.detail    
    }



	//umm yeah, slight hack here...
	//only works if you name your reference variable is same name as your ScrollablePanel
	
	if(curScrollPanel) {
		var s=main.findName(curScrollPanel+"_trackBar")
		var e=null	
		
		if(isDefined(window,curScrollPanel)) {
			var sp=eval(curScrollPanel)
			if(sp.content_length>sp.mask_length) {
				sp.pressTrackBar(s,e,delta)
			}
		}
		
		else if(scrollPanelArr[curScrollPanel]) {		
			scrollPanelArr[curScrollPanel].pressTrackBar(s,e,delta)
		}
	}
    event.returnValue = false;
}


function isDefined(w, v)
{
	return (typeof(eval(w)[v]) != 'undefined');
}