/**
 * @author nd
 */

var dkdMooScroller = MooScroller.extend ({
	
	options: {
		scrollerBox: {
			name: 'scrollerBox', // box where the scrollarea will be insert into
			paddingtop: 20,
			paddingbottom: 20,
			paddingleft: 20,
			paddingright: 0
		},
		scrollerContent: {
			name: 'scrollerContent'
			
		},
		scrollarea: {
			name: 'scrollArea',
			paddingtop: 0,
			paddingbottom: 0,
			paddingleft: 15,
			paddingright: 0
		},
		scrollBarContainer: {
			name: 'scrollBarContainer',
			margintop: 10
		},
		scrollKnob: 'scrollKnob',
		scrollBar: {
			width: 38	//px	
		},
		scrollBarButton: {
			width: 11, //px
			height: 10 //px
		}
	},
	
	initialize: function(parentid, options){
		
		// The ScrollerBox
		this.scrollerBox = $E('#' + parentid + ' .'+ this.options.scrollerBox.name);
		this.scrollerBoxHeight = this.scrollerBox.getStyle('height').toInt();
		this.scrollerBoxWidth = this.scrollerBox.getStyle('width').toInt();
		
		// set padding to the scrollerBox 
		this.scrollerBox.setStyles({
			'padding-top': this.options.scrollerBox.paddingtop,
			'padding-bottom': this.options.scrollerBox.paddingbottom,
			'padding-left': this.options.scrollerBox.paddingleft,
			'padding-right': this.options.scrollerBox.paddingright
		});
		
		// Wenn Bowser IE muss das Box Model beachtet werden
		if (window.ie){
			this.scrollerBox.setStyles({
				'height': this.scrollerBoxHeight - this.options.scrollerBox.paddingtop - this.options.scrollerBox.paddingbottom,
				'width': this.scrollerBoxWidth - this.options.scrollerBox.paddingleft - this.options.scrollerBox.paddingright	
			});
			
		}
		
		// Resize the width of ScrollerContent Box 
		this.scrollerContent = $E('#' + parentid + ' .'+ this.options.scrollerContent.name);
		this.scrollerContentWidth = this.scrollerBoxWidth 
								   - this.options.scrollBar.width
								   - this.options.scrollerBox.paddingleft;
								   
		this.scrollerContent.setStyle('width',this.scrollerContentWidth);
		
		// Resize the height of ScrollerContent Box 
		this.scrollerContentHeight = this.scrollerBoxHeight
		 							 - this.options.scrollerBox.paddingtop
									 - this.options.scrollerBox.paddingbottom;
									 
		this.scrollerContent.setStyle('height',this.scrollerContentHeight);		
							 		
		// insert the scrollarea object into the DOM
		this.createScrollbar();		
		
		// initialize the parent class		
		this.parent(this.scrollerContent, $E('#' + parentid + ' .'+ this.options.scrollKnob),{ 
			scrollLinks: {
				forward: 	$E('#' + parentid + ' .'+ this.options.scrollLinks.forward),
				back: 		$E('#' + parentid + ' .'+ this.options.scrollLinks.back)
		}}); 
		
		
	},
	
	/*
	 * createScrollbar
	 * 
	 * This function insert the scrollbar object into the DOM
	 * 
	 * 	<div class="scrollarea">
	 *		<div class="scrollForward"></div> 
	 * 		<div class="scrollBack"></div>
	 *		<div class="scrollBarContainer">
	 *			<div class="scrollKnob"></div>
	 *		</div>
	 *  </div>
	 */
	createScrollbar: function(){
		
		var scrollarea = new Element('div', {'class': this.options.scrollarea.name,
											 'styles':{
											 	'height': this.scrollerContentHeight,
												'padding-top': this.options.scrollarea.paddingtop,
												'padding-bottom': this.options.scrollarea.paddingbottom,
												'padding-left': this.options.scrollarea.paddingleft,
												'padding-right': this.options.scrollarea.paddingright
											 }});
		// Wenn Bowser IE muss das Box Model beachtet werden
		// Der Padding der Scrollarea muss von der Breite der Scrollbar abgezogen werden. 
		// Da der IE durch das Boxmodel die Werte addiert und dadurch zu Breit wird
		if (window.ie){
			scrollarea.setStyle('width',this.options.scrollBar.width - this.options.scrollarea.paddingleft - this.options.scrollarea.paddingright );
		}									 
											
		var sbcHeight = this.scrollerContentHeight 
						- (2 * this.options.scrollBarButton.height.toInt())
						- this.options.scrollBarContainer.margintop;
						 
											
		var scrollbarcontainer = new Element('div', {'class':this.options.scrollBarContainer.name,
													 'styles': {
													 	'height':sbcHeight,
														'margin-top': this.options.scrollBarContainer.margintop
													 }});
		
		new Element('div', {'class':this.options.scrollLinks.back}).injectInside(scrollarea);								 
		new Element('div', {'class':this.options.scrollLinks.forward}).injectInside(scrollarea);		
		
		new Element('div', {'class':this.options.scrollKnob}).injectInside(scrollbarcontainer);
		scrollbarcontainer.injectInside(scrollarea);
			
		scrollarea.injectInside(this.scrollerBox);
	}
});