var scrollFx;
window.addEvent('domready', function() {
    scrollFx = new Fx.Scroll(window, {duration: 400, transition: Fx.Transitions.linear, fps: 30}); 
    var getSelectors = function() {
        scrollFx.set(0,0);
	    return $$('.selector').map(function(item, index){
            return (layout == 'verti' ? $(item).getPosition().y : $(item).getPosition().x);
        });        
    };

//    $$("img").each(function(item) {
//       var dimensions = $(item).getSize();
//       $(item).setStyles({ width: dimensions.x, height: dimensions.y }); 
//    });

	var links = $('nav-buttons').getElements('a');
	var row = $$('.row');
	var nextPage = $('next-page');
	var selectors = getSelectors();
	var currentPosition = 0;
	var end = selectors.length;
    var scrollWindow = function(selectors, offset) {
        var position = false;
        var scroll = (layout == 'verti' ? $(window).getScroll().y : $(window).getScroll().x);
        var breakOut = false;
        selectors.each(function(item, index) {
           if (item > scroll && !breakOut) {
               if (index + offset < selectors.length) {
                   position = selectors[(index + offset > 0 ? index + offset : 0)];
                   position = (layout == 'verti' ? position - 50 : position - 140);
                   breakOut = true;
               }
           } 
        });
        
        if (position !== false) {
            if (layout == 'verti') {
                scrollFx.start(0,position);
            } else {
                scrollFx.start(position, 0);            
            }
        }
    };

//	var scrollFx = new Fx.Scroll(window, {offset: {'x': -150,'y':-40}, duration: 1});

	//Prevous
	var gotoPreviousSeperator = function(){
		scrollWindow(selectors, -1);	
	}

	//Next
	var gotoNextSeperator = function(){
		scrollWindow(selectors, 1);
	}

	// evaluate key
	var getKey = function(e){
	    var key = e.event.keyCode;
	    if (layout == 'verti') {
		    if (key == 40 || key == 38) {
		        e.preventDefault();
		    }

		    if(key == 40) {gotoNextSeperator()}
		    if(key == 38) {gotoPreviousSeperator()}
		} else {
		    if (key == 39 || key == 37) {
		        e.preventDefault();
		    }
		    if(key == 39) {gotoNextSeperator()}
		    if(key == 37) {gotoPreviousSeperator()}			    
		}
	}

	/********************************************
	* KRIS-6:
	 * Added the lines below
	 * Size the foot div to be the exact same dimensions 
	 * as the row div, this should define the window 
	 * scrolling size to be the size of the row.
	 ********************************************/
	var rowDim = row[0].getSize();
	$("foot").set('styles', {
		height: rowDim.y + 'px',
		width: rowDim.x + 'px'
	});

	// scrollFx.toElement(selectors[0]);

	// links
//	if (links[0]) links[0].addEvent('click',gotoPreviousSeperator);
//	if (links[1]) links[1].addEvent('click',gotoNextSeperator);

	// Key pressed
	var disableArrowScrolling = function(){
		document.removeEvent('keydown', getKey, false);
	}

	var enableArrowScrolling = function(){
	    disableArrowScrolling();
		document.addEvent('keydown', getKey);
	}

	if (selectors[1]) {     
	    enableArrowScrolling();
	}
	
	var inputfield = $$('input');
	for(i=0;i<inputfield.length;i++) {
		var type = inputfield[i].getAttribute('type');
		var name = inputfield[i].getAttribute('name');
		if (type == 'text' && name != null) {
			inputfield[i].addEvent('focus',disableArrowScrolling);
			inputfield[i].addEvent('blur',enableArrowScrolling);
		}
	}
	var textarea = $$('textarea');
	for(i=0;i<textarea.length;i++) {
		textarea[i].addEvent('focus',disableArrowScrolling);
		textarea[i].addEvent('blur',enableArrowScrolling);
	}
});