/*
	problem-popup.js
*/
var ProblemPopup = Obj.extend({
	// private
	_options: null,

    POPUP_TEMPL: function(problem, options){
			return ("<div class='omq'>"+
                    "   <div class='popup close ui_popup_overlay'></div>"+
					"   <div class='popup pos ui_popup ui_popup_font'>"+
					"       <h2 class='ui_popup_hl_font ui_marg_none ui_marg_bot'>"+options.locale.SOLUTION_WIDGET_PROBLEM_TITLE+"</h2>"+
                    "       <div class='close ui_close ui_link'></div>"+
					"       <p>"+problem.description+"</p>"+
                    "       <ul class='solutions ui_list_none ui_pad_none'></ul>"+
                    "   </div>"+
                    "</div>");
        },
        
	SOLUTION_TEMPL: function(solutionCount, options){
			return ("<li>"+
                    "   <h2 class='ui_popup_hl_font ui_marg_none ui_marg_top ui_marg_bot'>"+
                            options.locale.SOLUTION_WIDGET_SOLUTION_TITLE+" "+solutionCount+
                    "   </h2>"+
					"	<div class='description ui_text_left'></div>"+
					"</li>");
		},

	G1: '1',
	G2: '2',
	
    POPUP_MARGIN: 20,
    
	// public
	init: function(problem, options){
			this._options = options;

            this.buildPopUp(problem);
		},
		
	buildPopUp: function(problem) {
			var self = this;
			// create solution elements
			var popUpDOM = $(self.POPUP_TEMPL(problem, this._options));
			
            // only one solution
            if(problem.solutions.length == 1){
                var solution 	= problem.solutions[0];
                var solutionDOM = $(self.SOLUTION_TEMPL("", self._options));
					
                // add description because description could also be a html description
                $(".description", solutionDOM)
                    .append("<p>"+solution.description+"</p>");
					
                $(".solutions", popUpDOM).append(solutionDOM);            
            }
            // n solutions
            else if(problem.solutions.length > 1){
                $(problem.solutions)
                    .each(function(i){
                        var solution 	= this;
                        var solutionDOM = $(self.SOLUTION_TEMPL(i+1, self._options));
					
                        // add description because description could also be a html description
                        $(".description", solutionDOM)
                            .append("<p>"+solution.description+"</p>");
					
                        $(".solutions", popUpDOM).append(solutionDOM);
                    });
            }
            // no solution
            else{
                var solutionDOM = $(self.SOLUTION_TEMPL("", self._options));
					
                // add description because description could also be a html description
                $(".description", solutionDOM)
                    .append("<p>"+self._options.SOLUTION_WIDGET_NO_SOLUTION+"</p>");
					
                $(".solutions", popUpDOM).append(solutionDOM);                
            }
		
            this._element = popUpDOM;
            $("body").append(this._element);
            
            // set overlay dimensions
            $(".ui_popup_overlay", this._element)
                .height(this.getDocumentHeight());
        
            // set popup dimensions - hight
            // we have to subtract the padding
            var popupHeight = this.getViewPortHeight() -
                (parseInt($(".ui_popup", this._element).css("padding-top").split("px")[0]) +
                 parseInt($(".ui_popup", this._element).css("padding-bottom").split("px")[0]) +
                 this.POPUP_MARGIN * 2);
                
			$(".ui_popup", this._element)
                .css("height", popupHeight);
            
            // set popup position
            $(".ui_popup", this._element)
                .css("top", (this.getViewPortHeight() - $(".ui_popup", this._element).outerHeight()) * 0.5 + this.getDocumentScrollPos() );
            $(".ui_popup", this._element)
                .css("left", (this.getViewPortWidth() - $(".ui_popup", this._element).outerWidth()) * 0.5);
            
            // close button
            $(".close", this._element)
                .click(function(){
                    $(self._element).remove();
                });
		},
        
    getViewPortWidth: function() {
			if($.browser.msie) {
				return document.body.clientWidth;
			}else {
				return window.innerWidth; 
			}
		},

	getViewPortHeight: function() {
            if($.browser.msie) {
				return document.body.clientHeight;
			}else {
				return window.innerHeight;
			}
		},
     
    getDocumentHeight: function() {
            return Math.max(
                $(document).height(),
                $(window).height(),
                document.documentElement.clientHeight);
		},
    
    getDocumentScrollPos: function() {
            return Math.max(
                $(document).scrollTop(),
                $(window).scrollTop());
		}   
});