var sankoreLang = {
    view: "View", 
    edit: "Edit",
    example: "hello, this is the first sentence. hi, this is the second sentence. hello again, this is the third sentence. good morning, this is the fourth sentence. hi, sorry, i\'m late, i\'m the fifth sentence."
};

// if use the "view/edit" button or rely on the api instead
var isSankore = false;
// whether to do window.resize or not (window = widget area)
var isBrowser = ( typeof( widget ) == "undefined" );

function wcontainer( containerID )
{
    // some protecred variables
    var thisInstance = this;
    this.editMode = false;
    var data = {}; // see setData and getData
	
    // widget size parameters
    this.minHeight = 100;
    this.minWidth = 400;
	
    // set to 0 for no max width restriction
    this.maxWidth = 0;
	
    // links to the elements of the widget
    this.elements = {};
	
    /*
	============
	create
	============
	- creates html base, inits this.elements, assings events
	*/
    this.create = function( containerID )
    {
        var html = 
        '<div id="mp_setup">' +
        '<div class="viewmode">' +
        '<button>' + sankoreLang.edit + '</button>' +
        '</div>' +
        '<div class="editmode">' +
        '<button>' + sankoreLang.view + '</button>' +
        '</div>' +
        '</div>' +
        '<div id="mp_content">' +
        '<div class="viewmode" id="mp_view">' +
        '</div>' +
        '<div class="editmode" id="mp_edit">' +
        '</div>' +
        '</div>';
		
        var container = $( containerID );
		
        container.append( html );
        this.elements.edit = container.find( ".editmode" );
        this.elements.view = container.find( ".viewmode" );
        this.elements.container = container;
        this.elements.subcontainer = container.find( "#mp_content" );
        this.elements.containerView = this.elements.subcontainer.find( ".viewmode" );
        this.elements.containerEdit = this.elements.subcontainer.find( ".editmode" );
		
        container.find( ".viewmode button" ).click( function(){
            thisInstance.modeEdit();
        } );
		
        container.find( ".editmode button" ).click( function(){
            thisInstance.modeView();
        } );
    };
	
	
    /*
	===============
	setViewContent
	===============
	- assigns custom html to the viewmode container
	*/
    this.setViewContent = function( html )
    {
        this.elements.container.find( "#mp_content .viewmode" ).html( html );
    };
	
    /*
	===============
	setEditContent
	===============
	- assigns custom html to the editmode container
	*/
    this.setEditContent = function( html )
    {
        this.elements.container.find( "#mp_content .editmode" ).html( html );
    };
	
	
	
    /*
	=========================
	modeEdit and modeView
	=========================
	- switch the widget betweed modes
	* for customization extend onEditMode and onViewMode
	*/
    this.modeEdit = function()
    {
        this.onEditMode();
        this.editMode = true;
        this.elements.edit.removeClass( "hide" );
        this.elements.view.addClass( "hide" );
		
        this.adjustSize();
    };
    this.modeView = function()
    {
        this.onViewMode();
        this.editMode = false;
        this.elements.edit.addClass( "hide" );
        this.elements.view.removeClass( "hide" );
		
        this.adjustSize();
    };
	
	
	
    /*
	================
	adjustSize
	================
	- changes the widget size (window and container)
	*/
    this.adjustSize = function( width, height )
    {
        // retrieve the arguments
        if( arguments.length < 2 )
        {
            var s = ( this.editMode )? this.editSize() : this.viewSize();
            var width = s.w;
            var height = s.h;
        }
		
        // check for validity
        if( width + height == 0 )
            return;
		
        // add view/edit bar height
        if( !isSankore ){
            height += $( this.elements.container ).find( "#mp_setup" ).outerHeight();
        }
		
        // apply min and max restrictions
        width = Math.max( this.minWidth, width );
        height = Math.max( this.minHeight, height );
        if( this.maxWidth ){
            width = Math.min( width, this.maxWidth );
        }
		
        // if viewed as a widget, resize the window
        if( !isBrowser )
        {
            var dw = this.getData( "dw" );
            var dh = this.getData( "dh" );
			
            if( width == 0 ){
                width = widget.width;
            }
            if( height == 0 ){
                height = widget.height;
            }
            window.resizeTo( width + dw, height + dh );
        }
		
        // resize the container
        var params = {};
        if( width != 0 ){
            params.width = width;
        }
        if( height != 0 ){
            params.height = height;
        }
		
        this.elements.container.animate( params );
		
    };
	
    /*
	======================
	setData and getData
	======================
	- store some data inside
	*/
    this.setData = function( name, value ){
        data[name] = value;
    };
    this.getData = function( name ){
        if( typeof( data[name] ) == "undefined" ){
            return null;
        } else return data[name];
    };
	
	
    // redefinable methods
	
    /*
	==========================
	onEditMode and onViewMode
	==========================
	- these are called when the mode is being changed
	*/
    this.onEditMode = function(){
    //
    };
    this.onViewMode = function(){
    //
    };
	
    /*
	======================
	viewSize and editSize
	======================
	- calculate container size for the adjustSize method
	* they are likely to be redefined for each particular widget
	*/
    this.viewSize = function(){
        return {
            w: this.elements.containerView.outerWidth(),
            h: this.elements.containerView.outerHeight()
        };
    };
    this.editSize = function(){
        return {
            w: this.elements.containerEdit.outerWidth(),
            h: this.elements.containerEdit.outerHeight()
        };
    };
	
    /*
	=====================
	checkAnswer
	=====================
	- check if the exercise in the view mode was done right
	* redefine it for each particular widget
	*/
    this.checkAnswer = function()
    {
    //
    };
	
	
    // constructor end
	
    // if the constructor was called with a parameter,
    // call create() automatically
    if( arguments.length > 0 ){
        this.create( containerID );
    }
    this.setData( "dw", this.elements.container.outerWidth( true ) - this.elements.container.width() );
    this.setData( "dh", this.elements.container.outerHeight( true ) - this.elements.container.height() );
    window.winstance = thisInstance;
}