var View = {

	controller: null,
	
	// storage vars
	localEffectInObj: { duration: 700, transition: Fx.Transitions.sineIn, wait: false }, 
	localEffectOutObj: { duration: 700, transition: Fx.Transitions.sineIn, wait: false }, 
	selectedRange: null,
	rangeLabels:["Value", "Professional", "Ultimate"],
	products: [],
	
	// element vars
	toggle1: null,
	toggle2: null,
	toggle3: null,
	speakerSelectionDisplay: null,	
	speakerDisplay: null,
	speakerDisplayContent: null,
	backToSpeakers: null,
	selectRangeTitle: null,	
	selector_item10: null,
	selector_item12: null,
	selector_item15: null,
	selector_itemSub: null,
	
	// on page dom is ready
	init: function(){
	
		// create the controller class
		this.controller = new ViewController({
			slidysetProps : { 
				mode : "vertical"
			}
		});				
		
		// setup sliders
		//this.controller.setupSlidySet("valueDetail", 0, null, null, "toggle1", null, null, this.handleEvent);
		//this.controller.setupSlidySet("proDetail", 1, null, null, "toggle2", null, null, this.handleEvent);
		//this.controller.setupSlidySet("ultimateDetail", 2, null, null, "toggle3", null, null, this.handleEvent);
		
		this.controller.setupHideShowSet("valueDetail", 0, "toggle1", this.handleEvent);
		this.controller.setupHideShowSet("proDetail", 1, "toggle2", this.handleEvent);
		this.controller.setupHideShowSet("ultimateDetail", 2, "toggle3", this.handleEvent);
		
		// find our elements, store them in local vars for later use
		this.toggle1 = $('toggle1');
		this.toggle2 = $('toggle2');
		this.toggle3 = $('toggle3');		
		this.speakerSelectionDisplay = $('speakerSelectionDisplay');
		this.speakerDisplay  = $('speakerDisplay');
		this.speakerDisplayContent = $('speakerDisplayContent');
		this.backToSpeakers = $('backToSpeakers');
		this.backToSpeakers.master = this;
		this.selectRangeTitle = $('selectRangeTitle');		
		this.selector_item10 = $('selector_item10')
		this.selector_item10.master = this;
		this.selector_item12 = $('selector_item12')
		this.selector_item12.master = this;
		this.selector_item15 = $('selector_item15')
		this.selector_item15.master = this;
		//this.selector_itemSub = $('selector_itemSub')
		//this.selector_itemSub.master = this;
		
		// assign mouse events		
		this.backToSpeakers.addEvent('click', function(e){
			e = new Event(e);			
			this.master.reshowSpeakers();			
			e.stop();
		});				
		this.selector_item10.addEvent('click', function(e){
			e = new Event(e);			
			this.master.showSpeaker(0);			
			e.stop();
		});
		this.selector_item12.addEvent('click', function(e){
			e = new Event(e);			
			this.master.showSpeaker(1);			
			e.stop();
		});
		this.selector_item15.addEvent('click', function(e){
			e = new Event(e);			
			this.master.showSpeaker(2);			
			e.stop();
		});
		/*
		this.selector_itemSub.addEvent('click', function(e){
			e = new Event(e);			
			this.master.showSpeaker(3);			
			e.stop();
		});
		*/
	},
	
	// on toggle button click
	// show the detail and speaker selectors
	handleEvent : function(id, element){
	
		this.View.selectedRange = id;		
		this.View.selectRangeTitle.setStyle('display', 'none');		
		this.View.higlightSelected(element);
		
		if(id==0){
			//this.View.controller.sliderSets[1].hide();
			//this.View.controller.sliderSets[2].hide();
			//this.View.controller.hideShowSets[1].start({'opacity':[1,0]});
			//this.View.controller.hideShowSets[2].start({'opacity':[1,0]});
			//this.View.speakerSelectionDisplay.setStyle('display', 'none');
			//this.View.speakerDisplay.setStyle('display', 'none');
			this.View.unHiglightSelected(this.View.toggle2, '#212d41' );
			this.View.unHiglightSelected(this.View.toggle3, '#2d3a4d' );
		}
		if(id==1){
			//this.View.controller.sliderSets[0].hide();
			//this.View.controller.sliderSets[2].hide();
			//this.View.controller.hideShowSets[0].start({'opacity':[1,0]});
			//this.View.controller.hideShowSets[2].start({'opacity':[1,0]});
			//this.View.speakerSelectionDisplay.setStyle('display', 'none');
			//this.View.speakerDisplay.setStyle('display', 'none');
			this.View.unHiglightSelected(this.View.toggle1, '#132034' );
			this.View.unHiglightSelected(this.View.toggle3, '#2d3a4d' );
		}
		if(id==2){
			//this.View.controller.sliderSets[0].hide();
			//this.View.controller.sliderSets[1].hide();
			//this.View.controller.hideShowSets[0].start({'opacity':[1,0]});
			//this.View.controller.hideShowSets[1].start({'opacity':[1,0]});
			//this.View.speakerSelectionDisplay.setStyle('display', 'none');
			//this.View.speakerDisplay.setStyle('display', 'none');
			this.View.unHiglightSelected(this.View.toggle2, '#212d41' );
			this.View.unHiglightSelected(this.View.toggle1, '#132034' );
		}
		
		this.View.showSpeakers();
	},
	
	higlightSelected: function(element){

		var effect = element.effect('background-color', {duration: 800});
		effect.start('#2b5ca0');
		
	},
	
	unHiglightSelected: function(element, colour){

		var effect = element.effect('background-color', {duration: 800});
		effect.start(colour);
		
	},
	
	// fade in the speaker selectors
	showSpeakers : function (){
	
		this.speakerSelectionDisplay.setStyle('display', 'block');
		this.speakerSelectionDisplay.setStyle('opacity', 100);
		
		/*	
		var effector = new Fx.Styles(this.speakerSelectionDisplay);
		effector.start({
			'opacity':[0,1]
		});
		*/
	},
	
	// fade out the speaker selectors
	hideSpeakers : function (){
		this.speakerSelectionDisplay.setStyle('opacity', 0);		
		/*	
		var effector = new Fx.Styles(this.speakerSelectionDisplay);
		effector.start({
			'opacity':[1,0]
		});
		*/
	},
	
	// fade in the speaker display, and fill will content from the products array
	showSpeaker : function(speakerType){
		
		var rangeId = this.selectedRange;	
		productId = this.products[rangeId][speakerType];
		
		window.location = "products/" + productId;
		
		/*
		this.speakerDisplayContent.setHTML(productLink);
				
		this.speakerSelectionDisplay.setStyle('display', 'none');
		
		this.speakerDisplay.setStyle('display', 'block');
		this.speakerDisplay.setStyle('opacity', 100);		
		*/
		/*		
		var effector = new Fx.Styles(this.speakerDisplay);
		effector.start({
			'opacity':[0,1]
		});
		*/
	},	
	
	// hide the speaker
	hideSpeaker : function(){
		//this.speakerDisplay.setStyle('opacity', 0);		
		/*				
		var effector = new Fx.Styles(this.speakerDisplay);
		effector.start({
			'opacity':[1,0]
		});
		*/
	},
	
	// hide the speaker and show the speaker display
	reshowSpeakers : function(){	
		//this.speakerDisplay.setStyle('display', 'none');
		//this.showSpeakers();		
	}
}
window.onDomReady(View.init.bind(View));