<?php
// Colourpicker from YUI adapted a bit via RJM Programming
// Thanks to YUI and associated really useful advice at http://developer.yahoo.com/yui/examples/colorpicker/colorpicker-dialog-from-script.html
//    and http://developer.yahoo.com/yui/examples/colorpicker/colorpicker-dialog-from-script_clean.html
  $antibcol = "";
  $bcol = "";
  $bcoldiv = "";
  if (isset($_GET['r'])) {
    $bcol = " style='background-color: rgb(".$_GET['r'].",".$_GET['g'].",".$_GET['b'].");color: rgb(".(255 - $_GET['r']).",".(255 - $_GET['g']).",".(255 - $_GET['b']).");'";
    $bcoldiv = " style='background-color: rgb(".$_GET['r'].",".$_GET['g'].",".$_GET['b'].");width:400px;height:400px;'";
    $antibcol = " style='font-size:34px;color: rgb(".(255 - $_GET['r']).",".(255 - $_GET['g']).",".(255 - $_GET['b']).");'";
  }
?>

<html>
<head>
<!-- Dependencies --> 
<script src="http://yui.yahooapis.com/2.9.0/build/utilities/utilities.js" ></script>
<script src="http://yui.yahooapis.com/2.9.0/build/slider/slider-min.js" ></script>
 
<!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/colorpicker/assets/skins/sam/colorpicker.css">
<script src="http://yui.yahooapis.com/2.9.0/build/colorpicker/colorpicker-min.js" ></script>


<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/slider/assets/skins/sam/slider.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/colorpicker/assets/skins/sam/colorpicker.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/slider/slider-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/colorpicker/colorpicker-min.js"></script>

<style>
/* Assumes YUI files are installed in the assets/yui
 * subdirectory from the web root */
*html .yui-picker-bg {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/yui/build/colorpicker/assets/picker_mask.png', sizingMethod='scale');
/* snip */
*html .yui-picker-bg {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../build/colorpicker/assets/picker_mask.png', sizingMethod='scale');
}
/* snip */
 
*html .yui-picker-bg {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='PATH/FROM/THIS/PAGE/TO/build/colorpicker/assets/picker_mask.png', sizingMethod='scale');
}
 }
</style>
</head>

<body class="yui-skin-sam">
<div id="container"></div>

<script>
 
//create a namespace object in the example namespace:
YAHOO.namespace("example.colorpicker")



//create a new object for this module:
YAHOO.example.colorpicker.inDialog = function() {

	//Some shortcuts to use in our example:
	var Event=YAHOO.util.Event,
		Dom=YAHOO.util.Dom,
		lang=YAHOO.lang;
            var ris=0;
            var bis=0;
            var gis=0;
		

	return {
	
		//In our initialization function, we'll create the dialog;
		//in its render event, we'll create our Color Picker instance.
        init: function() {

            // Instantiate the Dialog
            this.dialog = new YAHOO.widget.Dialog("yui-picker-panel", { 
				width : "500px",
				close: true,
				fixedcenter : true,
				visible : false, 
				constraintoviewport : true,
				buttons : [ { text:"Submit", handler:this.handleSubmit, isDefault:true },
							{ text:"Cancel", handler:this.handleCancel } ]
             });
 
			// Once the Dialog renders, we want to create our Color Picker
			// instance.
            this.dialog.renderEvent.subscribe(function() {
				if (!this.picker) { //make sure that we haven't already created our Color Picker
					YAHOO.log("Instantiating the color picker", "info", "example");
					this.picker = new YAHOO.widget.ColorPicker("yui-picker", {
						container: this.dialog,
						images: {
							PICKER_THUMB: "assets/picker_thumb.png",
							HUE_THUMB: "assets/hue_thumb.png"
						}
						//Here are some other configurations we could use for our Picker:
						//showcontrols: false,  // default is true, false hides the entire set of controls
						//showhexcontrols: true, // default is false
						//showhsvcontrols: true  // default is false
					});

					//listen to rgbChange to be notified about new values
					this.picker.on("rgbChange", function(o) {
						YAHOO.log(lang.dump(o), "info", "example");
	                    //alert("The new color value is " + o.newValue);
	                    ris=o.newValue[0];
	                    gis=o.newValue[1];
	                    bis=o.newValue[2];
	                    //alert(ris);
	                    //var isok=prompt("Draw square with color rgb=" + o.newValue, "Y");
	                    //if (isok == "Y") {
	                      
	                      //window.location = './yui_colourpicker.php?r=' + o.newValue[0] + "&g=" + o.newValue[1] + "&b=" + o.newValue[2];
	                    //}
					});
				}
			});	
			
			// If we wanted to do form validation on our Dialog, this
			// is where we'd do it.  Remember to return true if validation
			// passes; otherwise, your Dialog's submit method won't submit.
            this.dialog.validate = function() {
				return true;
            };

            // Wire up the success and failure handlers
            this.dialog.callback = { success: this.handleSuccess, thisfailure: this.handleFailure };
            
            // We're all set up with our Dialog's configurations;
			// now, render the Dialog
            this.dialog.render();
			
			// We can wrap up initialization by wiring all of the buttons in our
			// button dashboard to selectively show and hide parts of the
			// Color Picker interface.  Remember that "Event" here is an
			// alias for YAHOO.util.Event and "Event.on" is therfor a shortcut
			// for YAHOO.util.Event.onAvailable -- the standard Dom event attachment
			// method:
            Event.on("show", "click", this.dialog.show, this.dialog, true);
            Event.on("hide", "click", this.dialog.hide, this.dialog, true);
            Event.on("btnhsv", "click", function(e) {
                        var p = this.picker;
                        p.set(p.OPT.SHOW_HSV_CONTROLS, !p.get(p.OPT.SHOW_HSV_CONTROLS));
                    }, this.dialog, true);
            Event.on("btnhex", "click", function(e) {
                        var p = this.picker;
                        p.set(p.OPT.SHOW_HEX_CONTROLS, !p.get(p.OPT.SHOW_HEX_CONTROLS));
                    }, this.dialog, true);
            Event.on("btnrgb", "click", function(e) {
                        var p = this.picker;
                        p.set(p.OPT.SHOW_RGB_CONTROLS, !p.get(p.OPT.SHOW_RGB_CONTROLS));
                    }, this.dialog, true);
            Event.on("btnhexsummary", "click", function(e) {
                        var p = this.picker;
                        p.set(p.OPT.SHOW_HEX_SUMMARY, !p.get(p.OPT.SHOW_HEX_SUMMARY));
                    }, this.dialog, true);
			
			//initialization complete:
			YAHOO.log("Example initialization complete.", "info", "example");

		},
		
		//We'll wire this to our Dialog's submit button:
		handleSubmit: function() {
			//submit the Dialog:
	        var isok=prompt("Draw square with color rgb=" + ris+','+gis+','+bis, "Y");
	        if (isok == "Y") {	                      
	            window.location = './yui_colourpicker.php?r=' + ris + "&g=" + gis + "&b=" + bis;
	        }
			this.submit();
			//log this step to logger:
			YAHOO.log("Dialog was submitted.", "info", "example");
		},
 
 		//If the Dialog's cancel button is clicked,
		//this function fires
		handleCancel: function() {
			//the cancel method automatically hides the Dialog:
			this.cancel();
			//log this step to logger:
			YAHOO.log("Dialog was submitted.", "info", "example");
		},
		
		//We'll use Connection Manager to post our form data to the
		//server; here, we set up our "success" handler.
		handleSuccess: function(o) {
			YAHOO.log("Connection Manager returned results to the handleSuccess method.", "info", "example");
			var response = o.responseText;
			//On Yahoo servers, we may get some page stamping;
			//we can trim off the trailing comment:
			response = response.split("<!")[0];
			//write the response to the page:
			response = "<strong>The data received by the server was the following:</strong> " + response;
			document.getElementById("resp").innerHTML = response;
		},
		
		handleFailure: function(o) {
			YAHOO.log("Connection Manager returned results to the handleFailure method.", "error", "example");
			YAHOO.log("Response object:" + lang.dump(o), "error", "example");
		}
   
	}


}();



//The earliest safe moment to instantiate a Dialog (or any
//Container element is onDOMReady; we'll initialize then:
YAHOO.util.Event.onDOMReady(YAHOO.example.colorpicker.inDialog.init, YAHOO.example.colorpicker.inDialog, true);

  
</script>

<!--begin Color Picker configuration dashboard: -->
<div>
<?php
  echo '<button'.$bcol.' id="show">Show Colour Picker</button> ';
  echo '<!--button'.$bcol.' id="hide">Hide Color Picker</button> ';
  echo '<button'.$bcol.' id="btnhsv">Show/hide HSV fields</button> ';
  echo '<button'.$bcol.' id="btnhex">Show/hide HEX field</button> ';
  echo '<button'.$bcol.' id="btnrgb">Show/hide RGB field</button> ';
  echo '<button'.$bcol.' id="btnhexsummary">Show/hide HEX summary info</button--> ';
  if ($bcoldiv != "") {
    $pmore = "";
    $rx = 131 - $_GET['r'];
    $ry = 131 - $_GET['g'];
    $rz = 131 - $_GET['b'];
    if (($rx + $ry + $rz) > 0 && ($rx + $ry + $rz) < 25) {
      $pmore = "&nbsp;<p style='color:white;'>And the snow is this colour.</p>";
    }
    echo '<div'.$bcoldiv.'><p'.$antibcol.'>The rain in Spain falls mainly on the plain.</p>'.$pmore.'</div>';
  }
?>
</div>

<!--begin Dialog markup in standard module format-->
<div id="yui-picker-panel" class="yui-picker-panel">
	<div class="hd">Please choose a colour:</div>
	<div class="bd">
		<form name="yui-picker-form" id="yui-picker-form" method="post" action="./yui_colourpicker.php">
		<div class="yui-picker" id="yui-picker"></div>
		</form>
	</div>
	<div class="ft"></div>
</div>

<!--begin form for server response-->
<div id="resp" style="display:none;">Server response will be displayed in this area</div>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>

 