/*global $,log,app,style,svc,ml,confmodell,modeldisplayCtrl,layoutManager */
/*global PEPS */

function ModeldisplayController(params) {
	this.init(params);
}

$.extend(ModeldisplayController.prototype, {
	init : function (params) {
		this.mediaservice = params.mediaservice;
		this.modelview = params.modelview;
		this.view = "front";
		this.display = "normal";
		this.isCabrio = false;
		this.roofOpen = true;
		this.isInitialized = false;
		this.initCompleted = false;
	},

	setup: function() {		
		//log("ModeldisplayController", "setup");
		if(this.isInitialized) {
			return;
		}
		this.isInitialized = true;
		
		if(this.mediaservice) {	
			// Setup mit Mediaservice
			if(this.mediaservice.refresh){
				var that = this;
				this.mediaservice.refresh(function(){
					that._setupViewMediaservice();
					that.initCompleted = true;
				});	
			} else {
				this._setupViewMediaservice();
				this.initCompleted = true;
			}
		} else { 
			// Porsche und Audi Showroom
			this._setupViewWithoutMediaservice();
			this.initCompleted = true;
		}		
	},	
	
	_setupViewMediaservice: function() {
		//log("ModeldisplayController", "_setupViewMediaservice");
		var that = this;
		
		var imagebuttonOnError = function(){
			$(this).parent().imagebutton('hide'); // wird auch von Button 2 ausgeloest, sollte ok sein weil beide buttons das gleiche Bild laden (RC?)
			
			var front = $('#button_show_front').imagebutton('loaded');
			var rear = $('#button_show_rear').imagebutton('loaded');
			var interior = $('#button_show_interior').imagebutton('loaded');			

			that.setImageButtonVisibility(front, rear, interior);
		};
		
		var imagebuttonOnLoad = function(){			
			var front = $('#button_show_front').imagebutton('loaded');
			var rear = $('#button_show_rear').imagebutton('loaded');
			var interior = $('#button_show_interior').imagebutton('loaded');			

			that.setImageButtonVisibility(front, rear, interior);
		};
		
		$('#button_show_front, #button_show_front2').imagebutton('create', {src: this.mediaservice.buttonImage('front'), state: 'active', load: imagebuttonOnLoad, error: imagebuttonOnError}).click(function(){ that.setView('front'); });
		$('#button_show_rear, #button_show_rear2').imagebutton('create', {src: this.mediaservice.buttonImage('rear'), load: imagebuttonOnLoad, error: imagebuttonOnError}).click(function(){ that.setView('rear'); });
		$('#button_show_interior, #button_show_interior2').imagebutton('create', {src: this.mediaservice.buttonImage('interior'), load: imagebuttonOnLoad, error: imagebuttonOnError}).click(function(){ that.setView('interior'); });
				
		// Modellbild anzeigen
		this.modelview.setup({src: this.mediaservice.modelImage(this.view), srcBig: this.mediaservice.modelImageBig(this.view)});
		// Die Element auf der Seite sind erst jetzt komplett dargestellt, Layout neu berechnen
		layoutManager.doLayout();
	},	
	
	_setupViewWithoutMediaservice: function() {
		//log("ModeldisplayController", "_setupViewWithoutMediaservice");
		this.modelview.setup();
		// Die Element auf der Seite sind erst jetzt komplett dargestellt, Layout neu berechnen
		layoutManager.doLayout();
	},
	
	changeDisplayBig: function(){
		this.display = "big";
		layoutManager.setState('modellbild');
		
		$("#nav_back_picture").addClass('enabled');
		$('#nav_back_picture').unbind();
		var mdctrl = this;
		$('#nav_back_picture').bind('click', function(){
			mdctrl.changeDisplayNormal();
		});

		$("#modell_picture_big").removeClass('remove_it');
		$("#rundherum").addClass('hide_it');
		$("#navigation").addClass('hide_it');
		$("#nav_back_picture").hover(
			function () { $(this).attr( 'src', PEPS.rollover.newimage($(this).attr('src')) ); },
			function () { $(this).attr( 'src', PEPS.rollover.oldimage($(this).attr('src')) ); }
		);
		
		layoutManager.doLayout();
		this.updateView();
	},
	
	changeDisplayNormal: function(){
		this.display = "normal";
		layoutManager.resetState();
		
		$("#modell_picture_big").addClass('remove_it');
		$("#rundherum").removeClass('hide_it');
		$("#navigation").removeClass('hide_it');
		
		layoutManager.doLayout();
		this.updateView();		
	},

	setView: function(view) {
		this.view = view;
		
		if(!this.initCompleted) {
			//log("ModeldisplayController.setView()", "initialization not yet completed");
			return;
		}
		
		if(this.mediaservice){			
			if (this.view === 'front'){
				$('#button_show_rear, #button_show_rear2, #button_show_interior, #button_show_interior2').imagebutton('normal');
				$('#button_show_front, #button_show_front2').imagebutton('active');
			} else if (this.view === 'rear'){
				$('#button_show_front, #button_show_front2, #button_show_interior, #button_show_interior2').imagebutton('normal');
				$('#button_show_rear, #button_show_rear2').imagebutton('active');
			} else if (this.view === 'interior'){
				$('#button_show_front, #button_show_front2, #button_show_rear, #button_show_rear2').imagebutton('normal');
				$('#button_show_interior, #button_show_interior2').imagebutton('active');
			}
		}
		this.updateView();
	},
		
	updateView: function(){
		//log("ModeldisplayController", "updateView");		
		if(this.mediaservice){
			var layer = (this.view !== 'interior') ? 1 : 2;
			var src = (this.display === 'normal') ? this.mediaservice.modelImage(this.view): this.mediaservice.modelImageBig(this.view);
			this.modelview.update({src: src, layer: layer, display: this.display});
			
			$('#button_show_front, #button_show_front2').imagebutton('setImage', {src: this.mediaservice.buttonImage('front')});
			$('#button_show_rear, #button_show_rear2').imagebutton('setImage', {src: this.mediaservice.buttonImage('rear')});
			$('#button_show_interior, #button_show_interior2').imagebutton('setImage', {src: this.mediaservice.buttonImage('interior')});
		} else {
			this.modelview.update();
			return;
		}	
	},
	
	refresh: function() {
		//log("ModeldisplayController", "refresh");
		if(!this.initCompleted) {
			//log("ModeldisplayController.refresh()", "initialization not yet completed");
			return;
		}
		
		if(this.mediaservice && this.mediaservice.refresh){
			var that = this;
			this.mediaservice.refresh(function(){
				that.updateView();
			});
		} else {
			this.updateView();
		}
	},
	
	setImageButtonVisibility: function(front, rear, interior){
		var moreThan1 = front && rear || rear && interior || front && interior;
		$('#button_show_front, #button_show_front2').imagebutton(moreThan1 && front ? "show" : "hide");
		$('#button_show_rear, #button_show_rear2').imagebutton(moreThan1 && rear ? "show" : "hide");
		$('#button_show_interior, #button_show_interior2').imagebutton(moreThan1 && interior ? "show" : "hide");		
	},
	
	updateViewColor: function(color){
		this.modelview.update({src : this.mediaservice.modelImage(this.view, color)});
	},
	
	setCabrio: function(isCabrio){
		//log("ModeldisplayController", "setCabrio: " + isCabrio);
		this.isCabrio = isCabrio;
		if (this.mediaservice) {
			this.mediaservice.setCabrio(this.isCabrio, this.roofOpen);
		}
		this._updateCabrioButtons();
	},
	
	_updateCabrioButtons: function() {
		if(this.isCabrio) {
			$("#action_" + (this.roofOpen ? "open" : "closed")+ "_cabrio").hide();
			$("#action_" + (this.roofOpen ? "open" : "closed")+ "_cabrio_2").hide();
			$("#action_" + (!this.roofOpen ? "open" : "closed")+ "_cabrio").show();
			$("#action_" + (!this.roofOpen ? "open" : "closed")+ "_cabrio_2").show(); 
		} else {
			$("#action_open_cabrio, #action_open_cabrio_2, #action_closed_cabrio, #action_closed_cabrio_2").hide();
		}		
	},
	
	setCabrioRoofOpen: function(roofOpen) {
		this.roofOpen = roofOpen;
		this.mediaservice.setCabrio(this.isCabrio, this.roofOpen);
		this._updateCabrioButtons();
		this.updateView();
	}
});