Drag and drop Clone Coding



function loadData(){
   
        dragRevert = true;
        CountOfAnswers1 = 0;
   
            $(".dragItem").draggable({containment: "#dragBg", helper: "clone", revert: "invalid"});

        $(".drop>div").each(function(){
            $(this).droppable({
                drop:function(event, ui){
                   
                    if($(this).html() == ""){
                         $(this).append($(ui.draggable).clone());
                        }
                }
            });
        });
       
        if(is_touch_device()){
          init();
          }
   
}

Drag and drop reset


Drag and drop reset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>edndType4</title>
<link rel="stylesheet" href="css/ednd.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/elib.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.adrag').ednd({
drag:true,
revert:"invalid",
containment:'.eContainer4',

});
$('.adrop').ednd({
drop:true,
type:'type4',


});

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
}

$("#undo").click(function() {
alert('in undo click');
        revertDraggable($(".adrag"));
                       
});


});
</script>

</head>

<body>

<div class="eContainer3">

<div class="dragArea">
<div class="adrag ui-widget-content" id="adg1" edragid="1"> U.S.A </div>
<div class="adrag ui-widget-content" id="adg2" edragid="2"> India</div>
<div class="adrag ui-widget-content" id="adg3" edragid="3"> Australia </div>
<div class="adrag ui-widget-content" id="adg4" edragid="4"> U.K</div>
</div>

<div class="dropArea">
<div class="dp_con"><div class="adrop ui-widget-header" id="adp1" edropid="2"> </div></div>
<div class="dp_con"> Sydney<div class="adrop ui-widget-header" id="adp2" edropid="3"> </div><span class="feed_img"> </span></div>
<div class="dp_con">  London<div class="adrop ui-widget-header" id="adp3" edropid="4"> </div><span class="feed_img"> </span></div>
<div class="dp_con">  Washington DC<div class="adrop ui-widget-header" id="adp4" edropid="1"> </div><span class="feed_img"> </span></div>
</div>
<div class="eSubmit"></div>
<button id="undo" type="button">Undo</button>


</div>


</body>
</html>



JS
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();
(function($){
$.fn.ednd = function(dnd){
var dnd = $.extend(eobjects,dnd);

var eobjects = {
            drag:true,
            drop:true,
            revert:true,
            containment:'cid',
            type:'type'
           
            };
           
var ed = dnd;


if(ed.drag){
if(is_touch_device()){
var a=0;
            $(this).each(function(){
                        var b=$(this).attr("id");
                        //alert(b);
                        var c=document.getElementById(b);
                        a++;
                        c.addEventListener("touchstart",touchHandler,true);
                        c.addEventListener("touchmove",function(e){e.preventDefault();},true);
                        c.addEventListener("touchmove",touchHandler,true);
                        c.addEventListener("touchend",touchHandler,true);
                        c.addEventListener("touchcancel",touchHandler,true);
            });
}
$(this).css({'cursor':'pointer'});
$(this).each(function(){

$(this).draggable({revert:ed.revert,containment:ed.containment, });

});

}

if(ed.drop){

 if(ed.type == 'type4'){
            $(this).next('.feed_img').hide();
            var that = $(this);
            var ec = 0;
            $(this).each(function(){
            $(".dp_con").droppable({
        drop: function(event, ui) {alert('in drop')
            if (!ui.draggable.data("originalPosition")) {
                ui.draggable.data("originalPosition",
                    ui.draggable.data("draggable").originalPosition);
            }
        }
    });                                         
});       

}

}

function is_touch_device() {
if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || (uagent.search('android') > -1) || (uagent.search('android') > -1)|| (platformAgent.search('android')>-1) || (platformAgent.search('linux')>-1)){
  return true;
 }else{
  return false;
 }
}


function touchHandler(a){
            var b=a.changedTouches,c=b[0],d="";
            switch(a.type){
                        case"touchstart":
                                    d="mousedown";
                                   
                                    break;
                        case"touchmove":
                                    d="mousemove";
                                    break;
                        case"touchend":
                                    d="mouseup";
                                    break;
                        default:
                                    return
            }
            var e=document.createEvent("MouseEvent");
            e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);
            c.target.dispatchEvent(e);
}
return this;
};                      
})(jQuery);



CSS
/* ednd */

*{
margin:0;
padding:0;
}
.eContainer1,.eContainer2,.eContainer3,.eContainer4,.eContainer5{
border:2px solid #e4e4e4;
height:480px;
width:640px;
float:left;
margin:20px;
padding:10px;
}



.drag{
background:orange;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.drop{
border:1px solid red;
height:20px;
width:90px;
margin:5px;
}
.vdrop{
border:1px solid red;
height:20px;
width:90px;
margin:5px;
text-align:center;
}
.dragArea{
float:left;
border:1px solid;
}
.dropArea{
float:right;
}

.vdrag{
background:blue;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:white;
text-align:center;
}


.vdrop{
border:1px solid maroon;
height:20px;
width:90px;
margin:5px;
}


.adrag{
background:#A41730;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:white;
text-align:center;
}


.adrop{
border:1px solid maroon;
height:20px;
width:90px;
margin:5px;
text-align:center;
float:left;
}

.eSubmit{
background:url(../images/submit_old.png)no-repeat;
height:55px;
width:128px;
margin:230px 0 0 240px;
cursor:default;
opacity:0.4;
}
.dp_con{
height:50px;
width:300px;
border:1px solid;
}
.feed_pop{
float:left;
height:126px;
width:300px;
background:url(../images/popup.png)no-repeat;
position:absolute;
margin:295px 0 0 35px;
display:none;
text-align:center;
line-height:120px;
}
.eclose{
float:right;
cursor:pointer;
display:none;
}
.feed_correct{
float:left;
height:35px;
width:32px;
background:url(../images/feed_r.png) no-repeat;
}

.feed_wrong{
float:left;
height:35px;
width:32px;
background:url(../images/feed_w.png) no-repeat;
}

canvas Undo Redo Examples


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body onload="InitThis();">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="canvasdraw.js"></script>
    <div align="center">
        <canvas id="myCanvas" width="500" height="200" style="border:2px solid black"></canvas>
        <br /><br />
        <button onclick="javascript:drawImage();return false;">Clear Area</button>
        Line width : <select id="selWidth">
            <option value="1">1</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="7">7</option>
            <option value="9" selected="selected">9</option>
            <option value="11">11</option>
        </select>
        Color : <select id="selColor">
            <option value="black">black</option>
            <option value="blue" selected="selected">blue</option>
            <option value="red">red</option>
            <option value="green">green</option>
            <option value="yellow">yellow</option>
            <option value="gray">gray</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="javascript:cUndo();return false;">Undo</button>
        <button onclick="javascript:cRedo();return false;">Redo</button>
    </div>
</body>
</html>





JS CODE

// by Chtiwi Malek ===> CODICODE.COM

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
    ctx = document.getElementById('myCanvas').getContext("2d");
    $('#myCanvas').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#myCanvas').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#myCanvas').mouseup(function (e) {
        if (mousePressed) {
            mousePressed = false;
            cPush();
        }
    });

    $('#myCanvas').mouseleave(function (e) {
        if (mousePressed) {
            mousePressed = false;
            cPush();
        }
    });
    drawImage();
}

function drawImage() {
    var image = new Image();
    image.src = 'trace.png';
    $(image).load(function () {
        ctx.drawImage(image, 0, 0, 500, 200);
        cPush();
    });   
}

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = $('#selColor').val();
        ctx.lineWidth = $('#selWidth').val();
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x;
    lastY = y;
}

var cPushArray = new Array();
var cStep = -1;

function cPush() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(document.getElementById('myCanvas').toDataURL());
    document.title = cStep + ":" + cPushArray.length;
}
function cUndo() {
    if (cStep > 0) {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
        document.title = cStep + ":" + cPushArray.length;
    }
}
function cRedo() {
    if (cStep < cPushArray.length-1) {
        cStep++;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
        document.title = cStep + ":" + cPushArray.length;
    }
}

Jquery for XML load with Next prev

// common variable
var pageTab = 0;
var nav = 0;
var page;
var tab;
var xmldoc;
var testChance = 0;
var active = true;
var box;
// define
var submitActive = false;
var optIndex;
var $this;
var temp = "";
var audNav = 0;
var audScroll = 0;
var audName = [];
var audNext = true;
var audPrev = true;
var nextAnim;
var nextAnimflag = 0;
var footerTxt = "Introduction";
var nxt = 1;

var nextAnim = 0;

var storeAns;
var ansRight = 0;
// init
var ansWrong = 0;
// init
var solutionNav = 1;
var eventdata;
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();
var timer;

var prev_ena = false;
var next_ena = true;
var audio_ena = true;

var audioFlag = false;
var nextAnim = 0;

var t1;
var t2;
var t3;
var t4;
var t5;
var t6;
var t7;
var t8;

var gameAud = document.getElementById('gameAud');

$(document).ready(function() {

    if (navigator.platform == 'iPad' || uagent.search('android') > -1) {
        eventdata = 'touchstart';
    } else {
        eventdata = 'click';
    }
    $("#page").show();
    //  page shown
    //xmlLoad();// load xml document;
    if (navigator.platform == 'iPad') {
        //loadAud();
    }

    $('#header_bg ul li').live(eventdata, function() {
        pageTab = $("#header_bg ul li").index(this);
        updateHeaderAndFootBg(pageTab);
        page = tab[pageTab].getElementsByTagName("section");
        nav = 0;
        loadContent(pageTab);
    });

    $("#prev").live(eventdata, function() {
        if (prev_ena) {
            prevPage();
            updateContent();
            prevupdatenav1();
            prevupdatenav();
            //pagenavtabUpdate();
            if (pageTab == 0) {
                $('#pagination li:eq(0)').show();
            }
            $('.topStrip1,.main_page').hide();
            $('#topic').hide();
        }
    });

    $("#next,.nextAnim").live(eventdata, function() {
        if (next_ena) {
            enablePrev();
            nextPage();
            updateContent();
            nextupdatenav();
            $('#topic').hide();
        }

    });

    $("#pagination li").live(eventdata, function() {
        nav = $("#pagination li").index(this);
        pageContent(nav);
        prevupdatenav();
        prevupdatenav1();
        nextupdatenav();

    });

    var gpLength = $('#pagination li').length;
    //alert(gpLength);
    if (gpLength > 10) {
        $('#pagination li:gt(9)').hide();
    }

    $('#pageText,.topStrip').live(eventdata, function() {
        $('#topic').hide();
    })
});

function nextupdatenav() {
    if (nav > 9) {
        $('#pagination li:gt(19)').hide();
    }
    if (nav > 19) {
        $('#pagination li:lt(20)').hide();
        $('#pagination li:gt(19)').show();
    }
}

function prevupdatenav() {
    if (nav < 20 && nav > 10) {
        $('#pagination li:lt(9)').hide();
        $('#pagination li:gt(9)').show();
        $('#pagination li:gt(19)').hide();
    }

}

function prevupdatenav1() {
    if (nav < 10) {
        $('#pagination li:gt(9)').hide();
        $('#pagination li:gt(19)').hide();
        $('#pagination li:lt(9)').show();
    }
}


$('#footlist').live('click', function() {
    $('#topic,#cont').show();
});

function updateContent() {
    displayState();
    updateNav(nav);
    pageContent(nav);
}

function updateNav(state) {
    nxt = state;
    //spanText.innerHTML = state;
    footerTxt = $('#topic li').eq(nxt - 1).html();
    //updateFooter(footerTxt);
    displayState();
}

function updateFooter(txt) {
    $('#footlist').html(txt);
}


$('#topic li').live('click', function() {
    pageTab = $("#topic li").index(this);
    page = tab[pageTab].getElementsByTagName("section");
    nav = 0;
    loadContent(pageTab);
    for ( i = 0; i <= page.length - 1; i++) {
        var count = $(".tcount").html(page.length);
    }
    $('.topStrip1,.main_page').hide();
    $('#topic').hide();
});

function updateHeaderAndFootBg(pageTab) {
    for (var i = 0; i <= $('#header_bg ul li').length - 1; i++) {
        var inactive_menu = 'menu_bg_' + i;
        var inactive_menu_normal = 'menu_normal_' + i;
        var inactive_foot = 'foot_bg_' + i;
        $('.' + inactive_menu).hide();
        $('.' + inactive_menu_normal).show();
        $('.' + inactive_foot).hide();
    };
    var menuBg = 'menu_bg_' + pageTab;
    var menu_normal = 'menu_normal_' + pageTab;
    var foot_bg = 'foot_bg_' + pageTab;
    $('.' + menuBg).show();
    $('.' + foot_bg).show();
    $('.' + menu_normal).hide();
}

function xmlLoad() {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
    }

    xmlhttp.open('GET', 'main.xml', false);
    xmlhttp.send();
    xmldoc = xmlhttp.responseXML;
    tab = xmldoc.getElementsByTagName("tab");
    loadContent(tab);
}

function loadContent() {
   
    page = tab[pageTab].getElementsByTagName('section');
   
    $("#pagination li").remove();
    for ( i = 0; i <= page.length - 1; i++) {
        $("#pagination").append("<li>" + eval(i + 1) + "</li>");
        var count = $(".tcount").html(page.length);
    }
    updateHeaderAndFootBg(pageTab);
    pageContent(nav);
}
alert(page);
function prevPage() {// previous
    if (nav <= 0 && pageTab <= 0) {// section first
        nav = 0;
    } else {
        if (nav <= 0) {
            pageTab--;
            page = tab[pageTab].getElementsByTagName("section");
            nav = page.length - 1;
            // start from end
            audNav = 0;
            $(".count").html(nav + 1);
            loadContent();
        } else {
            nav--;
            if (nav < 10) {
                $('#pagination li:lt(10)').show();
                $('#pagination li:gt(9)').hide();
            }
            pageContent(nav);
        }
    }
}

function nextPage() {// next
    if (nav >= page.length - 1 && pageTab >= tab.length - 1) {// section end
        nav = page.length - 1;
    } else {
        if (nav >= page.length - 1) {
            nav = 0;
            // start from begining
            //disablePrev();
            pageTab++;
            loadContent();
        } else {
            nav++;
            if (nav > 9) {
                $('#pagination li:lt(10)').hide();
                $('#pagination li:gt(9)').show();
            }

            $(".count").html(nav + 1);

            pageContent(nav);
        }
    }
}

function displayState() {
    enablePrev();
    enableNext();
    if (pageTab == 4 && nav == 19) {
        disableNext();
    }

}

function showEndText() {
    $('#pageText,#pagination').hide();
    $("#feedback, #hidebg").hide();
    $("#finished").show();
    disableButtons();
}

function disableButtons() {
    disablePrev();
    disableNext();
    disableAudio();
}

function enableButtons() {
    enablePrev();
    enableNext();
    enableAudio();
}

function disablePrev() {
    $('#prev').removeClass('prev_ena').addClass('prev_dis');
    prev_ena = false;
}

function enablePrev() {
    $('#prev').removeClass('prev_dis').addClass('prev_ena');
    prev_ena = true;
}

function disableNext() {
    $('#next').removeClass('next_ena').addClass('next_dis');
    next_ena = false;
}

function enableNext() {
    $('#next').removeClass('next_dis').addClass('next_ena');
    next_ena = true;
}

function disableAudio() {
    $('#play').css({
        'opacity' : '0.4',
        'cursor' : 'default'
    });
    audio_ena = false;
}

function enableAudio() {
    $('#play').css({
        'opacity' : '1',
        'cursor' : 'pointer'
    });
    audio_ena = true;
}

function pageContent(nav) {
    $(".count").html(nav + 1);
    // Content
    $("#pagination li").css({
        'background' : 'url("images/pageing_bg.png") no-repeat scroll 0 -1px transparent',
        'width' : '20px',
        'height' : '20px',
        'color' : '#000'
    });
    $("#pagination li:eq(" + nav + ")").css({
        'background' : 'url("images/pageing_bg.png") no-repeat scroll 0 -21px transparent',
        'width' : '20px',
        'height' : '20px',
        'color' : '#fff'
    });
    $("#feedback,#hidebg").empty().hide();
    $('#pageText,#pagination').show();
    enableButtons();
    displayState();
    $("#pageText").empty();
    // clear the container;
    stopNextAnimation();
    clearInterval(nextAnim);
    if (pageTab == 0 && nav == 0) {
        disablePrev();

    }
    prevupdatenav();
    prevupdatenav1();
    nextupdatenav();

    testChance = 0;
    audNav = 0;
    // audio play init
    clearTimeout(timer);
    flagInput = 0;

    active = true;
    submitActive = false;
    // deactivate submit button loads
    isDragDropTried5 = 0;
    audioFlag = true;
    //  03/05/12
    contentEmbed();

    if (page[nav].hasAttributeNS('', "interaction")) {// check for the interaction
        $(".test li").prepend("<input type='radio' name='r1'/>");
    }
    var audPath = page[nav].getElementsByTagName('audio')[0].getAttribute('path');
    // store audio path
    if (audPath == 'noAudio') {
        gameAudioStop();
        disableAudio();
    } else {
        enableAudio();
        audioPlay(uagent);
    }
}

function contentEmbed() {
    contentArray = page[nav].getElementsByTagName('details')[0].childNodes;
    for ( i = 0; i <= contentArray.length - 1; i++) {
        if (contentArray[i].nodeType == 1) {
            serializerText(contentArray[i], box = "#pageText");
        }
    }
}

function serializerText(serialStr, box) {// Embed the relative Content
    pageStr = (new XMLSerializer()).serializeToString(serialStr);
    $(box).append(pageStr);
}

function checkAns(index, nav, $this) {// Activity
    if (submitActive) {
        storeAns = page[nav].getAttribute('answer');

        if (page[nav].getAttribute('chance') == 'yes') {
            testChance++;
            switch (testChance) {// single choice chance
                case 1:
                    if (index + 1 == storeAns) {
                        $(".test li").eq(index).attr('class', 'right');
                        embedFeed( xmlFeedTag = 'postive_feedback');
                        $("#done").hide();
                        testChance = 0;
                        nextAnimation();
                    } else {
                        embedFeed( xmlFeedTag = 'negative_feedback');
                    }
                    break;
                case 2:
                    if (index + 1 == storeAns) {
                        $(".test li").eq(index).attr('class', 'right');
                        embedFeed( xmlFeedTag = 'postive_feedback');

                    } else {
                        $(".test li").eq(storeAns - 1).attr('class', 'right');
                        // Right Answer
                        embedFeed( xmlFeedTag = 'postive_comments');
                    }
                    testChance = 0;
                    $("#done").hide();
                    nextAnimation();
                    break;
            }
        } else {
            /*True or false Script*/
        }
    }
}

function embedFeed(xmlFeedTag) {// feedback content embed
    $("#feedback,#hidebg").empty().hide();

    feedArray = page[nav].getElementsByTagName(xmlFeedTag)[0].childNodes;
    for ( i = 0; i <= feedArray.length - 1; i++) {
        if (feedArray[i].nodeType == 1) {
            serializerText(feedArray[i], box = "#feedback");
        }
    }

    timer = setTimeout(function() {
        $("#feedback,#hidebg").show();
        clearTimeout(timer);
    }, 500);
}

function audioPlay(uagent) {
    audPath = page[nav].getElementsByTagName('audio')[0].getAttribute('path');
    // store audio path

    if (audPath.indexOf(",") > 0) {
        var audPathStr = audPath.split(',');
        // store audio path in voiceText wise
        audFile = audPathStr[audNav];
    } else {
        audFile = audPath;
    }

    if (navigator.platform == 'iPad') {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.mp3',
            type : 'audio/mpeg'
        });
        loadAud();
    } else if (uagent.search('android') > -1 || uagent.search('android') > -1 || platformAgent.search('android') > -1 || platformAgent.search('linux') > -1) {
        if ($.browser.version > 534) {
            $('#gameAud').attr({
                src : 'audio/' + audFile + '.mp3',
                type : 'audio/mp3'
            });
            loadAudAndroid();
            // playAud();
        } else {
            var audioNamePath = 'audio/' + audFile + '.mp3';
            var audioElement = document.getElementById('gameAud');
            audioElement.setAttribute('src', audioNamePath);
            audioElement.load();
            audioElement.addEventListener("load", function() {
                audioElement.play();
                audStarted();
            }, true);
        }
    } else if (uagent.search('firefox') > -1) {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.ogg',
            type : 'audio/ogg'
        });
        loadAud();
    } else {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.mp3',
            type : 'audio/mpeg'
        });
        loadAud();
    }
    $("#audStop").attr({
        src : 'images/pause_01.png'
    });
}

function loadAud() {

    gameAud.load();
    gameAud.play();
    audStarted();
}

function playAud() {
    gameAud.play();
    audStarted();
}

function loadAudAndroid() {
    gameAud.load();
    t = setTimeout(function() {
        audStarted();
    }, 1000);
}

// audio stop
$("#audStop").toggle(function() {
    if (audio_ena) {
        $(this).attr({
            src : 'images/play_01.png'
        });
        gameAudioStop();
    }
}, function() {
    if (audio_ena) {
        $(this).attr({
            src : 'images/pause_01.png'
        });
        playAud();
    }
});

function gameAudioStop() {
    gameAud.pause();
}

window.onload = function() {
    gameAud.addEventListener('ended', audEnded, false);
    // bind audio ended
    gameAud.addEventListener('playing', audStarted, false);
}
setInterval(function() {
    if (gameAud.ended == true) {
        audEnded();
    }
}, 500);


function audioNext() {
    enableAudio();
    var audPathStr = audPath.split(',');
    if (audPath.indexOf(",") > 0 && audPathStr.length > 1) {
        if (audNav < audPathStr.length - 1) {
            audNav++;
            audioPlay(uagent);
        }
    }
}

function clearTimer() {
    clearTimeout(t1);
    clearTimeout(t2);
    clearTimeout(t3);
    clearTimeout(t4);
    clearTimeout(t5);
    clearTimeout(t6);
    clearTimeout(t7);
    clearTimeout(t8);
}

function nextAnimation() {
    $('.nextAnim').show();
}

function stopNextAnimation() {
    $('.nextAnim').hide();
}

canvas Examples

Canvas Example Code
var noClick;
var arcMoves = 0;
var intervalId;
var startingAngle;
var endingAngle;
var centerX;
var centerY;
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var newDate = new Date;
var tempImgName;

var a = 0;
var b = 0;        
var storeArr = []
var pro_enable = false;


$(document).ready(function(){
/*$('#geoLayout').append('
 
id="pencilIcon" />  
id="clear" />   id="eraseIcon" />
Type
Type
Radius mm
Rotate °
Submit
Submit
');
*/                    
            geoLayout = document.getElementById('geoLayout');
            clear = document.getElementById('clear');
            pageText = document.getElementById('geoLayout');


            noClick = 0      ;
            firstMove = true;

            canvas = document.getElementById('canvas');
            ctx=canvas.getContext('2d');
            ctx.beginPath();
           
            $("#geoIcon").toggle(function(){
                        $("#geoLayout").fadeIn();
                        $("#geo-thumb").show();
             },function(){
                        //$("#canvas").empty();
                        $("#canvas").css({'cursor':'default'});
                        $("#pencilDv").hide();
                        $("#compassDv").hide();
                        $("#protector").remove();
                        $("#ruler").remove();
                        //canvas = document.getElementById('canvas');
                        //ctx=canvas.getContext('2d');
                        //ctx.clearRect(0, 0, 585, 450);
                        //ctx.beginPath();
                        $("#geo-thumb").hide();
                        $("#geoTool").empty();
                        $("#geoLayout").fadeOut();
            });
           
            $("#pencilIcon").toggle(function(){
                        $("#pencilDv").show();
                        $("#eraser").remove();
                        $("#compassDv, #ProDiv").hide();
                        $("#canvas").css({'cursor':'pointer'});
                        if(pro_enable){
                                                $("#canvas").css({'z-index':'100000','position':'absolute'});
                        }
                        else {
                                                $("#canvas").css({'z-index':'0','position':'static'});
                        }
            },function(){
                        $("#canvas").css({'cursor':'default'});
                        $("#pencilDv").hide();
            });
           
var DragLeft = 0;
var DragTop = 0;
           
            $("#eraseIcon").toggle(function(){
                         $("#geoTool").append("");
                                    new webkit_draggable('eraser',{revert: false});
                                    eraseImage();
                                    $("#pencilDv").hide();
                                    $("#compassDv").hide();
            },function(){
                        $("#eraser").remove();
            });

            $('#canvas').mousedown(function(e){
                        if($("#pencilDv").css('display')=="block")
                        {         
                                    paint = true;
                                    addClick(e.pageX - eval(this.offsetLeft+geoLayout.offsetLeft), e.pageY - eval(this.offsetTop+geoLayout.offsetTop));
                                    redraw();
                        }
            });
           
            $('#canvas').mousemove(function(e){
                if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))
                        {
                                    if(paint){
                                                addClick(e.pageX - eval(this.offsetLeft+geoLayout.offsetLeft), e.pageY - eval(this.offsetTop+geoLayout.offsetTop), true);
                                                redraw();
                                    }
                        }
            });
           
            $('#canvas').mouseup(function(e){
                         if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))
                        {
                                    paint = false;
                                    clickX = new Array();
                                    clickY = new Array();
                                    clickDrag = new Array();
                        }
            });
           
            $('#canvas').mouseleave(function(e){
                        if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))
                        {
                                    paint = false;
                                    clickX = new Array();
                                    clickY = new Array();
                                    clickDrag = new Array();
                        }
            });
           
            clear.onclick = function(){
                        noClick = 0;
                        storeArr = [];
                        firstMove = true;
                        next = 0;
                        ctx.clearRect(0, 0, 585, 450);
                        ctx.beginPath();
            }
            if(/iphone|ipod|ipad|android/i.test(navigator.userAgent))
                                    init();
           
});



function eraseImage(){
           
            domid = document.getElementById('eraser');
            domid.onmousemove = function(event){
                        x = event.pageX-eval(pageText.offsetLeft +15);
                        y = event.pageY-pageText.offsetTop;
                        x1 = eval(event.pageX-eval(domid.offsetLeft+geoLayout.offsetLeft))-11;
                        y1 = Number(event.pageY-eval(domid.offsetTop+geoLayout.offsetTop));
             
                        if((x>0 && x< 585) && (y > 0 && y < 450)){
                                    ctx.beginPath();
                                    ctx.moveTo(eval(x-x1)-1,eval(y+y1)-1);
                                    ctx.rect(eval(x-x1)-1,eval(y+y1)-1,2,2);
                                    ctx.lineCap='round';

                                    ctx.lineWidth = 40;
                                    ctx.strokeStyle = "#000";
                                    ctx.stroke();
                        }
            }
}

function spoting(){

            domid = document.getElementById('canvas');
            domid.onclick = function(event){
                       
                        if($("#compassDv").css('display')=="block")
                        {
                        var radius = $("#getRadius").val();
                        radius = eval(radius * 3.779527559);
                       
                        noClick ++
                                    x=        event.pageX - eval(this.offsetLeft+geoLayout.offsetLeft);
                                    y=        event.pageY - eval(this.offsetTop+geoLayout.offsetTop);
                                   
                                   
                                    if((x>0 && x< 585) && (y > 0 && y < 450)){
                                               
                                               
                                                switch (($("#compassMode").val()).toLowerCase()){
                                                            case "arc":
                                                                        arcMoves++;
                                                                       
                                                                        ctx.moveTo(x,y);
                                                                        ctx.rect(x,y,2,2);
                                                                       
                                                                        if(arcMoves == 1)
                                                                        {
                                                                                    centerX = eval(x);
                                                                                    centerY = eval(y);
                                                                                   
                                                                                    ctx.lineCap='round';
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();
                                                                                   
                                                                                    startingAngle = 0;
                                                                                    endingAngle = 6.3;
                                                                                    var counterclockwise = false;
                                                                                   
                                                                                    /*var img = new Image();
                                                                                    tempImgName = newDate.getTime() + '.png';
                                                                                    img.src = tempImgName;
                                                                                    img.id   = tempImgName;
                                                                                    ctx.drawImage(img,0,0);*/
                                                                                    ctx.beginPath();
                                                                                    ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
                                                                                    ctx.strokeStyle = "#fafafa"; // line color
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();
                                                                                   
                                                                        }
                                                                        else if(arcMoves == 2)
                                                                        {
                                                                                    startingAngle = Math.atan2(eval(y-centerY),eval(x-centerX));
                                                                                    if (startingAngle < 0)
                                                                                                startingAngle += 2 * Math.PI;
                                                                                   
                                                                                    ctx.beginPath();
                                                                                    ctx.rect(x,y,2,2);
                                                                                    ctx.lineCap='round';
                                                                                    ctx.strokeStyle = "black"; // line color
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();

                                                                        }
                                                                        else
                                                                        {
                                                                                    ctx.rect(x,y,2,2);
                                                                                    ctx.lineCap='round';
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();
                                                                                   
                                                                                    endingAngle = Math.atan2(eval(y-centerY),eval(x-centerX));
                                                                                    if (endingAngle < 0)
                                                                                                endingAngle += 2 * Math.PI;

                                                                                    var counterclockwise = false;
                                                                                    ctx.beginPath();
                                                                                    ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
                                                                                    ctx.strokeStyle = "black"; // line color
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();
                                                                                    arcMoves = 0;
                                                                        }
                                                                       
                                                            break;
                                                            case "circle":
                                                                        ctx.moveTo(x,y);
                                                                        ctx.rect(x,y,2,2);
                                                                        ctx.lineCap='round';
                                                                        ctx.lineWidth = 2;
                                                                        ctx.stroke();
                                                                                   
                                                                        centerX = x;
                                                                        centerY = y;

                                                                        startingAngle = 0;
                                                                        endingAngle = 6.3;
                                                                        var counterclockwise = false;
                                                                        ctx.beginPath();
                                                                        ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
                                                                        ctx.strokeStyle = "black"; // line color
                                                                        ctx.lineWidth = 2;
                                                                        ctx.stroke();
                                                            break;
                                                }
                                    }
                        }
            }
}
           
           
 
           
            function addClick(x, y, dragging)
            {
              clickX.push(x);
              clickY.push(y);
              clickDrag.push(dragging);
            }
           
            function redraw(){
                       
                        ctx.strokeStyle = "black";
                        ctx.lineJoin = "round";
                        ctx.lineWidth = 2;
                        if(($("#pencilMode").val()).toLowerCase() == "freehand")
                        {
                                    init();
                                    for(var i=0; i < clickX.length; i++)
                                    {         
                                                ctx.beginPath();
                                                if(clickDrag[i] && i){
                                                  ctx.moveTo(clickX[i-1], clickY[i-1]);
                                                 }else{
                                                   ctx.moveTo(clickX[i]-1, clickY[i]);
                                                 }
                                                 ctx.lineTo(clickX[i], clickY[i]);
                                   
                                                 ctx.closePath();
                                                 ctx.stroke();
                                    }
                        }
                        else if(($("#pencilMode").val()).toLowerCase() == "line")
                        {
                                    destroy();
                                    ctx.rect(clickX[0],clickY[0],2,2);
                                    ctx.lineCap='round';
                                    ctx.lineWidth = 2;
                                   
                                    if(clickX.length > 1)
                                    {
                                                ctx.rect(clickX[1],clickY[1],2,2);
                                                ctx.lineCap='round';
                                                ctx.lineWidth = 2;
                                                ctx.stroke();
                                               
                                                ctx.beginPath();
                                                ctx.moveTo(clickX[0], clickY[0]);
                                                ctx.lineTo(clickX[1], clickY[1]);
                                                ctx.closePath();
                                               
                                                paint = false;
                                                clickX = new Array();
                                                clickY = new Array();
                                                clickDrag = new Array();
                                    }
                                    ctx.stroke();
                        }
            }

           




function init(){
            var c = document.getElementById("canvas");
            c.addEventListener("touchstart",touchHandler,true);
            c.addEventListener("touchmove",function(e){e.preventDefault()},true);
            c.addEventListener("touchmove",touchHandler,true);
            c.addEventListener("touchend",touchHandler,true);
            c.addEventListener("touchcancel",touchHandler,true);
            c.addEventListener("doubletap",touchHandler,true);
}
function destroy(){
            var c = document.getElementById("canvas");
            c.removeEventListener("touchstart",touchHandler,true);
            c.removeEventListener("touchmove",function(e){e.preventDefault()},true);
            c.removeEventListener("touchmove",touchHandler,true);
            c.removeEventListener("touchend",touchHandler,true);
            c.removeEventListener("touchcancel",touchHandler,true);
            c.removeEventListener("doubletap",touchHandler,true);
}

function touchHandler(a){
            var b=a.changedTouches,c=b[0],d="";
            switch(a.type){
                        case"touchstart":
                                    d="mousedown";
                                    break;
                        case"touchmove":
                                    d="mousemove";
                                    break;
                        case"touchend":
                                    d="mouseup";
                                    break;
                        case"touchmove":
                                    d="dblclick";
                                    break;
                        default:
                                    return
            }
            var e=document.createEvent("MouseEvent");
            e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);
            c.target.dispatchEvent(e)
}







Type2