/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */

/////////////////////////////////////////////////////////////////////////

/**
 * @class a YAHOO.util.DDFramed implementation. During the drag over event, the
 * dragged element is inserted before the dragged-over element.
 *
 * @extends YAHOO.util.DDProxy
 * @constructor
 * @param {String} id the id of the linked element
 * @param {String} sGroup the group of related DragDrop objects
 */
YAHOO.example.DDPlayer = function(id, sGroup) {
    this.initPlayer(id, sGroup);
};

YAHOO.example.DDPlayer.prototype = new YAHOO.util.DDProxy();

YAHOO.example.DDPlayer.TYPE = "DDPlayer";

// this section runs when page is loaded
YAHOO.example.DDPlayer.prototype.initPlayer = function(id, sGroup) {
    if (!id) { return; }

    this.init(id, sGroup);
    this.initFrame();

    this.logger = new ygLogger("DDPlayer");
    var s = this.getDragEl().style;
    s.borderColor = "#AFA37D";
//    s.borderColor = "transparent";
//     s.backgroundColor = "#FF0000";
    //s.opacity = 1; //opacity of dragable player
    s.opacity = 0.76; //opacity of dragable player
    s.filter = "alpha(opacity=76)";

    // specify that this is not currently a drop target
    this.isTarget = false;

    this.originalStyles = [];

    this.type = YAHOO.example.DDPlayer.TYPE;
    this.slot = null;

    this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
    this.logger.debug(id + " startpos: " + this.startPos);
};

YAHOO.example.DDPlayer.prototype.startDrag = function(x, y) {

// Start Drag Function

    this.logger.debug(this.id + " startDrag");

    var dragEl = this.getDragEl();
    var clickEl = this.getEl();

    dragEl.innerHTML = clickEl.innerHTML;
    dragEl.className = clickEl.className;
    dragEl.style.color = this.DDM.getStyle(clickEl, "color");;
    dragEl.style.backgroundColor = this.DDM.getStyle(clickEl, "backgroundColor");

    var s = clickEl.style;
    //s.borderColor = "green";
    s.opacity = .1;  // opacity of background player div
    s.filter = "alpha(opacity=10)";

    var targets = YAHOO.util.DDM.getRelated(this, true);
    this.logger.debug(targets.length + " targets");
    for (var i=0; i<targets.length; i++) {
        
        var targetEl = this.getTargetDomRef(targets[i]);

        if (!this.originalStyles[targetEl.id]) {
            this.originalStyles[targetEl.id] = targetEl.className;
        }

        targetEl.className = "target";
    }
};

YAHOO.example.DDPlayer.prototype.getTargetDomRef = function(oDD) {
    if (oDD.player) {
        return oDD.player.getEl();
    } else {
        return oDD.getEl();
    }
};

YAHOO.example.DDPlayer.prototype.endDrag = function(e) {
    // reset the linked element styles
    // end the drag

    var s = this.getEl().style;
    s.opacity = 1; //opacity of final dragged element
    s.filter = "alpha(opacity=100)";

    this.resetTargets();
};

YAHOO.example.DDPlayer.prototype.resetTargets = function() {

    // reset the target styles
    var targets = YAHOO.util.DDM.getRelated(this, true);
    for (var i=0; i<targets.length; i++) {
        var targetEl = this.getTargetDomRef(targets[i]);
        var oldStyle = this.originalStyles[targetEl.id];
        if (oldStyle) {
            targetEl.className = oldStyle;
        }
    }
};

YAHOO.example.DDPlayer.prototype.onDragDrop = function(e, id) {
    // get the drag and drop object that was targeted
    var oDD;

    var draggable = document.createElement("div"); // mj
    var draggableimage = document.createElement("img")
    draggableimage.setAttribute("src", "")       // mj
    draggableimage.setAttribute("width", "50")       // mj
    draggable.setAttribute("id", "draggable");
    draggable.setAttribute("class", "player");
//    document.body.appendChild(draggable);          // mj
//    draggable.appendChild(draggableimage);          // mj

    
    if ("string" == typeof id) {
        oDD = YAHOO.util.DDM.getDDById(id);
    } else {
        oDD = YAHOO.util.DDM.getBestMatch(id);
    }
//alert(oDD);

    var el = this.getEl();
//alert(el.id);
    // check if the slot has a player in it already

    if (oDD.player) {

        // check if we are dragging a player already on the bracelet
        if (this.slot) {
	    //alert('player already in slot');

            // check to see if the player that is already in the
            // slot can go to the slot the dragged player is in
            // YAHOO.util.DDM.isLegalTarget is a new method
  
            if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
		//alert('Player in Slot');
                this.logger.debug("swapping player positions");
                YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
                //this.slot.player = oDD.player;
                //oDD.player.slot = this.slot;
            } else {
		//alert('Player not in Slot');
                this.logger.debug("moving player in slot back to start");
                YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
                //this.slot.player = null;
                //oDD.player.slot = null
            }

        } else {

	    //alert('Swapping dragged player with bracelet player	');
        }

    } else {

	//alert('dragging to an empty slot');

        // Move the player into the emply slot
        // I may be moving off a slot so I need to clear the player ref	
	// clears the slot previously occupied by the dragged player   
        if (this.slot) {
            //alert("clearing slot");
            //this.slot.player = null;
        }
    }


//    draggable = new YAHOO.example.DDPlayer("draggable", "bottomslots");

//alert(el.firstChild.getAttribute("src"));

//    draggable.setAttribute("id", el.getAttribute("id"));
//    draggable.firstChild.setAttribute("src", el.firstChild.getAttribute("src"));
//    draggable.firstChild.setAttribute("name", el.firstChild.getAttribute("name"));
//    YAHOO.util.DDM.moveToEl(draggable, oDD.getEl());
//    YAHOO.util.DDM.moveToEl(el, oDD.getEl());
//    this.resetTargets();
    //alert(this + oDD);
//    this.slot = oDD;
//    this.slot.player = null;
//    this.slot.player = this; // registers slot as having something in it

    var beadid = oDD.getEl().id + '-bead';
    var bead = document.getElementById(beadid);
	if (bead.firstChild) {
	    bead.removeChild(bead.firstChild); 
	};
    var beadimage = document.createElement("img");
    //beadimage.setAttribute("width", "50")       // mj
    bead.appendChild(beadimage);          // mj
    bead.childNodes[0].setAttribute("src", el.childNodes[0].getAttribute("src"));
    bead.childNodes[0].setAttribute("name", escape(el.childNodes[0].getAttribute("name")));
    bead.childNodes[0].setAttribute("onClick", "productDetail(" + escape(el.childNodes[0].getAttribute('name')) + ")");
//    bead.childNodes[0].onclick =  function() {
 //        productDetail(el.childNodes[0].getAttribute('name'));         
//    }

    //alert(el.firstChild.getAttribute('name'));

    //productDetail(el.firstChild.getAttribute('name'));
    
    if ( el.getAttribute("name") == "beadtray" ) {
      bead = new YAHOO.example.DDPlayer(beadid, "bottomslots");
    } else if ( el.getAttribute("name") == "cliptray" ) {
      bead = new YAHOO.example.DDPlayer(beadid, "topslots");
    } else if ( el.getAttribute("name") == "bead" ) {
      el.removeChild(el.firstChild); 
      el.style.opacity = "0.75";
      el.style.filter = "alpha(opacity=76)";
      bead = new YAHOO.example.DDPlayer(beadid, "bottomslots");
      beadimage.onclick =  function() {
         productDetail(beadimage.getAttribute('name'));
      }
    } else if ( el.getAttribute("name") == "clip" ) {
      el.removeChild(el.firstChild); 
      el.style.opacity = "0.75";
      el.style.filter = "alpha(opacity=76)";
      bead = new YAHOO.example.DDPlayer(beadid, "topslots");
    } else {
      bead = new YAHOO.example.DDPlayer(beadid, "bottomslots");
    };


checkPrice();
    //alert(oDD.getEl().id);
    //alert(this.slot.player);
    //oDD.player.slot = oDD.player;

};

YAHOO.example.DDPlayer.prototype.swap = function(el1, el2) {
    var dom = YAHOO.util.Dom;
    var pos1 = dom.getXY(el1);
    var pos2 = dom.getXY(el2);
    dom.setXY(el1, pos2);
   dom.setXY(el2, pos1);
};

YAHOO.example.DDPlayer.prototype.onDragOver = function(e, id) {};

YAHOO.example.DDPlayer.prototype.onDrag = function(e, id) {};