Widget:PillIdentifier: Difference between revisions

Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
<includeonly>
<includeonly>


<script content-type= "application/javascript" src="http://www.wikidoc.org/extensions/raty/md5.js"></script>
<script content-type= "application/javascript" src="http://www.wikidoc.org/includes/raty/md5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
Line 118: Line 118:
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred;
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred;
};
};
function runQuery() {
function runQuery() {
$('#resultsTable-body tr').remove();
$('#resultsTable-body').html('');
var queryParameters = buildQueryParameters();
var queryParameters = buildQueryParameters();
var printoutRequests = "|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name";
var printoutRequests = "|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name";
Line 271: Line 272:
$("#"+selectedProperty).val(selectedValue);
$("#"+selectedProperty).val(selectedValue);
}
}
function nav(){
function nav(){
Line 276: Line 278:
var dirIndex = "";
var dirIndex = "";
var position = $(".propertyContainerActive").data()["order"];
var position = $(".propertyContainerActive").data()["order"];
console.log(direction);
console.log(position);
var positionArr = [
var positionArr = [
["", ""],
["", ""],
Line 296: Line 296:
console.log("Ruh-roh. Something happened in figuring out what direction to navigate");
console.log("Ruh-roh. Something happened in figuring out what direction to navigate");
}
}
console.log(dirIndex);
var newActiveDiv = positionArr[position][dirIndex];
var newActiveDiv = positionArr[position][dirIndex];
console.log(newActiveDiv);
console.log(newActiveDiv);
 
$(this).removeClass("propertyContainerActive");
$(".propertyContainerActive").attr("class", "propertyContainerInactive");
$(this).addClass("propertyContainerInactive");
$(newActiveDiv).attr("class", "propertyContainerActive");
$(newActiveDiv).removeClass("propertyContainerInactive");
$(newActiveDiv).addClass("propertyContainerActive");
var nextPosition = $(newActiveDiv).data()["order"];
var nextPosition = $(newActiveDiv).data()["order"];
console.log(nextPosition);
console.log(nextPosition);
console.log(positionArr[nextPosition][0]);
console.log(positionArr[nextPosition][0]);
Line 315: Line 311:
if (positionArr[nextPosition][0] == ""){
if (positionArr[nextPosition][0] == ""){
$("#back").attr("visibility","hidden");
$("#back").css("visibility","hidden");
}
}
else  
else  
{
{
$("#back").attr("visibility","visible");
$("#back").css("visibility","visible");
}
}
if (positionArr[nextPosition][1] !== null){
if (positionArr[nextPosition][1] == ""){
$("#next").attr("visibility","visible");
$("#next").css("visibility","hidden");
}
}
else  
else  
{
{
$("#next").attr("visibility","hidden");
$("#next").css("visibility","visible");
}
}
};
};
Line 472: Line 468:
}
}
#navTool{
#pillIDNav div{
display:inline-block;
display:inline-block;
}
}
 
#formConatiner div{
display:inline-block;
}
#formContainer{
background:#6e6e6e;
border:50%;
margin:auto;
}
.pillResult{
display:table-row;
}
.pillResult img{
width:150px;
height:auto;
display:table-cell;
vertical-align: middle;
border-radius:50%;
}
.pillResult-text{
display:table-cell;
vertical-align:top;
padding-left:5px;
}
.pillResult-text h1{
margin:0px;
font-size:24px;
}
.pillResult-text h2{
margin:0px;
font-size:18px;
}
.pillResult-text p{
margin:0px;
font-size:16px;
}
</style>
</style>


    <div id="pillIdentifierContainer">
<div id="pillIdentifierContainer">
        <div id="pillIdentiferTitle">
<div id="pillIdentiferTitle">
            <span>Pill Identifier</span>
    <span>Pill Identifier</span>
    </div>
    <div id="queryContainer">
        <div id="queryContainer_Shape" class="propertyContainerActive" data-order="1">
        <span class="propertyContainer_Title">SHAPE</span>
            <div id="pillShapeContainer" class="propertyContainer" data-val="Shape">
            <div id="pillShapeContainer_Row1" class="pillContainer_Row">
                    <div id="Shape_Round" class="pillShapeOption" data-val="Round" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/79/Round_Grey_Pill.png" alt="Round Pill"/></div>
                    <div id="Shape_Oval" class="pillShapeOption" data-val="Oval" data-prop="selectedShape"><img src="http://static.wikidoc.org/3/3d/Oval_Grey_Pill.png" alt="Oval Pill"/></div>
                    <div id="Shape_Square" class="pillShapeOption" data-val="Square" data-prop="selectedShape"><img src="http://static.wikidoc.org/e/e9/Square_Grey_Pill.png" alt="Square Pill"/></div>
                    <div id="Shape_Rectangular" class="pillShapeOption" data-val="Rectangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8e/Rectangular_Grey_Pill.png" alt="Rectangular Pill"/></div>
                    <div id="Shape_Triangular" class="pillShapeOption" data-val="Triangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/c/cb/Triangular_Grey_Pill.png" alt="Triangular Pill"/></div>
                    <div id="Shape_Capsule" class="pillShapeOption" data-val="Capsule" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/b8/Capsule_Grey_Pill.png" alt="Capsule"/></div>
                </div>
                <div id="pillShapeContainer_Row2" class="pillContainer_Row">
                    <div id="Shape_Diamond" class="pillShapeOption" data-val="Diamond" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/98/Diamond_Grey_Pill.png" alt="Diamond Pill"/></div>
                    <div id="Shape_Pentagon" class="pillShapeOption" data-val="Pentagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/be/Pentagon_Grey_Pill.png" alt="Pentagon Pill"/></div>
                    <div id="Shape_Hexagon" class="pillShapeOption" data-val="Hexagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/2/25/Hexagon_Grey_Pill.png" alt="Hexagon Pill"/></div>
                    <div id="Shape_Octagon" class="pillShapeOption" data-val="Octagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/f7/Octagon_Grey_Pill.png" alt="Octagon Pill"/></div>
                    <div id="Shape_DoubleCircle" class="pillShapeOption" data-val="DoubleCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/73/Double_Circle_Grey_Pill.png" alt="Double Circle Pill"/></div>
                    <div id="Shape_Clover" class="pillShapeOption" data-val="Clover" data-prop="selectedShape"><img src="http://static.wikidoc.org/a/a3/Clover_Grey_Pill.png" alt="Clover Pill"/></div>
            </div>
                <div id="pillShapeContainer_Row3" class="pillContainer_Row">
                    <div id="Shape_Gear" class="pillShapeOption" data-val="Gear" data-prop="selectedShape"><img src="http://static.wikidoc.org/5/56/Gear_Grey_Pill.png" alt="Gear Pill"/></div>
                    <div id="Shape_Bullet" class="pillShapeOption" data-val="Bullet" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8c/Bullet_Grey_Pill.png" alt="Bullet Pill"/></div>
                    <div id="Shape_SemiCircle" class="pillShapeOption" data-val="SemiCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/80/SemiCircle_Grey_Pill.png" alt="Semi-Circle Pill"/></div>
                    <div id="Shape_Trapezoid" class="pillShapeOption" data-val="Trapezoid" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/7a/Trapezoid_Grey_Pill.png" alt="Trapezoid Pill"/></div>
                    <div id="Shape_Tear_Drop" class="pillShapeOption" data-val="TearDrop" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/9a/Tear_Drop_Grey_Pill.png" alt="Tear Drop Pill"/></div>
                    <div id="Shape_Free_Form" class="pillShapeOption" data-val="FreeForm" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/fa/Free_Form_Grey_Pill.png" alt="Free Form Pill"/></div>
                </div>
            </div>
         </div>
         </div>
         <div id="formContainer">
         <div id="queryContainer_Color" class="propertyContainerInactive" data-order="2">
             <form id="selectedProperties" action="" method="get">
        <span class="propertyContainer_Title">COLOR</span>
            <div id="selectedShape-container" class="ui-button">
             <div id="pillColorContainer" class="propertyContainer">
                 <span>Shape:</span><input readonly type="text" name="selectedShape" id="selectedShape" value="">
                <div id="pillColorContainer_Row1" class="pillContainer_Row">
                    <div id="Color_RedBrown" class="pillColorOption" data-val="Brown" data-prop="selectedColor"><img src="http://static.wikidoc.org/8/8a/Pid_redbrown.png" alt="Red/Brown"></div>
                    <div id="Color_Orange" class="pillColorOption" data-val="Orange" data-prop="selectedColor"><img src="http://static.wikidoc.org/a/ae/Pid_orange.png" alt="Orange"></div>
                    <div id="Color_Yellow" class="pillColorOption" data-val="Yellow" data-prop="selectedColor"><img src="http://static.wikidoc.org/e/e3/Pid_yellow.png" alt="Yellow"></div>
                    <div id="Color_Green" class="pillColorOption" data-val="Green" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/c0/Pid_green.png" alt="Green"></div>
                    <div id="Color_Torqouise" class="pillColorOption" data-val="Torquoise" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/11/Pid_turquoise.png" alt="Torqouise"></div>
                    <div id="Color_Blue" class="pillColorOption" data-val="Blue" data-prop="selectedColor"><img src="http://static.wikidoc.org/7/70/Pid_blue.png" alt="Blue"></div>
                </div>
                 <div id="pillColorContainer_Row2" class="pillContainer_Row">
                    <div id="Color_Purple" class="pillColorOption" data-val="Purple" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/19/Pid_purple.png" alt="Purple"></div>
                    <div id="Color_Pink" class="pillColorOption" data-val="Pink" data-prop="selectedColor"><img src="http://static.wikidoc.org/9/97/Pid_pink.png" alt="Pink"></div>
                    <div id="Color_Black" class="pillColorOption" data-val="Black" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/cb/Pid_black.png" alt="Black"></div>
                    <div id="Color_Grey" class="pillColorOption" data-val="Grey" data-prop="selectedColor"><img src="http://static.wikidoc.org/f/f5/Pid_grey.png" alt="Grey"></div>
                    <div id="Color_White" class="pillColorOption" data-val="White" data-prop="selectedColor"><img src="http://static.wikidoc.org/d/d2/Pid_white.png" alt="White"></div>
                </div>
             </div>
             </div>
             <div id="selectedColor-container" class="ui-button">
        </div>
                <span>Color:</span><input readonly type="text" name="selectedColor" id="selectedColor" value="">
        <div id="queryContainer_Scoring" class="propertyContainerInactive" data-order="3">
        <span class="propertyContainer_Title">SCORING</span>
             <div id="pillScoreContainer" class = "propertyContainer">
            <div id="pillScoreContainer_Row1" class="pillContainer_Row">
            <div id="pillScore1" class="pillScoreOption" data-val="1" data-prop="selectedScoring"><img src="http://static.wikidoc.org/f/f2/Score_1_Grey_Pill.jpg" alt="Score 1"></div>
            <div id="pillScore2" class="pillScoreOption" data-val="2" data-prop="selectedScoring"><img src="http://static.wikidoc.org/9/95/Score_2_Grey_Pill.jpg" alt="Score 2"></div>
            </div>
            <div id="pillScoreContainer_Row2" class="pillContainer_Row">
            <div id="pillScore3" class="pillScoreOption" data-val="3" data-prop="selectedScoring"><img src="http://static.wikidoc.org/d/d9/Score_3_Grey_Pill.jpg" alt="Score 3"></div>
            <div id="pillScore4" class="pillScoreOption" data-val="4" data-prop="selectedScoring"><img src="http://static.wikidoc.org/3/35/Score_4_Grey_Pill.jpg" alt="Score 4"></div>
            </div>
             </div>
             </div>
            <div id="selectedScoring-container" class="ui-button">
                <span>Scoring:</span><input readonly type="text" name="selectedScoring" id="selectedScoring" value="">
            </div>         
            <div class="ui-button" id="selectedMinSize-container">
                <span>Size:</span><input readonly type="text" name="selectedMinSize" size="3" id="selectedMinSize" value="5"><span>&nbsp;to&nbsp;</span><input readonly type="text" name="selectedMaxSize" size="3" id="selectedMaxSize" value="20">
            </div><br> 
            <div class="ui-button" id="selectedImprint-container">
                <span>Imprint:</span><input readonly type="text" name="selectedImprint" id="selectedImprint" value="">
            </div>
            <div class="ui-button" id="selectedNDC-container">
                <span>NDC:</span><input readonly type="text" name="selectedNDC" id="selectedNDC" value="">
            </div>
            <div class="ui-button" id="selectedIngred-container">
                <span>Ingredients:</span><input readonly type="text" name="selectedIngred" id="selectedIngred" value="">
            </div>
            </form>
         </div>
         </div>
         <div id="queryContainer">
         <div id="queryContainer_Size" class="propertyContainerInactive" data-order="4">
            <div id="queryContainer_Shape" class="propertyContainerActive" data-order="1">
        <span class="propertyContainer_Title">SIZE</span>
                <span class="propertyContainer_Title">SHAPE</span>
            <div id="pillSizeContainer" class="propertyContainer">
                <div id="pillShapeContainer" class="propertyContainer" data-val="Shape">
            <span>Search for Pills Between:&nbsp;</span>
                    <div id="pillShapeContainer_Row1" class="pillContainer_Row">
 
                        <div id="Shape_Round" class="pillShapeOption" data-val="Round" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/79/Round_Grey_Pill.png" alt="Round Pill"/></div>
                <div id="sliderContainer" class="pillContainer_Row" style="m">
                        <div id="Shape_Oval" class="pillShapeOption" data-val="Oval" data-prop="selectedShape"><img src="http://static.wikidoc.org/3/3d/Oval_Grey_Pill.png" alt="Oval Pill"/></div>
                    <div class="pillSizeOption">
                        <div id="Shape_Square" class="pillShapeOption" data-val="Square" data-prop="selectedShape"><img src="http://static.wikidoc.org/e/e9/Square_Grey_Pill.png" alt="Square Pill"/></div>
                         <img id="DisplaySmallSize" src="http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png" alt=""/>
                         <div id="Shape_Rectangular" class="pillShapeOption" data-val="Rectangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8e/Rectangular_Grey_Pill.png" alt="Rectangular Pill"/></div>
                         <span id="pillMinSize">5</span><span>&nbsp;mm</span>
                         <div id="Shape_Triangular" class="pillShapeOption" data-val="Triangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/c/cb/Triangular_Grey_Pill.png" alt="Triangular Pill"/></div>
                        <div id="Shape_Capsule" class="pillShapeOption" data-val="Capsule" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/b8/Capsule_Grey_Pill.png" alt="Capsule"/></div>
                     </div>
                     </div>
                     <div id="pillShapeContainer_Row2" class="pillContainer_Row">
                     <div class="pillSizeOption">
                        <div id="Shape_Diamond" class="pillShapeOption" data-val="Diamond" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/98/Diamond_Grey_Pill.png" alt="Diamond Pill"/></div>
                         <img id="DisplayDime" src="http://static.wikidoc.org/c/c4/Pill_Size_Dime.png" alt="Reference Dime"/>
                        <div id="Shape_Pentagon" class="pillShapeOption" data-val="Pentagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/be/Pentagon_Grey_Pill.png" alt="Pentagon Pill"/></div>
                        <div id="Shape_Hexagon" class="pillShapeOption" data-val="Hexagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/2/25/Hexagon_Grey_Pill.png" alt="Hexagon Pill"/></div>
                        <div id="Shape_Octagon" class="pillShapeOption" data-val="Octagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/f7/Octagon_Grey_Pill.png" alt="Octagon Pill"/></div>
                         <div id="Shape_DoubleCircle" class="pillShapeOption" data-val="DoubleCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/73/Double_Circle_Grey_Pill.png" alt="Double Circle Pill"/></div>
                        <div id="Shape_Clover" class="pillShapeOption" data-val="Clover" data-prop="selectedShape"><img src="http://static.wikidoc.org/a/a3/Clover_Grey_Pill.png" alt="Clover Pill"/></div>
                     </div>
                     </div>
                     <div id="pillShapeContainer_Row3" class="pillContainer_Row">
                     <div class="pillSizeOption">
                        <div id="Shape_Gear" class="pillShapeOption" data-val="Gear" data-prop="selectedShape"><img src="http://static.wikidoc.org/5/56/Gear_Grey_Pill.png" alt="Gear Pill"/></div>
                         <span id="pillMaxSize">20</span><span>&nbsp;mm</span>
                         <div id="Shape_Bullet" class="pillShapeOption" data-val="Bullet" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8c/Bullet_Grey_Pill.png" alt="Bullet Pill"/></div>
                         <img id="DisplayLargeSize" src="http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png" alt=""/>
                        <div id="Shape_SemiCircle" class="pillShapeOption" data-val="SemiCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/80/SemiCircle_Grey_Pill.png" alt="Semi-Circle Pill"/></div>
                        <div id="Shape_Trapezoid" class="pillShapeOption" data-val="Trapezoid" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/7a/Trapezoid_Grey_Pill.png" alt="Trapezoid Pill"/></div>
                         <div id="Shape_Tear_Drop" class="pillShapeOption" data-val="TearDrop" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/9a/Tear_Drop_Grey_Pill.png" alt="Tear Drop Pill"/></div>
                        <div id="Shape_Free_Form" class="pillShapeOption" data-val="FreeForm" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/fa/Free_Form_Grey_Pill.png" alt="Free Form Pill"/></div>
                     </div>
                     </div>
                 </div>
                 </div>
                <br>
                <br>
                <div id="slider"></div>
             </div>
             </div>
            <div id="queryContainer_Color" class="propertyContainerInactive" data-order="2">
        </div>
                <span class="propertyContainer_Title">COLOR</span>
<div id = "misc" class="propertyContainerInactive" data-order="5">
                <div id="pillColorContainer" class="propertyContainer">
        <form name="selectMisc">
                    <div id="pillColorContainer_Row1" class="pillContainer_Row">
                <div class="pillMiscContainer" id="queryContainer-Imprint" data-prop="selectedImprint" data-inputName="pillImprint">
                        <div id="Color_RedBrown" class="pillColorOption" data-val="Brown" data-prop="selectedColor"><img src="http://static.wikidoc.org/8/8a/Pid_redbrown.png" alt="Red/Brown"></div>
                    <span class="propertyContainer_Title">IMPRINT</span>
                        <div id="Color_Orange" class="pillColorOption" data-val="Orange" data-prop="selectedColor"><img src="http://static.wikidoc.org/a/ae/Pid_orange.png" alt="Orange"></div>
                     <div id="PillImprintContainer" class="propertyContainer-Small">
                        <div id="Color_Yellow" class="pillColorOption" data-val="Yellow" data-prop="selectedColor"><img src="http://static.wikidoc.org/e/e3/Pid_yellow.png" alt="Yellow"></div>
                         <span>Please Enter the Pill Imprint:&nbsp;</span><br>
                        <div id="Color_Green" class="pillColorOption" data-val="Green" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/c0/Pid_green.png" alt="Green"></div>
<input id="pillImprint" name="pillImprint" type="text">
                        <div id="Color_Torqouise" class="pillColorOption" data-val="Torquoise" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/11/Pid_turquoise.png" alt="Torqouise"></div>
                        <div id="Color_Blue" class="pillColorOption" data-val="Blue" data-prop="selectedColor"><img src="http://static.wikidoc.org/7/70/Pid_blue.png" alt="Blue"></div>
                    </div>
                     <div id="pillColorContainer_Row2" class="pillContainer_Row">
                        <div id="Color_Purple" class="pillColorOption" data-val="Purple" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/19/Pid_purple.png" alt="Purple"></div>
                         <div id="Color_Pink" class="pillColorOption" data-val="Pink" data-prop="selectedColor"><img src="http://static.wikidoc.org/9/97/Pid_pink.png" alt="Pink"></div>
                        <div id="Color_Black" class="pillColorOption" data-val="Black" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/cb/Pid_black.png" alt="Black"></div>
                        <div id="Color_Grey" class="pillColorOption" data-val="Grey" data-prop="selectedColor"><img src="http://static.wikidoc.org/f/f5/Pid_grey.png" alt="Grey"></div>
                        <div id="Color_White" class="pillColorOption" data-val="White" data-prop="selectedColor"><img src="http://static.wikidoc.org/d/d2/Pid_white.png" alt="White"></div>
                     </div>
                     </div>
                 </div>
                 </div>
            </div>
                <div class="pillMiscContainer" id="queryContainer-NDC" data-prop="selectedNDC" data-inputName="pillNDC">
            <div id="queryContainer_Scoring" class="propertyContainerInactive" data-order="3">
                    <span class="propertyContainer_Title">NDC</span>
                <span class="propertyContainer_Title">SCORING</span>
                    <div id="pillNDCContainer" class="propertyContainer-Small">
                <div id="pillScoreContainer" class = "propertyContainer">
                         <span>If available, please enter the NDC:&nbsp;</span><br>
                    <div id="pillScoreContainer_Row1" class="pillContainer_Row">
                         <input id="pillNDC" name="pillNDC" type="text">
                         <div id="pillScore1" class="pillScoreOption" data-val="1" data-prop="selectedScoring"><img src="http://static.wikidoc.org/f/f2/Score_1_Grey_Pill.jpg" alt="Score 1"></div>
                         <div id="pillScore2" class="pillScoreOption" data-val="2" data-prop="selectedScoring"><img src="http://static.wikidoc.org/9/95/Score_2_Grey_Pill.jpg" alt="Score 2"></div>
                     </div>
                     </div>
                    <div id="pillScoreContainer_Row2" class="pillContainer_Row">
                </div>  
                        <div id="pillScore3" class="pillScoreOption" data-val="3" data-prop="selectedScoring"><img src="http://static.wikidoc.org/d/d9/Score_3_Grey_Pill.jpg" alt="Score 3"></div>
                <div class="pillMiscContainer" id="queryContainer-Ingred" data-prop="selectedIngred" data-inputName="pillIngred">
                        <div id="pillScore4" class="pillScoreOption" data-val="4" data-prop="selectedScoring"><img src="http://static.wikidoc.org/3/35/Score_4_Grey_Pill.jpg" alt="Score 4"></div>
                    <span class="propertyContainer_Title">INGREDIENTS</span>
                    <div id="PillIngredContainer" class="propertyContainer-Small">
                        <span>If available, please enter the ingredients:&nbsp;</span><br>
<input  id ="pillIngred" name="pillIngred" type="text">
                     </div>
                     </div>
                 </div>
                 </div>
            </div>
</form>
            <div id="queryContainer_Size" class="propertyContainerInactive" data-order="4">
</div>
                <span class="propertyContainer_Title">SIZE</span>
    </div>
                <div id="pillSizeContainer" class="propertyContainer">
    <div id="formContainer">
                    <span>Search for Pills Between:&nbsp;</span>
    <form id="selectedProperties" action="" method="get">
   
        <input type="hidden" name="selectedShape" id="selectedShape" value="">
                    <div id="sliderContainer" class="pillContainer_Row" style="m">
            <input type="hidden" name="selectedColor" id="selectedColor" value="">
                        <div class="pillSizeOption">
            <input type="hidden" name="selectedScoring" id="selectedScoring" value="">
                            <img id="DisplaySmallSize" src="http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png" alt=""/>
            <input type="hidden" name="selectedMinSize" id="selectedMinSize" value="5">
                            <span id="pillMinSize">5</span><span>&nbsp;mm</span>
             <input type="hidden" name="selectedMaxSize" id="selectedMaxSize" value="20">
                        </div>
            <input type="hidden" name="selectedImprint" id="selectedImprint" value="">
                        <div class="pillSizeOption">
            <input type="hidden" name="selectedNDC" id="selectedNDC" value="">
                            <img id="DisplayDime" src="http://static.wikidoc.org/c/c4/Pill_Size_Dime.png" alt="Reference Dime"/>
            <input type="hidden" name="selectedIngred" id="selectedIngred" value="">
                        </div>
        </form>
                        <div class="pillSizeOption">
    </div>
                            <span id="pillMaxSize">20</span><span>&nbsp;mm</span>
    <div id="pillIDNav">
                            <img id="DisplayLargeSize" src="http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png" alt=""/>
    <div id="back" class="navTool" data-direction="back" style="visibility:hidden">
                        </div>
        <img src="http://static.wikidoc.org/8/83/Pid_backbutton.png" alt="back">
                    </div>
        </div>
                    <br>
    <div id="next" class="navTool" data-direction="next" style="visibility:visible">
                    <br>
        <img src="http://static.wikidoc.org/8/8a/Pid_nextbutton.png" alt="next">
                    <div id="slider"></div>
                </div>
             </div>
            <div id = "misc" class="propertyContainerInactive" data-order="5">
                <form name="selectMisc">
                    <div class="pillMiscContainer" id="queryContainer-Imprint" data-prop="selectedImprint" data-inputName="pillImprint">
                        <span class="propertyContainer_Title">IMPRINT</span>
                        <div id="PillImprintContainer" class="propertyContainer-Small">
                            <span>Please Enter the Pill Imprint:&nbsp;</span><br>
                            <input id="pillImprint" name="pillImprint" type="text">
                        </div>
                    </div>
                    <div class="pillMiscContainer" id="queryContainer-NDC" data-prop="selectedNDC" data-inputName="pillNDC">
                        <span class="propertyContainer_Title">NDC</span>
                        <div id="pillNDCContainer" class="propertyContainer-Small">
                            <span>If available, please enter the NDC:&nbsp;</span><br>
                            <input id="pillNDC" name="pillNDC" type="text">
                        </div>
                    </div>
                    <div class="pillMiscContainer" id="queryContainer-Ingred" data-prop="selectedIngred" data-inputName="pillIngred">
                        <span class="propertyContainer_Title">INGREDIENTS</span>
                        <div id="PillIngredContainer" class="propertyContainer-Small">
                            <span>If available, please enter the ingredients:&nbsp;</span><br>
                            <input  id ="pillIngred" name="pillIngred" type="text">
                        </div>
                    </div>
                </form>
            </div>
         </div>
         </div>
         <div id="pillIDNav">
         <div id="submit">
            <div id="back" class="navTool" data-direction="back" style="visibility:hidden">
        <img src="http://static.wikidoc.org/6/6c/Pid_submitbutton.png" alt="Submit">
                <img src="http://static.wikidoc.org/8/83/Pid_backbutton.png" alt="back">
            </div>
            <div id="next" class="navTool" data-direction="next" style="visibility:visible">
                <img src="http://static.wikidoc.org/8/8a/Pid_nextbutton.png" alt="next">
            </div>
            <div id="submit">
                <img src="http://static.wikidoc.org/6/6c/Pid_submitbutton.png" alt="Submit">
            </div>
         </div>
         </div>
     </div>
     </div>
    <div id="resultsTable-container" style="visibility:collapse;">
</div>
<div id="resultsTable-container" style="visibility:collapse;">
    <table id="resultsTable" class="resultsTable-class">
        <thead>
            <th>
            Drug Name
            </th>
           
            <th>
            Pill Imprint
            </th>
           
            <th style="width:60px;">
            Dosage
            </th>
           
            <th>
            Ingredients
            </th>
           
            <th style="width:60px;">
            Pill Color
            </th>
           
            <th style="width:60px;">
            Pill Shape
            </th>
           
            <th>
            Pill Size (mm)
            </th>
           
            <th style="width:60px;">
            Score
            </th>
           
            <th>
            NDC
            </th>
           
            <th style="width:360px;">
            Pill Image
            </th>
        </thead>
       
        <tbody id="resultsTable-body">
       
        </tbody>
</table>
</div>


    </div>
</includeonly>
</includeonly>

Revision as of 03:05, 2 August 2015