window.addEvent('domready', function(e){
	
	var slideshow = $('slideshow');
	if ( slideshow != null ) {
		Slideshow = Class.refactor(Slideshow, {
			initialize: function(el, data, options){
				this.previous(el, data, options);
				this.nav();
			},
		    nav: function() {
				var div = new Element('div');
				this.data.images.each(function(img, j){
					if ( this.data.images.length > 1 ) {
						var link = new Element('a', {
							'html': j+1,
							'href': "javascript:void(0);",
							'class': 'slideshow-nav-item',
							'events': {
								'click': function(e) {
									var e = new Event(e).stop();
									this.pause(1);
									div.getElements('a').removeClass('active');
									link.addClass('active');
									//this.go(link.get('html')-1);
									this.go(j);
								}.bind(this)
							}
						});
						if ( j == (this.data.images.length-1) ) {
							link.addClass('last');
						}		
						link.inject(div);
					}
				}, this)
				$('slideshow-nav').adopt(div);
			},
			_show: function(fast){
				this.previous();
				$('slideshow-nav').getElements('a').each(function(link){
					link.removeClass('active');
					if (link.get('html').toInt() == this.slide+1) link.addClass('active');
				}, this);
			}
		});
		
		var myShow = new Slideshow('slideshow', '', {
			height: 200,
			delay: 5000,
			duration: 1000,
			loader: false,
			loop: true,
			random: false,
			titles: false,
			captions: true,
		});
		
		 myShow.afterShow = function(){
			console.log('test');
		} 
	}
	
    //slider variables for making things easier below
    var itemsHolder = $('content-change');
    if ( itemsHolder != null  ) {
	    var myItems = $$(itemsHolder.getElements('.content-item'));
	    	    
	    //create instance of the slider, and start it up        
	    var mySlider = new SL_Slider({
	        slideTimer: 10000,
	        orientation: 'horizontal',
	        fade: false,
	        isPaused: false,
	        container: itemsHolder,
	        items: myItems
	    });
	    mySlider.start();
    }
    
    //Styling
    $$('.content .s2-contentbox-3:last-child').setStyles({
    	border: 'none',
    	float: 'right',
    	margin: '-93px 35px 0 0',
    	width: '145px'
    });
    $$('.content-column-2 .content-33-33-33-left .s2-contentbox-4:last-child').setStyle('padding', '170px 0 0');
    $$('.content-column-2 .content-33-33-33-right .s2-contentbox-2:last-child').setStyle('border', 'none');
		
});