if (typeof Product === 'undefined'){
    Product = {};
}

Product.DetailImage = Class.create();
Product.DetailImage.prototype = {
    _target: null,
    _el: null,
    _offset: [0,0],
    _startPos : '',
    _fx: null,
    initialize: function(id, img_url ,target){
        this._target = target ? $(target): $(document.body);
        this._target.setStyle({
            backgroundImage: 'url(' + img_url + ')',
            backgroundPosition: '600px 100px',
            backgroundRepeat: 'no-repeat'
        });
        this._startPos = this._target.style.backgroundPosition;
        this._el = $(id);
        this._offset = this._el.cumulativeOffset();
        Event.observe(id, 'mousemove', this.handleMouseMove.bind(this));
        Event.observe(id, 'mouseout', this.handleMouseOut.bind(this))
    },
    handleMouseMove: function(event){
        var x = 0, y =0;
        x = 650 - (event.pageX - this._offset[0]) * 1.5;
        y = 200 - (event.pageY - this._offset[1]) * 1.5;
        this._target.setStyle({backgroundPosition : x + 'px ' + y  + 'px'});
    },
    handleMouseOut: function()
    {
        this._fx = new Effect.Morph(this._target, 
        {
            style: 'background-position:' + this._startPos + ';',
            duration: 0.3
        });
        //this._target.setStyle({backgroundPosition : this._startPos});
    }
};