import React, {
    PropTypes
} from 'react';
import * as GifActions from '../../actions/GifActions';
import DownloadLink from '../common/DownloadLink';
import '../../css/GifView.css'

class GifView extends React.Component {
    constructor(props) {
        super(props);

        this.handleDelete = this.handleDelete.bind(this);
        this.handleCopy = this.handleCopy.bind(this);

        this.state = {};
    }
    componentWillMount() {
        var gif = this.props.gif;

        this.setState(gif);
    }
    componentDidMount() {
        var gif = this.state

        $('#' + gif.id).editable({
            selector: '.gif-name',
            container: 'body',
            type: 'text',
            mode: 'inline',
            showbuttons: false,
            success: function(resp, name) {
                GifActions.update(gif.id, gif.url, name)
            }
        });
    }
    handleDelete() {
        GifActions.remove(this.state.id);
    }
    handleCopy() {
        this.props.copy(this.state.url);
    }
    render() {
        let gif = this.state;

        return (
            <div className="col-xs-4 gif-view" id={gif.id}>
                <div className="thumbnail">
                    <div className="caption">
                        <h3 className="gif-name">{gif.name}</h3>
                        <div className="btn-group btn-group-sm" role="group">
                            <button type="button" className="btn btn-danger" onClick={this.handleDelete}>
                                <i className="fa fa-trash-o" aria-hidden="true"></i>
                            </button>
                            <button type="button" className="btn btn-success" onClick={this.handleCopy}>
                                <i className="fa fa-files-o" aria-hidden="true"></i>
                            </button>
                            <DownloadLink url={gif.url} />
                        </div>
                    </div>
                    <img src={gif.url} alt={gif.name} />
                </div>
            </div>
        );
    }
};

GifView.propTypes = {
    gif: PropTypes.object.isRequired,
    copy: PropTypes.func.isRequired
};

export default GifView;
@@ -377,16 +377,142 @@
 d(this);
+%0A        this.handleMouseOver = this.handleMouseOver.bind(this);%0A        this.handleMouseOut = this.handleMouseOut.bind(this);
 %0A%0A      
@@ -598,16 +598,106 @@
 s.gif;%0A%0A
+        gif.download_url = gif.url;%0A        gif.url = gif.still_url %7C%7C gif.download_url;%0A%0A
         
@@ -1229,24 +1229,302 @@
 url);%0A    %7D%0A
+    handleMouseOver() %7B%0A        let gif = this.state;%0A%0A        this.setState(%7B%0A            url: gif.download_url%0A        %7D);%0A    %7D%0A    handleMouseOut() %7B%0A        let gif = this.state;%0A%0A        this.setState(%7B%0A            url: gif.still_url %7C%7C gif.download_url%0A        %7D);%0A    %7D%0A
     render()
@@ -1632,16 +1632,84 @@
 %7Bgif.id%7D
+ onMouseOver=%7Bthis.handleMouseOver%7D onMouseOut=%7Bthis.handleMouseOut%7D
 %3E%0A      
@@ -2439,24 +2439,33 @@
 nk url=%7Bgif.
+download_
 url%7D /%3E%0A    

Add still url to gif view