/**
 * @author Henry Schmieder  | henry@thoughtomatic.co.uk
 */
window.addEvent( "domready", function() { new SSMedia() } );
window.addEvent( "load", function() { new SSHomeLoad() } );
var SSMedia = new Class
({
	initialize: function()
	{
        new SSRandImg();
		new SSVideo();
		new SSSessReel();
		new SSVidReel();
	}
});


var SSHomeLoad = new Class
({
	initialize: function()
	{
		new SSTeasSlide();
	}
});

var SSRandImg = new Class
({
    /**
     * @constructor initialize()
     */
    initialize: function()
    {
        var images = ["1", "2", "3", "4"];
        var url = REMOTE_BASE + "images/home/" + images[ Math.floor( Math.random() * images.length ) ] + ".jpg";
        //$("htImage").getFirst().set("src", url);
    }
});

var SSTeasSlide = new Class
({
	initialize: function()
	{
		if( !Browser.Engine.trident ) {
			//$("htSlide").set("tween", { duration:1000 } );
			//$("htSlide").tween.delay( 1300, $("htSlide"), [ "background-position", "-468px" ] );
			var c = $("canvas");
			c.set("tween", { duration:1000 } );
			//var t = c.getStyle("background-position");
            var t = "-84px 210px";
			c.setStyle( "background-position", "-700px 600px" );
			c.tween.delay( 1300, c, [ "background-position", t ] );
			//$("htImage").setStyle("display","block");
		}else{
			//$("htImage").setStyle("display","block");
			//$("htSlide").addClass("ie");
		}
	}
});


var SSVidReel = new Class
({
	reel:null,
	viewport:null,
	arrUp:null,
	arrDown:null,
	itemList:null,
	slideAvail: true,
	maxPages: null,
	rightOffset:null,
	slideDuration:650,
	itemsPerPage:3,
	vportHeight:null,
	currentSetId:null,
    inactiveOpacity:.15,
	
	initialize: function()
	{
		this.viewport = $("movieReelViewport");
		this.reel = $("movieReel");
		this.arrUp = $("filmReelArrUp");
		this.arrDown = $("filmReelArrDown");
		this.itemList = this.reel.getElements(".item");
        this.arrDown.set("tween", {duration:150} );
        this.arrUp.set("tween", {duration:150} );
		this.maxPages = this.itemList.length;
		this.rightOffset = Math.floor( (this.maxPages - 1)  / this.itemsPerPage );
		this.vH = this.viewport.getSize().y;
		this.reel.set( "tween", {duration:this.slideDuration, onComplete:this.slideComplete.bind(this) } );
		
		
		for(var i=0; i<this.itemList.length; i++ )
		{
			var item = this.itemList[i];
			item.set("tween", {duration:300} );
			item.addEvent("mouseover", this.hoverItemListener );
			item.addEvent("mouseout", this.leaveItemListener );
		}
		
		if( this.maxPages < 4  ) {
            this.arrDown.set( "opacity", this.inactiveOpacity );
            this.arrUp.set( "opacity", this.inactiveOpacity );
			return;
		}
		this.arrUp.set( "opacity", this.inactiveOpacity );
		this.activateBehaviour();
		
	},
	
	hoverItemListener: function()
	{
		this.getElement(".frb").tween( "opacity", .6 );
	},
	
	leaveItemListener: function()
	{
		if( this.hasClass("active") ) {
			return;
		}
		this.getElement(".frb").tween( "opacity", .6 );
	},
	
	activateBehaviour: function()
	{
		this.arrUp.addEvent( "click", this.clickUpListener.bind( this ) );
		this.arrUp.addEvent( "mouseenter", this.arrHoverListener );
        this.arrUp.addEvent( "mouseleave", this.arrOutListener );
        this.arrDown.addEvent( "click", this.clickDownListener.bind( this ) );
        this.arrDown.addEvent( "mouseenter", this.arrHoverListener );
        this.arrDown.addEvent( "mouseleave", this.arrOutListener );
	},
	
	deactivateBehaviour: function()
	{

	},

    arrHoverListener: function()
    {

        if( this.get("opacity") < .9 ) {
        }else{
            this.set("opacity", .6 );
            this.store("hovered", true );
        }
    },

    arrOutListener: function()
    {
        if( this.get( "opacity" ) > .4 && this.get( "opacity" ) < 1 ) {
            this.set("opacity", .6 );
            this.store("hovered", false );
        }
    },
    
	clickUpListener: function()
	{	
		if( !this.slideAvail ) return;
		this.runningSlideType = "down";
		this.currentSetId--;
		this.update();
	},
	
	clickDownListener: function()
	{
		if( !this.slideAvail ) return;
		this.runningSlideType = "up";
		this.currentSetId++;
		this.update();
	},
	
	update: function()
	{
		this.slideAvail = false;
		this.moveToTarget();
		this.loadImages();
	},
	
	moveToTarget: function()
	{
		this.reel.tween( "top", "-"+( (this.currentSetId) * ( this.vH + 12) )+"px" );
	},
	
	slideComplete: function()
	{
		this.slideAvail = true;
		
		//this.arrUp.set( "opacity", 1 );
		//this.arrDown.set( "opacity", 1 );
		
		switch( this.currentSetId )
		{
			case this.rightOffset  :
				this.arrDown.tween( "opacity", this.inactiveOpacity );
                this.arrUp.tween( "opacity", 1 );
                this.arrDown.removeEvents("click");
				break;
			
			case 0:
				this.arrUp.tween( "opacity", this.inactiveOpacity );
                this.arrDown.tween( "opacity", 1 );
                this.arrDown.removeEvents("click");
                this.arrDown.addEvent("click", this.clickDownListener.bind( this ) );
				break;

            default:
                if( !this.arrUp.retrieve( "hovered" ) ) {
                    this.arrUp.tween( "opacity", 1 );
                }
                if( !this.arrDown.retrieve( "hovered" ) ) {
                    this.arrDown.tween( "opacity", 1 );
                }
                this.arrDown.removeEvents("click");
                this.arrDown.addEvent("click", this.clickDownListener.bind( this ) );
                break;
		}
		
		switch( this.runningSlideType )
		{
			case "up" :
				
				break;
			case "down" :
				
				break;
		}
	},
	
	loadImages: function()
	{
		var list = this.itemList;
		var start = this.currentSetId*this.itemsPerPage;
		var end = start + 3;
		if( end >= this.maxPages * this.itemsPerPage ) {
			end = this.maxPages * this.itemsPerPage;
		}
		for( var i=start; i<end; i++ )
		{
			var elem = list[i];
			if( !elem ) continue;
			var _i = elem.getElement( ".fri img" );
			if( $chk( _i ) ) {
				continue;
			}
			var img = elem.getElement( 'input[type="hidden"].imgP' );
			var imgInj = new Element( "img" );
			imgInj.setProperties( { "width": "280", "src":  img.get("value") } );
			imgInj.inject( elem.getElement(".fri") );
		}
	}
	
});




var SSSessReel = new Class
({
	reel:null,
	viewport:null,
	vH:-1,
	cH:-1,
	hookItem: null,
	arrUp:null,
	arrDown:null,
	scrolling: false,
	scrollDir: 1,
	scrollInt: null,
	scrollStep: 9,

	initialize: function()
	{
		this.viewport = $("sessReelViewport");
		this.reel = $("sessReel");
		this.hookItem = this.determineHook();
		this.arrUp = $("sessReelArrUp");
		this.arrDown = $("sessReelArrDown");
		this.vH = this.viewport.getSize().y;
		this.cH = this.reel.getSize().y;

		var posHook = this.hookItem.getPosition( this.viewport );
		this.moveTo( posHook.y );
		
		this.activateBehaviour();
		
	},

	determineHook: function()
	{
		var hook = $("sessReelHookItem");
		if( hook ) {
			return hook;
		}
		var items = this.reel.getElements(".item");
		return items[ items.length - 7 ];

		// TODO: append li item saying "end of season"
	},

	activateBehaviour: function()
	{
		this.arrUp.addEvent( "mousedown", this.pressUpListener.bind( this ) );
		this.arrUp.addEvent( "mouseup", this.releaseArrListener.bind( this ) );
		this.arrUp.addEvent( "mouseout", this.mouseoutArrListener.bind( this ) );
		this.arrDown.addEvent( "mousedown", this.pressDownListener.bind( this ) );
		this.arrDown.addEvent( "mouseup", this.releaseArrListener.bind( this ) );
		this.arrDown.addEvent( "mouseout", this.mouseoutArrListener.bind( this ) );
	},
	
	deactivateBehaviour: function()
	{

		
	},
	
	moveTo: function( y )
	{
		this.reel.tween( "top", "-"+y+"px" );
	},
	
	
	scroll: function()
	{
		var currPos = parseInt( this.reel.getStyle( "top" ) );
		
		if( currPos + 10 > 0 && this.scrollDir == 1) {
			return false;
		}
		var target = currPos  + ( this.scrollStep * this.scrollDir );
		if( Math.abs(target) > ( this.cH - this.vH ) && this.scrollDir == -1) {
			return false;
		}
		this.reel.setStyle( "top", target + "px" );
	},
	
	pressUpListener: function()
	{
		this.scrolling = true;
		this.scrollDir = 1;
		this.scrollInt = this.scroll.periodical( 20, this );
	},
	pressDownListener: function()
	{
		this.scrolling = true;
		this.scrollDir = -1;
		this.scrollInt = this.scroll.periodical( 20, this );
	},
	
	releaseArrListener: function()
	{
		this.scrolling = false;
		$clear( this.scrollInt );
		this.fac = 1;
	},
	mouseoutArrListener: function()
	{
		if( this.scrolling ) {
			this.scrolling = false;
			$clear( this.scrollInt );
		}
	}
	
});


var SSVideo = new Class
({
	initialize: function()
	{
		if( !$chk( $("ssVideo") ) ) return;
		$("movieReel").getElements(".item").each( function(el) {
			el.addEvent( "click", this.clickVideoItemListener.bind( this ) );
		}.bind(this) );
		
		//$("vidClose").addEvent("click", this.clickCloseVideoListener.bind(this) );
	},
	
	swapPlayerToFront: function()
	{
		$("videoPlayerShell").inject( $("homeTeaser"), "bottom" );
		//$("vidClose").setStyle("display", "block");
	},
	
	swapPlayerToBack: function()
	{
		$("videoPlayerShell").inject( $("homeTeaser"), "top" );
		//$("vidClose").setStyle("display", "none");
		$("videoswf").dispose();
	},
	resetClickStates: function()
	{
		$("movieReel").getElements(".item").each( function(el) {
			if( el.hasClass("active") ) {
				el.getElement(".frb").tween("opacity", 1 );
			}
			el.removeClass( "active" );
		});
	},
	injectPlayer: function( movieUrl )
	{
		var agent=navigator.userAgent.toLowerCase();
		var isIphone = (agent.indexOf('iphone')!=-1);
		if( isIphone ) {
			$("ssVideo").empty();
			var embed = new Element("embed").setProperties({src:movieUrl, width:610, height:340, type:"application/x-shockwave-flash"});
			embed.inject($("ssVideo"));
			return;
		}
		new Swiff
		(
			movieUrl,
			{
				id: "videoswf",
				width: "610",
				height: "340",
				container: $("ssVideo"),
				params: {
					wmode:"window",
					bgcolor:"#E6E7E9"
				},
				vars : {
					autoplay: 1,
					fs: 1,
					start: 5
				}
			}
		);
	},
	
	clickVideoItemListener: function( e )
	{
		
		var trigger = $(e.target);
		var it = trigger.getParent(".item");
		if( it.hasClass("active") ) {
			return;
		}
		this.swapPlayerToFront();
		this.resetClickStates();
		
		it.addClass( "active" );
		var playUrl = it.getElement("input[type=hidden].pP").get("value") + "&autoplay=1&fs=1&start=5";
		this.injectPlayer( playUrl );
	},
	
	clickCloseVideoListener: function()
	{
		this.swapPlayerToBack();
		this.resetClickStates();
	}
	
});