/** Portfolio slider **/
var sitelist;
var sites;
var pageOffset;
var pageWidth;
var siteWidth;
var hiddenSites = 0.4;
function move( e, steps ) {
    if ( e.clientX < (pageOffset.left+(pageWidth/2)) ) {
        steps = -1;
    }
    if ( !steps ) {
        steps = 1;
    }

    var activeIndex = -1 * Math.round ( parseInt ( sitelist.css('left') ) / siteWidth );
    var elements = sites.length 
    var nextIndex = activeIndex + steps;
    if ( nextIndex < 0 || nextIndex >= elements ) return;
    sites.eq ( activeIndex ).animate({ opacity: hiddenSites }, 700);
    sites.eq ( nextIndex ).animate({ opacity: 1 }, 700);
    sitelist.animate({ left: -1 * nextIndex * siteWidth });
}

function makeSidescroll() {
    sitelist = $('#sitelist > ul');
    sites = sitelist.children('li');
    pageOffset = $('#page').offset();
    pageWidth = $('#page').outerWidth();
    siteWidth = sites.first().outerWidth();
    sitelist.css('position', 'absolute')
            .css('top', 0)
            .css('left', 0)
            .css('overflowY', 'hidden');
    sites.css('clear', 'none');
    sites.slice(1).css('opacity', hiddenSites);
	sitelist.parent().width(sites.length * siteWidth).click(move);
}

/** Canvas drawing **/
var drawLength = 0;
function drawMore( context, cursors ) { 
    // Only draw if supported
    if ( !context ) return;
    
    for ( var i = 0; i < cursors.length; i++ ) {
        var cursor = cursors[i]; 
        var random = Math.random() * 100;
        if ( random < 2 ) {
            // In some cases, we start moving orthogonally one way
            var temp = cursor.vx;
            cursor.vx = cursor.vy;
            cursor.vy = temp;
        } else if ( random < 4 ) {
            // In some cases, we start moving orthogonally the other way
            var temp = cursor.vx;
            cursor.vx = -cursor.vy;
            cursor.vy = -temp;
        }
        
        if ( cursor.x <= 0 ) {
            cursor.x = 0;
            cursor.vx = 1
            cursor.vy = 0;
        }
        if ( cursor.x >= context.canvas.width ) {
            cursor.x = context.canvas.width;
            cursor.vx = -1;
            cursor.vy = 0;
        }
        if ( cursor.y <= 0 ) {
            cursor.y = 0;
            cursor.vy = 1
            cursor.vx = 0;
        }
        if ( cursor.y >= context.canvas.height ) {
            cursor.y = context.canvas.height;
            cursor.vy = -1;
            cursor.vx = 0;
        }
        
        context.beginPath();
        context.moveTo ( cursor.x, cursor.y );
        
        cursor.x += cursor.step * cursor.vx;
        cursor.y += cursor.step * cursor.vy;
        
        context.lineTo ( cursor.x, cursor.y );
        context.stroke();
        context.closePath();
    }
}

/** Init script **/
$(function(){
	$('.showme').each(function(){
		$(this).prev(".opener:first").click(function(){
			var shower = $(this).next(".showme");
			if ( shower.filter(':visible').length ) {
				$(this).next(".showme").slideUp("fast");
			} else {
				$(this).next(".showme").slideDown("fast");
			}
		})
	});
    makeSidescroll();
    $('#scratch').attr('width', $(document).width());
    $('#scratch').attr('height', $(document).height());
    var drawingContext = document.getElementById('scratch');
    if ( drawingContext.getContext ) {
        drawingContext = drawingContext.getContext('2d');
        drawingContext.strokeStyle = '#3C6FA9';
        drawingContext.lineWidth = 1;
        var step = 3;
        var time = 100;
        var quicklyUntilLength = 4000;
        var cursors = [
            { x: 0, y: 0, vx: 1, vy: 0, step: step },
            { x: parseInt ( drawingContext.canvas.width / 2 ), y: 0, vx: 0, vy: 1, step: step },
            { x: drawingContext.canvas.width, y: 0, vx: 0, vy: 1, step: step },
            { x: drawingContext.canvas.width, y: parseInt ( drawingContext.canvas.height / 2 ), vx: -1, vy: 0, step: step },
            { x: drawingContext.canvas.width, y: drawingContext.canvas.height, vx: -1, vy: 0, step: step },
            { x: parseInt ( drawingContext.canvas.width / 2 ), y: drawingContext.canvas.height, vx: -1, vy: 0, step: step },
            { x: 0, y: parseInt ( drawingContext.canvas.height / 2 ), vx: 0, vy: -1, step: step },
            { x: 0, y: drawingContext.canvas.height, vx: 0, vy: -1, step: step }
        ];
        for ( var i = 0; i < quicklyUntilLength; i += step ) {
            drawMore ( drawingContext, cursors )
        }
        setInterval ( function(){
            drawMore ( drawingContext, cursors )
        }, time );
    }
});