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);
        });
    };

		var links = $('nav-buttons').getElements('a');
		var row = $$('.row');
		var nextPage = $('next-page');
		var selectors = getSelectors();
		var currentPosition = 0;
		var end = selectors.length;

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

        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);
		}
});