kostia-lev/getAllTracksFromVK.html

## getAllTracksFromVK.html
<!doctype html>
<html>
    <head>
    <link href=//twitter.github.com/bootstrap/assets/css/bootstrap.css rel=stylesheet>
    <link href=style.css rel=stylesheet>
    </head>
    <body>
        <button id=login class="btn btn-success margin">Вход</button>
        <div class="btn-group margin hidden">
            <button id=logout class="btn btn-success">Выход</button>
            <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a id=allInformation href="#">Вся информация</a>
                </li>
                <li>
                    <a id=links href="#">Ссылки</a>
                </li>
                <li>
                    <a id=names href="#">Имена</a>
                </li>
            </ul>
        </div>
        <span class=icon></span>
        <span class=msg></span>
        <div id="editor" class=margin></div>
        <script src=//vkontakte.ru/js/api/openapi.js></script>
        <script src=//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js></script>
        <script src=//raw.github.com/coderaiser/cloudcmd/dev/lib/util.js></script>
        <script src=//raw.github.com/coderaiser/cloudcmd/dev/lib/client/dom.js></script>
        <script src=vk.js></script>
    </body>
</html>

## style.css
.margin{
    margin-left:20px;
    margin-top:20px;
}

.hidden{
    position: fixed;
    top: 99999px;
    left: 99999px;
}

#editor {
    position: relative;
    height: 600px;
    width : 600px;
}

.loading{
    position:relative;
    top:1px;
    background:url(//raw.github.com/coderaiser/cloudcmd/dev/img/spinner.gif);
}

.icon{
    display:inline-block;
    width:16px;
    height:16px;
    margin-left:0.5%;
    font-family: 'Octicons Regular';
    font-size:16px;
}

.msg{
    position: relative;
    top: 11px;
}

## vk.js
var VK, ace, Util, DOM;

(function(VK, ace, Util, DOM){
    'use strict';

    var LogIn,
        AllInformation,
        Loading,
        Editor,
        Msg;

    window.onload = function(){
        Editor = ace.edit("editor");
        Editor.getSession().setMode("ace/mode/javascript");

        VK.init({ apiId: 3336925 });

        LogIn               = DOM.getById('login');
        Loading             = DOM.getByClass('icon')[0];
        Msg                 = DOM.getByClass('msg')[0];

        var lAllInformation = DOM.getById('allInformation'),
            lLinks          = DOM.getById('links'),
            lNames          = DOM.getById('names'),
            lLogOut         = DOM.getById('logout');

        LogIn.onclick       = function(){
            var clip;
            showLoad();
            DOM.anyLoadInParallel([
                '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
                '//twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js',
            ]);

            VK.Auth.login(function(pResponse){
                hideLoad();
                onLogin(pResponse);
                showLoad();
                lAllInformation.onclick();
            }, VK.access.AUDIO);
        };

        lLogOut.onclick     = function(){
            showLoad();
            VK.Auth.logout(function(){
                hideLoad();
                AllInformation  = '';
                Msg.textContent = '';
            });

            DOM.show( LogIn );
            DOM.hide( DOM.getByClass('btn-group')[0] );

            Editor.setValue('', -1);
        }

        lAllInformation.onclick = function(){
            getAudio(function(){
                var lAllInf = JSON.stringify(AllInformation, null, 4);
                Editor.setValue(lAllInf, -1);
            });
        };

        lLinks.onclick = function(){
            getAudio(function(){
                var lUrls   =  parseInf(function(pTrack){
                    return pTrack.url + '\n';
                });

                Editor.setValue(lUrls, -1);
            });
        };

        lNames.onclick = function(){
            getAudio(function(){
                var lNames  = parseInf(function(pTrack){
                    return pTrack.artist + ' - ' + pTrack.title + '.mp3\n';
                });

                Editor.setValue(lNames, -1);
            });
        };

    };


    function onLogin(response) {
        if (response.session) {
            DOM.show( DOM.getByClass('btn-group')[0] );
            DOM.hide(LogIn);

            console.log('user: ' + response.session.mid);
            VK.Api.call('getVariable', {key: 1281}, function(r) {
                if(r.response)
                    Msg.textContent = 'Привет, ' + r.response;
            });

            VK.Auth.getLoginStatus(function(pStatus){
                console.log(pStatus.connected);
            });
        }
    }

    function getAudio(pCallBack){
        showLoad();
        var lFunc = function(){
            hideLoad();
            Util.exec(pCallBack);
        };

         Util.ifExec(AllInformation, lFunc, function(){
             hideLoad();
             VK.Api.call('audio.get', {}, getAudioTracks(pCallBack));
         });
    }

    function getAudioTracks(pCallBack){
        return function(pInformation) {
            AllInformation  = pInformation.response;
            Util.exec(pCallBack);
            //var link        = window.URL.createObjectURL(new Blob([JSON.stringify(AllInformation)]));
            //createLink(link, "Вся информация");
            //link = window.URL.createObjectURL(new Blob([lUrls]));
            //createLink(link, "Ссылки");

            //link = window.URL.createObjectURL(new Blob([lNames]));
            //createLink(link, "Имена песен");
        };
    }

    /*
    function createLink(pHref, pText){
        var lElement            = document.createElement('a');
        lElement.className      = 'btn btn-primary';
        lElement.textContent    = pText;
        lElement.href           = pHref;
    }
    */

    function parseInf(pParseFunc){
        var lNames = '';

        for(var i = 0, n = AllInformation.length; i < n; i++)
            lNames += Util.exec(pParseFunc, AllInformation[i]);

        return lNames;
    }

    function showLoad(){
        DOM.addClass(Loading, 'loading');
    }

    function hideLoad(){
        DOM.removeClass(Loading, 'loading');
    }


})(VK, ace, Util, DOM);
	<!doctype html>
	<html>
	<head>
	<link href=//twitter.github.com/bootstrap/assets/css/bootstrap.css rel=stylesheet>
	<link href=style.css rel=stylesheet>
	</head>
	<body>
	<button id=login class="btn btn-success margin">Вход</button>
	<div class="btn-group margin hidden">
	<button id=logout class="btn btn-success">Выход</button>
	<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
	<span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
	<li>
	<a id=allInformation href="#">Вся информация</a>
	</li>
	<li>
	<a id=links href="#">Ссылки</a>
	</li>
	<li>
	<a id=names href="#">Имена</a>
	</li>
	</ul>
	</div>
	<span class=icon></span>
	<span class=msg></span>
	<div id="editor" class=margin></div>
	<script src=//vkontakte.ru/js/api/openapi.js></script>
	<script src=//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js></script>
	<script src=//raw.github.com/coderaiser/cloudcmd/dev/lib/util.js></script>
	<script src=//raw.github.com/coderaiser/cloudcmd/dev/lib/client/dom.js></script>
	<script src=vk.js></script>
	</body>
	</html>
	.margin{
	margin-left:20px;
	margin-top:20px;
	}

	.hidden{
	position: fixed;
	top: 99999px;
	left: 99999px;
	}

	#editor {
	position: relative;
	height: 600px;
	width : 600px;
	}

	.loading{
	position:relative;
	top:1px;
	background:url(//raw.github.com/coderaiser/cloudcmd/dev/img/spinner.gif);
	}

	.icon{
	display:inline-block;
	width:16px;
	height:16px;
	margin-left:0.5%;
	font-family: 'Octicons Regular';
	font-size:16px;
	}

	.msg{
	position: relative;
	top: 11px;
	}
	var VK, ace, Util, DOM;

	(function(VK, ace, Util, DOM){
	'use strict';

	var LogIn,
	AllInformation,
	Loading,
	Editor,
	Msg;

	window.onload = function(){
	Editor = ace.edit("editor");
	Editor.getSession().setMode("ace/mode/javascript");

	VK.init({ apiId: 3336925 });

	LogIn = DOM.getById('login');
	Loading = DOM.getByClass('icon')[0];
	Msg = DOM.getByClass('msg')[0];

	var lAllInformation = DOM.getById('allInformation'),
	lLinks = DOM.getById('links'),
	lNames = DOM.getById('names'),
	lLogOut = DOM.getById('logout');

	LogIn.onclick = function(){
	var clip;
	showLoad();
	DOM.anyLoadInParallel([
	'//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
	'//twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js',
	]);

	VK.Auth.login(function(pResponse){
	hideLoad();
	onLogin(pResponse);
	showLoad();
	lAllInformation.onclick();
	}, VK.access.AUDIO);
	};

	lLogOut.onclick = function(){
	showLoad();
	VK.Auth.logout(function(){
	hideLoad();
	AllInformation = '';
	Msg.textContent = '';
	});

	DOM.show( LogIn );
	DOM.hide( DOM.getByClass('btn-group')[0] );

	Editor.setValue('', -1);
	}

	lAllInformation.onclick = function(){
	getAudio(function(){
	var lAllInf = JSON.stringify(AllInformation, null, 4);
	Editor.setValue(lAllInf, -1);
	});
	};

	lLinks.onclick = function(){
	getAudio(function(){
	var lUrls = parseInf(function(pTrack){
	return pTrack.url + '\n';
	});

	Editor.setValue(lUrls, -1);
	});
	};

	lNames.onclick = function(){
	getAudio(function(){
	var lNames = parseInf(function(pTrack){
	return pTrack.artist + ' - ' + pTrack.title + '.mp3\n';
	});

	Editor.setValue(lNames, -1);
	});
	};

	};


	function onLogin(response) {
	if (response.session) {
	DOM.show( DOM.getByClass('btn-group')[0] );
	DOM.hide(LogIn);

	console.log('user: ' + response.session.mid);
	VK.Api.call('getVariable', {key: 1281}, function(r) {
	if(r.response)
	Msg.textContent = 'Привет, ' + r.response;
	});

	VK.Auth.getLoginStatus(function(pStatus){
	console.log(pStatus.connected);
	});
	}
	}

	function getAudio(pCallBack){
	showLoad();
	var lFunc = function(){
	hideLoad();
	Util.exec(pCallBack);
	};

	Util.ifExec(AllInformation, lFunc, function(){
	hideLoad();
	VK.Api.call('audio.get', {}, getAudioTracks(pCallBack));
	});
	}

	function getAudioTracks(pCallBack){
	return function(pInformation) {
	AllInformation = pInformation.response;
	Util.exec(pCallBack);
	//var link = window.URL.createObjectURL(new Blob([JSON.stringify(AllInformation)]));
	//createLink(link, "Вся информация");
	//link = window.URL.createObjectURL(new Blob([lUrls]));
	//createLink(link, "Ссылки");

	//link = window.URL.createObjectURL(new Blob([lNames]));
	//createLink(link, "Имена песен");
	};
	}

	/*
	function createLink(pHref, pText){
	var lElement = document.createElement('a');
	lElement.className = 'btn btn-primary';
	lElement.textContent = pText;
	lElement.href = pHref;
	}
	*/

	function parseInf(pParseFunc){
	var lNames = '';

	for(var i = 0, n = AllInformation.length; i < n; i++)
	lNames += Util.exec(pParseFunc, AllInformation[i]);

	return lNames;
	}

	function showLoad(){
	DOM.addClass(Loading, 'loading');
	}

	function hideLoad(){
	DOM.removeClass(Loading, 'loading');
	}


	})(VK, ace, Util, DOM);