//*************************************************************************
// Class DragSlide
// Display a draggable slide
//
// use jQuery
// contentSlide : simple content
// contentPageSlide : complex content like a full jsp page for example
//*************************************************************************

var DragSlide = Class.create( {

    initialize: function( objectParameter )
    {
        // Param
        this.parent = objectParameter.parent ? objectParameter.parent : document.body;
        this.id = objectParameter.id;
        this.titleId = objectParameter.titleId;
        this.contentId = objectParameter.contentId;
        this.width = objectParameter.width;
        this.height = objectParameter.height;
        this.top = objectParameter.top;
        this.left = objectParameter.left;
        this.specificClass = objectParameter.specificClass;
        this.specificTitleClass = objectParameter.specificTitleClass ? objectParameter.specificTitleClass : false;
        this.specificContentClass = objectParameter.specificContentClass ? objectParameter.specificContentClass : false;
        this.title = objectParameter.title;
        this.contentSlide = objectParameter.contentSlide ? objectParameter.contentSlide : false;
        this.contentPageSlide = objectParameter.contentPageSlide ? objectParameter.contentPageSlide : false;
        this.isIndexToChange = objectParameter.isIndexToChange ? objectParameter.isIndexToChange : false;
        // By default, we activate the double click to enlarge or reduce the slide
        this.activeDbClick = !objectParameter.activeDbClick;

        this.divContainer = $( document.createElement( "div" ) );
        if( this.specificClass )
            this.divContainer.addClass( this.specificClass );
        this.divContainer.attr( {id:this.id, style:"width:" + this.width + "px; height:" + this.height + "px; top:" + this.top + "; left:" + this.left} );

        // Title
        this.divTitle = $( document.createElement( "div" ) );
        if( this.specificTitleClass )
            this.divTitle.addClass( this.specificTitleClass );
        this.divTitle.html( this.title );
        this.divTitle.attr( {style:"width:" + (this.width - 7) + "px"} );
        this.divContainer.append( this.divTitle );

        // Content
        this.divContent = $( document.createElement( "div" ) );
        if( this.specificContentClass )
            this.divContent.addClass( this.specificContentClass );
        this.divContent.html( this.contentSlide );
        this.divContainer.append( this.divContent );

        this.parent.append( this.divContainer );

        this.divContainer.draggable();
        this.divContainer.resizable();
//        this.divContainer.dblclick();
        if( this.activeDbClick )
            this.divTitle.dblclick( jQuery.proxy( this.onDbClickTitle, this ) );
        this.divContainer.resize( jQuery.proxy( this.onResizeContainer, this ) );
    },

    getTitle: function()
    {
        return this.divTitle.html();
    },

    setTitle: function( newTitle )
    {
        this.divTitle.html( newTitle );
    },

    getContent: function()
    {
        return this.divContent.html();
    },

    setContent: function( newContent )
    {
        this.divContent.html( newContent );
    },

    getDivContent: function()
    {
        return this.divContent;
    },

    getDivContainer: function()
    {
        return this.divContainer;
    },

    isContentVisible: function()
    {
        return (this.divContent.css( "display" ) == "block");
    },

    // public
    onDbClickTitle: function()
    {
        if( this.width == this.divContainer.width() )
            this.enlargeContainer();
        else
            this.reduceContainer();
    },

    enlargeContainer: function()
    {
        this.divContainer.animate( {
            height:'500px',
            width:'500px'
        }, 1000, function()
        {
        } );
        this.divTitle.animate( {
            width:'493px'
        }, 1000, function()
        {
        } );
    },

    reduceContainer: function()
    {
        this.divContainer.animate( {
            height:this.height + 'px',
            width:this.width + 'px'
        }, 1000, function()
        {
        } );
        this.divTitle.animate( {
            width:(this.width - 7) + 'px'
        }, 1000, function()
        {
        } );
    },

    onResizeContainer: function()
    {
        var widthTitle = this.divContainer.width() - 7;
        this.divTitle.width( widthTitle );
    }
} );