$(document).ready(function() {
    $musik = $('#musik_highlights');
    $buehne = $('#buehne_highlights');
    $ticket = $('#ticket_highlights');

    $sc = {
	findScrollPositions: function( $ele ) {
	    var ret = [];
	    $ele.children('p').each( function(i) {
		ret[i] = ( $(this).prev('img').is('img') ) ?
		    $(this).prev('img').position().top :
		    $(this).position().top;
	    });
	    return ret;
	},
	scroll: {},
	    speed: 800,
	interval: null,
	repeatScroll: function( e ) {
	    e.step = e.currentTarget.scroll.step;
	    next = e.currentTarget.scroll.current + e.step;
	    
	    if( 0 !== e.step &&
		'number' === typeof e.currentTarget.scroll.positions[next] ) {
		$sc.startScroll( e );
	    }
	    else
		e.currentTarget.scroll.runs = 0;
	},
	startScroll: function ( e ) {
	    next = e.currentTarget.scroll.current + e.step;
	    if( 'number' === typeof e.currentTarget.scroll.positions[next] ) {
		e.currentTarget.scroll.runs = e.step;
		e.currentTarget.scroll.current = next;
		pos = e.currentTarget.scroll.positions[next];
		now = $(e.currentTarget.scroll).scrollTop();
		speed = ( Math.max(pos,now) - Math.min(pos,now) ) * e.currentTarget.scroll.speed;
		$(e.currentTarget.scroll).animate({
		    scrollTop: pos
		}, speed, 'swing', function() { $sc.repeatScroll( e ) });
	    }
	},
	mouseenter: function ( e ) {
	    step = $(e.currentTarget).hasClass('down') ? 1 : -1;
	    //e.currentTarget.scroll.speed = 2;
	    //e.currentTarget.scroll.step = step;
	    if( e.currentTarget.scroll.runs === 0 || 
		e.currentTarget.scroll.runs !== step ) {
		$(e.currentTarget.scroll).stop(true,true);
		//e.step = step;
		//$sc.startScroll( e );
	    }
	},
	mouseleave: function( e ) {
	    e.currentTarget.scroll.step = 0;
	},
	mousedown: function( e ) {
	    e.step = e.currentTarget.scroll.step = $(e.currentTarget).hasClass('down') ? 1 : -1;
	    $(e.currentTarget.scroll).stop(true);
	    e.currentTarget.scroll.speed = 0.8;
	    $sc.startScroll( e );
	},
	mouseup: function( e ) {
	    e.step = e.currentTarget.scroll.step;
	    e.currentTarget.scroll.step = 0;
	    $(e.currentTarget.scroll).stop(true);
	    //$(e.currentTarget.scroll).stop(true);
	    e.currentTarget.scroll.current -= e.step;
	    e.currentTarget.scroll.speed = 0.8;
	    $sc.startScroll( e );
	},
	getBorderColor: function( $ele, hover ) {
	    switch($ele.attr('id')) {
		case 'musik_highlights':
		    if(!hover)
			return '#D31F28';
		    return 'white';
		break;
		case 'ticket_highlights':
		    if(!hover)
			return 'white';
		    return '#F8A113';
		break;
		case 'buehne_highlights':
		    if(!hover)
			return '#231F1E';
		    return 'white';
		break;
	    }
	},
	prepare: function( $ele ) {
	    $ele.before(
		$('<div id="'+$ele.attr('id')+'_scroll" class="scroll"></div>')
		.css({
		    'width':170,
		    'height':40,
		    'position':'absolute',
		    'top':$ele.position().top,
		    'left':$ele.position().left,
		    'zIndex':3,
		    'backgroundColor':$ele.css('backgroundColor')
		})
		.append(
		    $('<a href="#" class="up"></a>')
		    .css({
			'display':'block',
			'float':'left',
			'height':40,
			'width':'50%',
			'outline':'none'
		    })
		    .append(
			$('<span></span>')
			.css({
			    'display':'block',
			    'position':'relative',
			    'width':0,
			    'height':0,
			    'top':14,
			    'left':12,
			    'borderStyle':'solid',
			    'borderWidth':'0px 12px 12px 12px',
			    'borderColor':'transparent transparent '+$sc.getBorderColor( $ele )
			})
		    )
		    .hover( function() {
			$(this).data('bC',$(this).children('span').css('borderColor') );
			if( this.scroll.current !== 0 )
			    $(this).children('span').css('borderColor', 'transparent transparent ' + $sc.getBorderColor( $ele, 1 ) );
		    }, function() {
			$(this).children('span').css('borderColor', $(this).data('bC') );
		    })

		)
		.append(
		    $('<a href="#" class="down"></a>')
		    .css({
			'display':'block',
			'float':'left',
			'height':40,
			'width':'50%',
			'outline':'none'
		    })
		    .append(
			$('<span></span>')
			.css({
			    'display':'block',
			    'position':'relative',
			    'width':0,
			    'height':0,
			    'top':14,
			    'left':50,
			    'borderStyle':'solid',
			    'borderWidth':'12px 12px 0px 12px',
			    'borderColor':$sc.getBorderColor( $ele )+' transparent transparent'
			})
		    )
		    .hover( function() {
			$(this).data('bC',$(this).children('span').css('borderColor') );
			if( this.scroll.positions.length !== this.scroll.current + 1 )
			    $(this).children('span').css('borderColor', $sc.getBorderColor( $ele, 1 ) + ' transparent transparent' );
		    }, function() {
			$(this).children('span').css('borderColor', $(this).data('bC') );
		    })
		)
	    );	    
	
	    ele = $ele.get(0);
	    ele.positions = $sc.findScrollPositions( $ele );
	    ele.current = 0;
	    ele.runs = 0;
	    ele.step = 0;
	    ele.speed = 2;

	    $ele.css({
		//'width': 220,
		'top': $ele.position().top + 40,
		'height': $ele.height() - 40,
		'overflow': 'hidden'
	    })
	    .append(
	       	$('<div></div>')
		.css({
		    'clear':'both',
		    'width':170,
		    'height':600
		})
	    );
	    //console.log( $ele.height(), $ele.get(0).offsetHeight, $ele.get(0).scrollHeight );

	   $('#' + $ele.attr('id')+'_scroll')
	   .find('.up,.down').each( function(i) {
		this.scroll = ele;
		$(this)
		.bind('mouseenter', $sc.mouseenter )
		.bind('mouseleave', $sc.mouseleave )
		.bind('mousedown', $sc.mousedown )
		.bind('mouseup', $sc.mouseup );
	    });
	}
    }
    $sc.prepare( $musik );
    $sc.prepare( $ticket );
    $sc.prepare( $buehne );
});